Minha resolução

Aqui segue o código, ainda que ele tenha o problema de que se eu mudar o esquadro de lugar o tamanho do esquadro acaba por mudar também.

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

<script>

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

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

         pincel.fillStyle = 'lightblue';
         pincel.fillRect(0,0,600,400);

         pincel.fillStyle = cor;
         pincel.beginPath();

         pincel.moveTo(xa, ya);
         pincel.lineTo(xa, yc);
         pincel.lineTo(xc, yc);
         pincel.fill();

         pincel.fillStyle = 'white';
         pincel.beginPath();

         pincel.moveTo((xa + 50), (ya + 125 ));
         pincel.lineTo((xa + 50), (yc - 50));
         pincel.lineTo((xc - 125), (yc - 50));
         pincel.fill();

    }

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