Canvas - Triângulo.

Edna, por favor, você poderia enviar o código?

Coloque o cógigo para podermos ajudá-la... OBS: Sempre entre as ``` antes e depois do código.

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

<script>

    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

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

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

    c.fillStyle = "gray";
    c.beginPath();
    c.moveTo(300,200);
    c.lineTo(200,400);
    c.lineTo(400,400);
    c.fill();
</script>

Olá, no seu código depois de criar o triangulo além de definir a cor e tamanho você precisa desenhar na tela, ele deve ficar dessa maneira:

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

<script>

    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

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

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

//Desenho de um triangulo.
    c.fillStyle = "black"; // define a cor.
    c.beginPath();
    c.moveTo(300, 200); // move para  tal lugar.
    c.lineTo(200, 400); // desenha uma linha.
    c.lineTo(400, 400);
    c.fill(); // Desenha de fato a imagem.

</script>

Oi Edna,

na realidade, seu código está correto, mas você não consegue vê-lo por um detalhezinho: no html do canvas, a palavra "height" tá com uma inversão de letra.

Basta trocar heigth por height e tudo deve aparecer aí. :-)

Boa tarde Edna!

Compare com o seu código, este está OK:

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

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

//Desenha a parte verde da bandeira
c.fillStyle = "green";
c.fillRect(0, 0, 200, 400);
c.fill();

//Desenha a parte vermelha da bandeira
c.fillStyle = "red";
c.fillRect(400, 0, 200, 400);
c.fill();

//Desenha o triângulo cinza da bandeira
c.fillStyle = "gray";
c.beginPath();
c.moveTo(300,200);
c.lineTo(200,400);
c.lineTo(400,400);
c.fill();

//Desenha o círculo azul da bandeira
c.fillStyle = "blue";
c.beginPath();
c.arc(300,200,50,0,2 * 3.14);
c.fill();

</script>

Pessoal, muito obrigada por td!!! De fato a palavra em inglês estava errada e eu tbm não havia mando printar, sem contar que ao invés de ter colocado um ponto na constante PI, eu coloquei uma vírgula, agora sim... due tudo certo!