Cheguei no resultado de outra forma:

Por favor, alguém poderia avaliar se meu raciocínio foi lógico.

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

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

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

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

    }

    function desenhaEsquadro(hipotenusa, cor){

        xa=50
        ya=50

        desenhaTriangulo(xa,ya,hipotenusa,hipotenusa,cor);
        desenhaTriangulo(xa+hipotenusa/8,ya+(hipotenusa/16)*5,hipotenusa-(hipotenusa/16)*5,hipotenusa-hipotenusa/8,"white");

    }     


desenhaEsquadro(300,"black");


</script>

`