meu triangulo simplismente nao aparece

<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(400, 400);
    pincel.fill();


</script>

A única diferença que plotei no seu código é que você delimitou diferente a área a ser coberta por vermelho:

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

No vídeo para ficar no tamanho correto é:

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

De resto não vi nada errado, se conseguir consertar avisa aqui que fiquei curioso.

bom dia !

o erro está na declaração da altura , erro de síntaxe, você digitou 'heigth' .... o certo é " height '' .... altere, salve e pode botar pra rodar que irá funcionar!!!