Tentei fazer o loop de y também e funcionou. A tela 600x400 ficou toda cheia de quadradinhos (O código completo está no final do meu comentário). Porém, acho que ela não deveria ficar toda cheia de quadradinhos, como um mosaico, porque veja só:
for(x = 0; x < 600; x = x + 50){
for(y = 0; y < 400; y = y + 50) {
desenhaQuadrado(x, y, 'pink', 'green');
}
}O loop começa com os quadradinhos com X e Y assim: (0, 0).
Na primeira etapa do resultado do loop o X e Y ficará assim: ( 50, 50).
No segundo resultado o X e Y ficará assim: (100, 100).
E assim por diante até preencher toda a tela.
No entanto, se for seguir esses resultados, os quadradinhos ficariam ordenados como uma escada que desce na diagonal da tela, começando pelo canto superior esquerdo e terminando no canto inferior direito.
Só que o que aconteceu realmente foi a tela ficar cheia de quadradinhos, completamente. Alguém poderia me ajudar nessa dúvida??
O código completo:
<canvas width = "600" height = "400"></canvas>
<script>
function desenhaQuadrado(x, y, cor, corBorda) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
//quadrado
pincel.fillStyle = cor;
pincel.fillRect(x, y, 50, 50); //(X, Y, width, height)
//borda
pincel.strokeStyle = corBorda;
pincel.fillStroke = 'black';
pincel.strokeRect(x, y, 50, 50);
}
for(x = 0; x < 600; x = x + 50){
for(y = 0; y < 400; y = y + 50) {
desenhaQuadrado(x, y, 'pink', 'green');
}
}
</script>
