Usei dois "for" para preencher todo o espaço. Segue resolução abaixo:
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Usei dois "for" para preencher todo o espaço. Segue resolução abaixo:
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script> //Evitando repetição de códigos:
function desenhaQuadrados(inicialX=0, inicialY=0, finalX=0, finalY=0){
var tela = document.querySelector("canvas");
var pincel = tela. getContext("2d");
pincel.fillStyle = 'pink';
pincel.fillRect(inicialX, inicialY, finalX, finalY);
pincel.fillStroke = 'black';
pincel.strokeRect(inicialX, inicialY, finalX, finalY);
}
var tamanhoTela = 600;
for(var contadorX = 0; contadorX < tamanhoTela; contadorX += 100) {
desenhaQuadrados(contadorX, 0, 200, 100);
for (var contadorY = 0; contadorY < tamanhoTela; contadorY += 100) {
desenhaQuadrados(contadorX, contadorY, 200, 100);
}
}
</script>