funciona ? quando carrego a pagina nao aparece os triangulos, no entanto separadamente pode se ver um triangulo grande e outro menor, onde esta o erro por favor?

Oi Fernando, tudo bem ?

O triângulo não aparece por um pequeno errinho. Está faltando o comando:

 pincel.beginPath();

Este comando é responsável posicionar/reposicionar o "pincel" do canvas em alguma posição da tela. Temos de usá-lo antes de passar alguma coordenada para o desenho.

Deixarei abaixo o código modificado:

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

    pincel.fillStyle = "black";// paint the big triangle in black
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50,400);// make the triangle
    pincel.lineTo(400,400);
    pincel.fill();

    pincel.fillStyle = "white";
    pincel.beginPath();
    pincel.moveTo(100,175);
    pincel.lineTo(100,350);// trace the iner triangle
    pincel.lineTo(275,350);
    pincel.lineTo(100,175);
    pincel.fill();// paint of white the iner triangle

</script>

Qualquer dúvida estou a disposição. Espero ter ajudado. Bons estudos!!!

eu fiz desta forma mas mudei a cor do triangulo interno, mas o resultado foi o mesmo, (eu acho^^). Na forma que eu fiz pode dar problemas em outros comandos de desenhos ???

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

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

    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.lineTo(50, 50);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(100, 175);
    pincel.lineTo(100, 350);
    pincel.lineTo(275, 350);
    pincel.lineTo(100, 175);
    pincel.fillStyle = 'red'
    pincel.fill();


</script>