2 escuadras

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

<script>

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


    pincel.fillStyle = "gray"
    pincel.fillRect(0,0,600,400);

    pincel.fillStyle='black';
    pincel.beginPath();
        pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.fill();

    pincel.fillStyle='white';
    pincel.beginPath();
    pincel.moveTo(100, 175);
    pincel.lineTo(100, 350);
    pincel.lineTo(275, 350);
    pincel.fill();

    pincel.fillStyle="white"
    pincel.beginPath();
    pincel.moveTo(550,50);
    pincel.lineTo(150,50);
    pincel.lineTo(550,400);
    pincel.fill();

    pincel.fillStyle="black"
    pincel.beginPath();
    pincel.moveTo(520,75);
    pincel.lineTo(225,75);
    pincel.lineTo(525,325);
    pincel.fill();


</script>