Cheguei em uma resolução, mas acredito que não seja a ideal, pois chamo a função duas vezes e se quiser alterar o esquadro de lugar ou tamanho, teria que mudar diversos números. Entendi que a o jeito do professor fica mais genérico e facilita uma possível alterção, mas é simplesmente inviável que saibamos essas fórmulas que ele inseriu (aproveito para deixar um crítica de que essa resolução ficou horrível pela falta de explicação de onde vieram essas contas). Alguém sabe um jeito de deixar meu código mais genérico, mas sem incluir essas fórmulas "esquisitas"? Segue o código:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
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();
}
desenhaEsquadro(50, 50, 400, 400, "black");
desenhaEsquadro(100, 175, 275, 350, "white");
</script>
