<meta charset="utf-8">
<canvas id="canvas" width="700" height="500"></canvas>
<script>
    var tela = document.getElementById("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();
        pincel.fillStyle = "white";
        pincel.beginPath();
        pincel.moveTo(2 * xa, (xa / 2) * 8);
        pincel.lineTo(2 * xa, (yc / 8) * 7);
        pincel.lineTo((xc / 16) * 11, (yc / 8) * 7);
        pincel.fill();
    }
    desenhaEsquadro(50, 50, 400, 400, "black");
</script>