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

É estranho mas meu canvas fica apenas com 600 , 150

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade A vida não é só feita de retângulos!

por Eliezer Araújo
| 101.8k xp | 162 posts

Faço shit+crtl+C e percebo lá que o canvas fica 600 150 ??? Why?? O triângulo nem aparece. Onde estou a errar?

<body>
    <canvas width="600" heidth="400"></canvas>
    <script>
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0, 0, 600, 400);

        pincel.fillStyle = "green";
        pincel.fillRect(0, 0, 200, 400);

        pincel.fillStyle = "red";
        pincel.fillRect(400, 0, 200, 400);

        pincel.fillStyle = "yellow";
        pincel.beginPath();
        pincel.moveTo(300, 200);
        pincel.lineTo(200, 400);
        pincel.lineTo(200, 400);
        pincel.fill();
    </script>
</body>
3 respostas
por Teresa Cristina Barboza Gama
| 26.6k xp | 3 posts

Oi Eliezer,

O problema é que você escreveu a altura do canvas errado.

Altere para:

por Teresa Cristina Barboza Gama
| 26.6k xp | 3 posts

Oi Eliezer, 

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

    <script>
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0, 0, 600, 400);

        pincel.fillStyle = "green";
        pincel.fillRect(0, 0, 200, 400);

        pincel.fillStyle = "red";
        pincel.fillRect(400, 0, 200, 400);

        pincel.fillStyle = "yellow";
        pincel.beginPath();
        pincel.moveTo(300, 200);
        pincel.lineTo(200, 400);
        pincel.lineTo(200, 400);
        pincel.fill();
    </script>
</body

Altere para:

solução!
por Eliezer Araújo
| 101.8k xp | 162 posts

Parece que ao fim tinha de retirar a tag