3
respostas

Demorei bastante tempo mas acho consegui

3 respostas

Diego, tudo bom? Posta o código para darmos uma olhada.

<meta charset="utf-8">

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

<script>

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

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



    function desenhaEsquadro(xa, ya, xc, yc, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xa, yc);
        pincel.lineTo(xc, yc);
        pincel.fill();

        var xa2 = xa + ((xc - xa)/7);
        var yc2 = yc - ((yc - ya)/7);
        var ya2 = yc2 - ((yc - ya)/2);
        var xc2 = xa2 + ((xc - xa)/2);

        pincel.fillStyle = "white"
        pincel.beginPath();
        pincel.moveTo(xa2, ya2);
        pincel.lineTo(xa2, yc2);
        pincel.lineTo(xc2, yc2);
        pincel.fill();
    }

    desenhaEsquadro(50, 50, 400, 400, "black");

</script>

Legal Diego, parabéns!