Meu código ficou diferente. O que há de errado?

Meu código ficou um pouco diferente, apesar de funcionar... o que há de errado? Eu realmente achei muitos detalhes na resolução do professor que eu não havia pensado.

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

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

    pincel.font = "20px georgia";
    pincel.fillStyle = "black";
    pincel.fillText("Qual é a fração?", 50, 20);
    function desenhaQuadrado(x, y, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50)
        pincel.fillStroke = "black";
        pincel.strokeRect(x, y, 50, 50);
        pincel.strokeRect(x + 50, y, 50, 50); // aqui comei mais 50, pra ele pular uma quadrado e ficar so a borda. 
    }

    for (x = 50; x < 200; x = x + 50) {
        desenhaQuadrado(x, 30, "blue");
    }



</script>