Sugestão de código

Thiago, boa tarde!

Ficou muito bom! A visualização ficou um pouco difícil, visto que, você redesenhou os quadrados em cima do outro. Um desafio interessante seria mudar a cor.

Sobre o código está de parabéns, nomes semânticos e claros.

Continue assim e bons estudos!

Fiz essa modificação. E agora?

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>  

    function desenhaQuadrado(x, y, tamanho, cor){

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

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeStyle ='black';
        pincel.strokeRect(x, y, tamanho, tamanho);

    }

    var numerador = parseInt(prompt('Digite o numerador da fração. (de 1 a 11)')); 
    var denominador = parseInt(prompt('Digite o denominador da fração. (de 1 a 11)'));
    var cor = prompt('Me fale sua cor preferida. In English, please xD!!');

    var tamanho = 50;
    var y = 50;

    for(var x = 50; x < (numerador*tamanho)+tamanho; x += tamanho){

        desenhaQuadrado(x, y, tamanho, cor);       
    }

    cor = 'white';

    while(x <(denominador*tamanho) + tamanho) {

        desenhaQuadrado(x, y, tamanho, cor);
        x += tamanho;
    }

    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("Segue a demonstração gráfica da fração " + numerador + "/" + denominador, 50, 35);

</script>