Diseñando una Escuadra

<canvas width="800" height="800"></canvas>

<script type="text/javascript">
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

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


    //cordenadas primeraa< pinciel
    pincel.font = "bold 20px serif";
    pincel.fillStyle = "black";
    pincel.fillText("(50, 50)", 20, 50);

    pincel.font = "bold 20px serif";
    pincel.fillStyle = "black";
    pincel.fillText("(50, 400)", 20, 420);

    pincel.font = "bold 20px serif";
    pincel.fillStyle = "black";
    pincel.fillText("(400, 400)", 360, 420);

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

    //cordenadas segundo pinciel

    pincel.font = "bold 20px serif";
    pincel.fillStyle = "white";
    pincel.fillText("(100, 175)", 70, 165);

    pincel.font = "bold 20px serif";
    pincel.fillStyle = "white";
    pincel.fillText("(100, 350)", 70, 370);

    pincel.font = "bold 20px serif";
    pincel.fillStyle = "white";
    pincel.fillText("(275,350)", 235, 370);
</script>