Olá pessoal, estava estudando uma alternativa para montar um bloco horizontal com 14 blocos quadrados 50x50 lado a lado. Ao meu ver, esse código abaixo funcionaria, mas quando rodo, ele gera só um quadrado, como se o laço do 'for' estivesse sendo quebrado. Onde está o erro?
<meta = charset='UTF-8'>
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var nQuadrados = 14
var incremento = 50
for(var contador = 1; contador <= nQuadrados; contador++) {
function desenhaQuadrado (x0, y0, h, l, colour) {
pincel.fillStyle = colour;
pincel.fillRect(x0 + incremento, y0, h, l);
pincel.strokeStyle = colour;
pincel.strokeRect(x0 + incremento, y0, h, l);
incremento = incremento + 50
}
}
desenhaQuadrado(0, 0, 50, 50, 'red');
</script>