Exercício 06 Frações

Oi Pessoal, Resolvi brincar um pouco com a lógica de programação. Por estar gostando muito desse curso, resolvi compartilhar com vcs, após um prazeroso trabalho, o seguinte código:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaQuadrado(x, y, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect (x, y, 50, 50)
        pincel.strokeStyle = "black"
        pincel.strokeRect (x, y, 50, 50)
    }

    var numero = parseInt (prompt("Quantos quadrados PREENCHIDOS você quer desenhar? "));
    var numero2 = parseInt (prompt("Quantos quadrados VAZIOS você quer desenhar? "));
    var x = 0

    for (var inicial = 0; inicial < numero; inicial++){
        desenhaQuadrado (x, 50, "green");
        x = x + 50
    }

    var ondePreenchidoParou = numero * 50

    for (var inicial2 = 0; inicial2 < numero2; inicial2++ ){
        pincel.strokeRect (ondePreenchidoParou, 50, 50, 50)
        ondePreenchidoParou = ondePreenchidoParou + 50
    }

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

        pincel.font='20px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

    desenhaTexto("Qual é a fração?", 50, 30);

</script>

OBS: Se ajudar alguém, então ficarei feliz; senão, se puder reduzir ainda mais esse código ou consertar algo, então ficarei agradecido. FimSe. FimSe. :-) `