Fala galera,

um explicação simples para ajudar quem tiver alguma dúvida do motivo de cada função chama para fazer o triângulo.

Espero ter ajudado. Sucesso na sua Jornada!!

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

<script>

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

    pincel.fillStyle = "blue"; // indiquei que queria usar o pincel na cor azul
    pincel.fillRect(0,0,450,450); // indiquei o quadro que eu queria que fosse feito para ser um background 


    pincel.fillStyle = "black"; // indiquei que queria usar o pincel na cor preta

    //fiz o primeiro triângulo - o preto que está atrás, pois o branco eu só faço a sobreposição dele por cima do preto

    pincel.beginPath(); // para desenha o triângulo eu preciso iniciar(behgin) as linhas (Path) 
    pincel.moveTo(50,50); //aqui eu indiquei onde eu tinha que posicionar o pincel para depois eu fazer a primeira linha
    pincel.lineTo(50,400); // aqui eu indiquei que eu queria fazer a linha do ponto inicial até o ponto indicado nas coordenadas
    pincel.lineTo(400,400); // aqui eu indiquei que eu queria fazer a linha do último ponto até o ponto indicado nas coordenadas
    pincel.fill(); // aqui eu pedi o preenchimento

    //vejam que eu não fechei o triângulo, eu não precisei fazer a linha que ligaria o último ponto ao o ponto inicial. Quando eu pedi o prenchimento eu entendo que o sistema faz automaticamnete a última linha ligando o último ponto ao ponto inical e preenche.


    pincel.fillStyle = "white"; // indiquei que queria usar o pincel na cor branca

    //fiz o segundo triângulo - o branco que está na frente, fazendo ele depois do preto, ele irá sobrepor o trângulo preto
    //Segue a mesma lógica do primeira triângulo

    pincel.beginPath();  
    pincel.moveTo(90,150); 
    pincel.lineTo(90,360);
    pincel.lineTo(300,360);
    pincel.fill();

</script>