JSFiddle - React, Tailwind, and code Playground

HTML

<!-- esquadro.html -->
<h2>Esquadro</h2>
<canvas width="600" height="400"></canvas>

<script>


</script>

JavaScript

var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
		tela.backgroundColor = "green";
    function desenhaEsquadro(xa, ya, xc, yc, cor) {
        pincel.strokeStyle = cor;
        pincel.lineWidth="3";
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xa, yc);
        pincel.lineTo(xc, yc);
        pincel.stroke();
    }

    desenhaEsquadro(50, 50, 400, 400, "black");
    desenhaEsquadro(100, 175, 275, 350, "white");