Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

O que não estou percebendo de errado?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Frações

por Márcio Gurgel Pinto Dias
| 67.6k xp | 17 posts
Programador Multimídia

Todos os quadradinhos correspondem às expectativas exceto o branco. 

<canvas width="700" height="500">

</canvas>
<script>


    //desenhando o quadrado
    function desenhaQuadrado(x,y,tamanho,cor) {
            //instrumentos tela e pincel
        var tela = document.querySelector('canvas');

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

        //pintando a tela
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho,tamanho);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, tamanho,tamanho);
    }

    desenhaQuadrado(50,50,100,'green');
    desenhaQuadrado(100,50,100,'pink');
    desenhaQuadrado(150,50,100,'red');
    desenhaQuadrado(200,50,100,'dimgray');
    desenhaQuadrado(250,50,100,'white');
</script>
1 resposta
solução!
por Giovanna Moeller
| 624.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi Marcio, tudo bem?

Então, o que acontece é o seguinte: você está dando um intervalo no eixo X de 50px (veja: 50, 100, 150, 200, 250), mas o tamanho que você está colocando é 100px para cada retângulo. Ou seja, ele está forçando os elementos a terem uma distância de 50px somente, e não seu valor total de 100px. Mas como o último objeto não tem mais essa distância necessária, ele consegue ter seu valor total de 100px.

Para arrumar isso, você pode aumentar a distância entre os elementos, ou diminuir o retângulo para ter 50px.

Aumentando a distância x entre os elementos:

desenhaQuadrado(50,50,100,'green');
desenhaQuadrado(150,50,100,'pink');
desenhaQuadrado(250,50,100,'red');
desenhaQuadrado(350,50,100,'dimgray');
desenhaQuadrado(450,50,100,'white');

Diminuindo o tamanho do objeto para coincidir com o espaçamento em X:

desenhaQuadrado(50,50,50,'green');
desenhaQuadrado(100,50,50,'pink');
desenhaQuadrado(150,50,50,'red');
desenhaQuadrado(200,50,50,'dimgray');
desenhaQuadrado(250,50,50,'white');

Espero ter ajudado!