fiz um pouco diferente

em tamnhos menores fica um pouco bugado mas acho que ta valendo

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

<script>

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

    function desenhaEsquadro(xa, ya, xc, yc, cor) {
    //a implementacao fica com vc :)
    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+20, ya+50);
    pincel.lineTo(xa+20, yc-20);
    pincel.lineTo(xc-50, yc-20);
    pincel.fill();


}

    desenhaEsquadro(50, 50, 200, 200, 'black');
    desenhaEsquadro(250, 200, 450, 400, 'green');
</script>