[Projeto] Tentei alguns incrementos no projeto.

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

<script type="text/javascript">

    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');

    // desenha o texto
    function desenhaTexto(texto, x, y) {

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

    // desenha os quadrados
    function desenhaQuadrado(x, y, cor) {        

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);
        pincel.fillStroke = 'black';
        pincel.strokeRect(x, y, 50, 50);

    }

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

    // pede os parametros ao usuário
    let numerador = parseInt(prompt("Insira numerador da fração."));
    let denominador = parseInt(prompt("Insira denominador da fração."));

    // função que desenha a fração e vai adequando os quadrados na tela
    function desenhaFracao(numerador, denominador, x, y, corn, cord) {
        for(let i = 1; i <= numerador; i++) {
            desenhaQuadrado(x, y, corn);
            x = x + 50;
            if(x >= tela.width) {
                y = y + 50;
                x = 0; 
            }
            while (i < denominador && i >= numerador) {
                desenhaQuadrado(x, y, cord);
                x = x + 50;
                i++;
                if(x >= tela.width) {
                y = y + 50;
                x = 0;
                }
            }
        }
    }    

    desenhaFracao(numerador, denominador, 0, 50, 'green', 'white');

    // apresenta os parametros informados pelo usuário
    document.write("<h1>" + numerador + " / " + denominador + "</h1>.");

</script>