Diseñando una Escuadra con texto en cada esquina

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
   // escuadra negro
    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.fill(); 
    // escuadra blanca
    pincel.fillStyle = "white";
    pincel.beginPath();
    pincel.moveTo(100, 175);
    pincel.lineTo(100, 350);
    pincel.lineTo(275, 350);
    pincel.fill(); 

// Texto en la esquina superior izquierda
    pincel.fillStyle='black';
    pincel.font = "10px Arial";
    pincel.fillText("ESQUINA SUPERIOR IZQUIERDA", 10, 30);

    // Texto en la esquina superior derecha
    pincel.fillStyle='black';
    pincel.textAlign = "right";
    pincel.fillText("ESQUINA SUPERIOR DERECHA", 590, 30);

    // Texto en la esquina inferior izquierda
    pincel.fillStyle='black';
    pincel.font = "10px Arial";
    pincel.fillText("ESQUINA INFERIOR IZQUIERDA", 10, 390);

    // Texto en la esquina inferior derecha
    pincel.fillStyle='black';
    pincel.textAlign = "right";
    pincel.fillText("ESQUINA INFERIOR DERECHA", 590, 390);



</script>