Usei um loop para fazer os quadrados verde no modo "while" e deu super certo! Mas quando tento substituir o loop do modo "while" para o "for", apenas para treino, o código não roda nessa parte. Alguém poderia me dizer o que estou fazendo de errado? Agradeço desde já :)

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

<script>

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

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

    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho);
    pincel.fillStroke = "black";
    pincel.strokeRect(x, y, tamanho, tamanho);
    pincel.fill();

}

function desenhaTexto(texto, x, y) {

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

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

/*
x = 0;
while(x <= 100) {
    desenhaQuadrado(x, 50, 50, "green");
    x = x + 50;
} 
*/

for(x = 0; x <=100; x = x + 50) {

    desenhoQuadrado(x, 50, 50, "green");
}

desenhaQuadrado(150, 50, 50, "white");



    </script>