Solução código - Frações

Ola galera,

Mais uma fez trago aqui um outro código bem diferente para o exercício proposto.

A ideia é que através destas brincadeiras erros apareçam e a dor de cabeça com eles tbm, o que na realidade aconteceu.

Espero que gostem e ajude.

<meta charset="UTF-8">

<h1>..:: Fração ::..</h1>
<h2>O que é uma fração?</h2>
<p>Fração é um número que representa uma ou mais partes iguais em que um inteiro foi dividido. </p>
<p>Assim, se tivermos um chocolate inteiro e o dividirmos em quatro partes iguais, <b>cada parte</b> representará uma fração do chocolate.</p>
<h3>Exemplo: <i>(complete)</i></h3>
<p>O <font color="red"><b><u>professor</u></b></font> dividiu uma banana em <input id="denominador" size="1" value=4> (<font color="red"><i><b>max 24</b></i></font>) pedaço(s).
<br>Ele se distraiu e a sua <font color="red"><b><u>calopsita</u></b></font> comeu <input id="numerador" size="1" value=1> pedaço(s).
</p>A representação gráfica é mostrada no botão abaixo.</p>
<p>Resultado: <button id="mostrar">Mostrar</button></p>

<canvas id="tela" width="600" height="70"></canvas>

<script>

    var numerador = document.querySelector('#numerador');
    var denominador = document.querySelector('#denominador');

    var tela = document.querySelector('#tela');
    var lapis = tela.getContext('2d');

    function desenhaQuadrado (x, tamanho, cor){
        lapis.fillStyle = cor;
        lapis.fillRect(x, 20, tamanho, tamanho);
        lapis.fillStrock = 'black';
        lapis.strokeRect(x, 20, tamanho, tamanho);
    }

    function desenhaBanana(numerador, denominador) {
        //Desenha objeto inteiro dividido
        if (denominador <= 24) {
            var x = 0;
            for (var cont = 1 ; cont <= denominador ; cont++) {
                desenhaQuadrado(x, 25, 'white');
                x = x + 25;
            }
            x = 0;
            //Desenha objeto comido pintado
            for (var cont = 1 ; cont <= numerador ; cont++) {
                desenhaQuadrado(x, 25, 'red');
                x = x + 25;
            }
        } else {
            alert('Atenção!\nNúmero de divisões superior a máxima (24) permitida');
        }
    }

    function limpaTela() {
        lapis.fillStyle = 'white';
        lapis.fillRect(0, 0, 600, 50);
    }

    function desenhaTexto(texto, x , y) {
        var tela = document.querySelector('#tela');
        var lapis = tela.getContext('2d');

        lapis.font='15px Georgia'; // Tamanho e estilo da fonte
        lapis.fillStyle='blue'; // cor da font
        lapis.fillText(texto, x, y); // texto(texto escrito) | x(coord X) | y(coord Y)
    }

    function fracao() {
        limpaTela();
        var x = parseInt(numerador.value);
        var y = parseInt(denominador.value);
        if (x > y) {
            alert('Impossivel divisão!\nFavor verificar os valores informados.');
        } else {
            // desenhaTexto ('texto escrito, coord X, coord Y)
            desenhaTexto ('Qual é a fração? (' + x + '/' + y + ')', 0, 15);
            desenhaBanana(x, y);
        }
        denominador.focus();  
    }

    var mostrar = document.querySelector('#mostrar');
    mostrar.onclick = fracao;

</script>