Diseñando una Escuadra

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

<script>
    let pantalla = document.querySelector("canvas"); //conecta con la pizarra que está en HTML
    let pincel = pantalla.getContext("2d"); //traer todo el contenido que está en la pizarra de viene de HTML

    pincel.fillStyle = "#ffffff"; //pintamos el fondo de la pizarra
    pincel.fillRect(0, 0, 600, 450); //dibujar un rectangulo. Iniciamos desde la parte superior izquierda y hacemos el rectangulo del mismo tamaño de la pizarra

    pincel.fillStyle = "#000000";
    pincel.beginPath(); //indica que se va a iniciar un dibujo
    pincel.moveTo(50,50); //posicionar e pincel donde se empezará a dibujar
    pincel.lineTo(50,400);
    pincel.lineTo(400,400);
    pincel.fill(); //cierra el proceso de pintado y aplica todos los mobimientos anteriores.

    pincel.fillStyle = "#ffffff";
    pincel.beginPath(); //indica que se va a iniciar un dibujo
    pincel.moveTo(100,175); //posicionar e pincel donde se empezará a dibujar
    pincel.lineTo(100,350);
    pincel.lineTo(275,350);
    pincel.fill(); //cierra el proceso de pintado y aplica todos los mobimientos anteriores.

</script>