Olá, Segue minha versão comentada:
<canvas width="600" height="400"></canvas> <!--Definição do tamanho do Canvas-->
<script>
//função para desenhar os quadrados delineados e preenchidos
function desenhaQuadrado (x, y, cor){
//Script da tela e do pincel//
var tela=document.querySelector('canvas');
var pincel=tela.getContext('2d');
pincel.fillStyle=cor; // cor de preenchimento do quadrado
pincel.fillRect(x, y, 50, 50); //cordenadas de onde será desenhado o 1º quadrado
pincel.fillStroke = 'black'; // cor da borda - separação visual dos quadrados
pincel.strokeRect(x, y, 50, 50); // posição da borda - mesma do quadrado
}
/*
var x=0; // incializa a função no 0
while (x < 600){ // condição da execução do loop
desenhaQuadrado (x, 0, 'green'); // o que deverá ser realizado na 1ª linha
desenhaQuadrado (x, 50, 'red'); // o que deverá ser realizado na 2ª linha
desenhaQuadrado (x, 100, 'blue'); //o que deverá ser realizado na 3ª linha
x = x + 50; // incremento do loop
}
*/
for (var x=0; x < 600;x = x + 50 ){
desenhaQuadrado (x, 0, 'green'); // o que deverá ser realizado na 1ª linha
}
</script>
