Odeio frações, mas vamos tentar fazer algo interativo!

Tentei fazer o melhor possível, mas infelizmente ele não está pintando os meus numeradores. Se os meus queridos mestres, tutores e professores poderem apontar onde está o erro do meu programa, ficaria agradecido.

<meta charset="utf8">
<b><big>REPRESENTANDO FRAÇÕES</big></b><br>
As frações, normalmente possuem um denominador e um numerador.<br><br>
<b>O numerador</b> representa a parte que será dividida.<br>
<b>O denominador</b> contém o número que dividirá a parte.<br><br>

<b><i>Agora vamos lá:</i></b><br>
<i>O primeiro número é o numerador <input type="text" id="numerador" size="5"></input> e o segundo número é o denominador <input type="text" id="denominador" size="5"></input>.</i><button>MOSTRAR</button><br>

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

<script>
    function mostra(frase) {
        document.write(frase);
        document.write("<br>");
    }
    var numerador = document.querySelector("#numerador");
    var denominador = document.querySelector("#denominador");

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var x = 50;
    var y = 90;

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0, 0, 600, 400);

    function desenhaQuadrado(x, cor) {
        console.log(cor)
        pincel.fillStyle = cor;
        pincel.fillRect(x, 50,50,50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, 50, 50,50);
    }

    function desenhaTexto(texto, x, y){
        pincel.font = '20px Georgia';
        pincel.fillStyle = "white";
        pincel.fillText(texto, x, y);
    }

    function resultado() {
        for ( var deslocamento = 0; deslocamento < denominador.value; deslocamento++) {
            for (var deslocamenton = 0; deslocamenton < numerador.value; deslocamenton++) {
                if(deslocamento == numerador.value) {
                    desenhaQuadrado(x,"red");
                }
            }
        desenhaQuadrado(x, "pink"); 
        x += 50
        }
        desenhaTexto(numerador.value, 290,130 ); 
        desenhaTexto("__", 283,139);
        desenhaTexto(denominador.value, 290,160 );
    }

    desenhaTexto("A FRAÇÃO É :", 225,30);

    var button = document.querySelector("button");
        button.onclick = resultado;

</script>