Solução da função desenhaEsquadro

Olá Fernando, tudo certo?

Muito legal a sua solução, obrigado por compartilhar com a gente aqui no fórum! A solução que você encontrou é muito interessante, e funciona perfeitamente! Parabéns pela dedicação por, mesmo com dificuldades, se desafiar e encontrar uma solução!

Dentro da programação, existem diversas maneiras de chegar em um mesmo resultado, a partir de algoritmos diferentes!

Novamente, parabéns pela sua dedicação e resiliência em encontrar essa solução! Praticar é muito importante para aumentar ainda mais o conhecimento! E lembre-se que você pode sempre contar com o fórum para tirar suas dúvidas e compartilhar sua evolução, adoramos acompanhar sua trajetória!

Um grande abraço e bons estudos!

Obrigado!

A minha única duvida mesmo, é sobre a formula usada para encontrar a terceira linha do esquadro...

Fernando estava com a mesma dúvida que você e resolvi a equação na calculadora e percebi que eles criaram essa expressão como um recurso para que somente com o valor que entramos do primeiro triângulo o segundo já fosse criado na mesma função sem precisar entrar com novos valores quando chamamos a função desenhaEsquadro(50,50,400,400,'black') , não gostei da solução pois seria muito mais simples somente chamar a função novamente com os parametros para o segundo triângulo branco, resolvi dessa forma no segundo código, dá uma olhada.

<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.beginPath();
    pincel.moveTo(xa,ya);
    pincel.lineTo(xa,yc);
    pincel.lineTo(xc,yc);
    pincel.fill();
    pincel.fillStyle = 'white'
    pincel.beginPath();
    pincel.moveTo((6 * xa + xc) / 7, (9 * ya + 5 * yc) / 14);
    //(100,175)
    pincel.lineTo((6 * xa + xc) / 7, (ya + 6 * yc) / 7);
    //(100,350)
    pincel.lineTo((5 * xa + 9 * xc) / 14, (ya + 6 * yc) / 7);
    //(275,350)
    pincel.fill();
}
    desenhaEsquadro(50,50,400,400,'black');



</script>

Segundo código com minha solução:

<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.beginPath();
    pincel.moveTo(xa,ya);
    pincel.lineTo(xa,yc);
    pincel.lineTo(xc,yc);
    pincel.fillStyle= cor;
    pincel.fill();
}
    desenhaEsquadro(50,50,400,400,'black');
    desenhaEsquadro(100,175,275,350,'white');



</script>

Sim, eu cheguei na mesma solução que você. Mas, dessa maneira seria preciso alterar os valores das duas funções para mudar o tamanho do esquadro. Da maneira proposta pelo instrutor, é possível mudar o tamanho do esquadro, alterando apenas os valores da primeira função, ou seja, passando apenas os pontos iniciais do esquadro preto o esquadro branco se ajusta.