Usei dois "for" para preencher todo o espaço. Segue resolução abaixo:
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>