Esquadro #2 - Uma outro jeito de solucionar este problema.

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    function desenhaEsquadro(xa,ya,xc,yc,cor){
        var tela=document.querySelector('canvas');//chamando canvas
        var pincel=tela.getContext('2d');//pincel recebe o controle dos graficos em 2d

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


        var delta1=(xc-xa)/6;  //lado do triangulo*(1/6=50)
        var delta2=(xc-xa)*125/350;  //lado do triangulo*(125/350)=125

        pincel.fillStyle='white';   // triangulo interno
        pincel.beginPath();
        pincel.moveTo(xa+delta1 ,ya+delta2);
        pincel.lineTo(xa+delta1,yc-delta1);
        pincel.lineTo(xc-delta2,yc-delta1);
        pincel.fill();

    }                                                                                                                             

    desenhaEsquadro(50,50,400,400,'black');

</script>