Resolução diferente: Esquadro#2 | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Boa tarde, pessoal! Vou compartilhar meu código, que ficou um pouquinho diferente do professor, mas funcionou! :)

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

<script>

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

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

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

    //xa == xb
    //yc == yb

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

</script>