Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Não consigo fazer mais que três linhas de quadrados.

Gente, não entendo porque meu código não faz mais que 3 linhas, será que vocês conseguem me ajudar?

<canvas width="600" heigth="400"></canvas>

<script>

    function desenhaQuadrado (x,y, cor) {

        var tela = document.querySelector ('canvas');
        var pincel = tela.getContext ('2d');

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, 50, 50);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, 50, 50);

    }

    for (x = 0; x < 600; x = x + 50){
        desenhaQuadrado(x, 0, 'green');
        desenhaQuadrado(x, 50, 'yellow');
        desenhaQuadrado(x, 100, 'cyan');
        desenhaQuadrado(x, 150, 'gray');
        desenhaQuadrado(x, 200, 'red');
    }


</script>
4 respostas

Oi Mayla, é por conta da propriedade height do canvas. No seu código, a mesma está escrita assim: heigth. Modifique-a e você verá que dará tudo certo :)

Assim:

<canvas width="600" height="400"></canvas>
solução!

Olá Mayla, tudo bem? Sua dúvida foi solucionada? Posso encerrar o tópico?

Eu só fui reparar no height depois de ficar insistindo e vendo outras dúvidas do fórum. Obrigada

Obrigado Mayla, para qualquer outro problema, não hesite em recorrer ao nosso fórum!