<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>
Boa Raphael Alves Borges de Jesus,
Gostei da solução que você propôs, afinal o resultado é o mesmo porém o código me parece muito mais robusto.
Para que mais pessoas consigam visualizar a sua solução proposta é recomendável com que você venha estar marcando este tópico como solucionado, assim pode estar ajudando ainda mais pessoas :)
Obrigado!!
Fiz da mesma forma que você. Acredito que a ideia do professor, foi chamar a função apenas uma vez, já criando os 2 esquadros.
Porém não consegui pegar a lógica das operações matemáticas com as coordenadas. Acredito que chamando a função duas vezes, fica mais organizado / legível, até mesmo porque a função fica menor.