Escuadra

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

<script>

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

    function fnc_draw(P_POS_X, P_POS_Y, P_WIDTH, P_HEIGTH)
    {
        pincel.fillRect(P_POS_X, P_POS_Y, P_WIDTH, P_HEIGTH);
    }

    function fnc_set_color(P_COLOR)
    {
        pincel.fillStyle = P_COLOR;
    }

    function fnc_line_to(P_POS_X, P_POS_Y)
    {
        pincel.lineTo(P_POS_X,  P_POS_Y)
    }

    fnc_set_color("black");
    pincel.beginPath();
    pincel.moveTo(50,  50);
    fnc_line_to(50,  400);
    fnc_line_to(400, 400);
    pincel.fill();

    fnc_set_color("white");
    pincel.beginPath();
    pincel.moveTo(100, 175);
    fnc_line_to(100,  350);
    fnc_line_to(275, 350);
    pincel.fill();

    fnc_set_color("red");
    fnc_draw(0,50,10,350)

    fnc_set_color("white");
    fnc_draw(10,50,10,350)

    fnc_set_color("blue");
    fnc_draw(20,50,10,350);        

</script>