Não deu certo!

Olá Tainã! Seu código não apareceu. Insira ele entre os sinais ``` e ``` clicando no botão {} inserir código logo acima de onde você escreve as mensagens.

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

    <script>

    var tela = document.querySelector("#tela");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = 'green'
    pincel.fillRect(0,0,600,400);
    pincel.fill()

    pincel.fillStyle = "yellow"
    pincel.beginPath()
    pincel.moveTo(300,50)
    pincel.lineTo(50,200)
    pincel.lineTo(550,200)
    pincel.fill()
    pincel.beginPath()
    pincel.moveTo(300,350)
    pincel.lineTo(50,200)
    pincel.lineTo(550,200)

    </script>

É isso aí Tainã, quase lá!! Faltou somente uma linha, dá uma olhada abaixo:

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

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

    pincel.fillStyle = 'green'
    pincel.fillRect(0, 0, 600, 400);
    pincel.fill();

    pincel.fillStyle = "yellow"
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(300,350); // faltou esta coordenada!!
    pincel.lineTo(550, 200);
    pincel.fill();

    // este trecho abaixo não é necessário!!
    // pincel.beginPath()
    // pincel.moveTo(300, 350)
    // pincel.lineTo(50, 200)
    // pincel.lineTo(550, 200)
</script>

Treine bastante a localização das coordenadas que aí não tem erro!

Outra coisa. Não deixe de colocar ponto e vírgula (;) no final de cada instrução. Apesar deste código funcionar sem eles é uma boa prática usá-los para evitar problemas no futuro quando os códigos ficarem mais complexos.

Abraços e sucesso nos estudos!

Valeu pelo feedback ! Muito bom esse jeito ! Mas gostaria de saber apenas por conhecimento se é possível fazer de uma outra forma:

Começando com um ponto em 300,50 e formando um triangulo e depois criando um novo triangulo começando com um ponto 300,350 e criando um novo triangulo .

Tem sim. Em programação existem diversas maneiras para se chegar ao mesmo resultado. Acredito que essa era a sua intenção no código anterior:

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

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

    pincel.fillStyle = 'green'
    pincel.fillRect(0, 0, 600, 400);
    pincel.fill();

    // triângulo de cima
    pincel.fillStyle = "yellow"
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    // triângulo de baixo
    pincel.fillStyle = "yellow"
    pincel.beginPath();
    pincel.moveTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();
</script>

Complementando...

Você pode começar de qualquer ponto, desde que ligue as coordenadas na sequência correta. E também poderia eliminar uma linha que coloquei que funcionaria do mesmo jeito, pois neste caso o pincel continua "yellow" ao desenhar o triângulo de baixo, mas eu deixaria, pois fica mais legível o código:

// triângulo de baixo
    pincel.fillStyle = "yellow" // poderia eliminar esta linha!!
    pincel.beginPath();
    pincel.moveTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

Abraços!

Oi Tainã! O André chegou mais rápido do que eu aqui. Gostei muito das explicações dele, você gostou? Se sim, marque a resposta dele como solução para ele ganhar pontinhos aqui na Alura :)