ficou diferente do instrutor:

Não compreendi a conta no código do instrutor para gerar o triangulo de dentro, então tentei criar um com a metade do tamanho do de fora e posicioná-lo mais ou menos no meio.

<meta charset="utf-8">
<canvas width="1200" height="800"></canvas>

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

    function desenhaEsquadro(xa,ya,xc,yc,cor) {

        pincel.fillStyle=cor;
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xa, yc);
        pincel.lineTo(xc, yc);
        pincel.fill();

        //criando as variáveis para o esquadro de dentro, com base no tamanho do esquadro maior...        

        var comprimento = xc - xa;
        var comprimento2 = comprimento/2;

        var altura = yc - ya;
        var altura2 = altura/2;
        var xb2 = (comprimento/7) + xa;
        var yb2 = yc - (altura/7);
        var ya2 = yb2 - altura2;
        var xc2 = xb2 + comprimento2


        //gerando o esquadro de dentro.


        pincel.fillStyle = 'white'
        pincel.beginPath();
        pincel.moveTo(xb2,yb2);
        pincel.lineTo(xb2, ya2) ;
        pincel.lineTo(xc2, yb2);
        pincel.fill();




    }

    desenhaEsquadro(50,50,400,400,"blue");




</script>