Fiz este exercicio utulizando a estrutura while para praticar mais um pouco.

<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.strokeStyle="black";
    pincel.strokeRect(x, y, tamanho, tamanho);


}
function desenhaTexto(texto , x, y){ 
pincel.font= "20px Georgia";
pincel.fillStyle = "black";
pincel.fillText(texto, x, y);
}
desenhaTexto("Qual é a fração?", 50, 30)

var x = 0
while(x <= 100){
 desenhaQuadrado(x, 100, 50, "Green");
 x = x + 50
}

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

</script>