1
resposta

Por que meus quadrados estão escuros

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaQuadrado(x, y, cor) {

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

    var i = 0;


    while( i < 150) {

        desenhaQuadrado(i, 0, 'green');
        i++
    }  

    desenhaQuadrado(150, 0, 'white'); 



</script>
1 resposta

Fala, Ryan! Tudo bem contigo?

O que ocorre é que os tamanhos dos quadrados não estão sendo desenhados dentro do whileao incrementa-los e por isso vemos somente um retângulo preto e outro branco.

    while( i < 150) {

        desenhaQuadrado(i, 0, 'green');
        i++
    }  

Para que possamos criar os quadrados basta acrescentarmos i = i + 50 ou i+=50

    while( i < 150) {

        desenhaQuadrado(i, 0, 'green');
        i = i + 50
    }  

Espero ter ajudado, Ryan!

Um abraço e bons estudos!