<body>
<canvas width="600" height="
400"></canvas>
<script>
function desenhaQuadrados(qtdQuadrado, cor) {
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var qtdDeQuadrados = qtdQuadrado;
//posições x e y
var x = 0;
var y = 0;
// De acordo com a quantidade escolhida a repitação irá gerar um quadrado.
for(var contador = 0; contador < qtdDeQuadrados; contador++) {
pincel.fillStyle = cor;
pincel.fillRect(x, y, 50, 50);
pincel.fillStrok = "";
pincel.strokeRect(x, y, 50, 50);
//Irá alternar a posição 'x' somando 50 a cada repitação.
x = x + 50;
}
}
desenhaQuadrados(4, 'blue');
</script>
</body>
Eu fiz esse código pra relsover a questão de ter que chamar a função várias vezes pra criar um quadrado. So não achei uma maneira que fizesse alternar a cor caso precise, fora isso ta funcionando bem. Se você tiver alguma ideia de melhorar esse código, deixei nos comentários. Vlw!!
