Esquadro #2 dificuldade no entendimento do melhoramento da função desenhaEsquadro | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

O aperfeiçoamento nessa função na minha opinião não ficou simples, na realidade não consegui resolver estou com dificuldade em entender como esses cálculos funcionam na construção do esquadro nessa determina parte do código:

 pincel.fillStyle = 'white'
        pincel.beginPath();
        pincel.moveTo((6*xa + xc)/7, (9*ya + 5*yc)/14);
        pincel.lineTo((6*xa + xc)/7, (ya + 6*yc)/7);
        pincel.lineTo((5*xa + 9*xc)/14, (ya + 6*yc)/7);
        pincel.fill();

A minha figura também ficou cortada, colei o código conforme a resolução do instrutor.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

No editor de texto Sublime ficou dessa forma, onde está o erro?

<canvas widht="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();

        pincel.fillStyle = 'white'
        pincel.beginPath();
        pincel.moveTo((6*xa + xc)/7, (9*ya + 5*yc)/14);
        pincel.lineTo((6*xa + xc)/7, (ya + 6*yc)/7);
        pincel.lineTo((5*xa + 9*xc)/14, (ya + 6*yc)/7);
        pincel.fill();

}

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

</script>

Oi, dev! Tudo certo por aí?

Primeiro, agradeço a paciência em aguardar uma resposta!

Os números e as operações presentes nos cálculos foram escolhidos para que, ao substituir os valores das coordenadas xa, ya, xc e yc, o triângulo retângulo branco tivesse a metade das medidas do triângulo preto. Independente dos valores passados como parâmetro, teremos como resultado uma relação de proporcionalidade entre as figuras.

Com relação a sua segunda dúvida, podemos pensar na seguinte ideia:

Na primeira linha do seu código, onde há a tag <canvas></canvas>, o atributo que determina a largura (width) foi digitado com duas de suas letras invertidas:

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

Sendo assim, para que o atributo funcione, precisamos inverter as letras “h” e “t”. Abaixo há o resultado desta modificação:

<canvas width="600" height="400"></canvas> // o atributo width="" foi modificado

Mas afinal, por que o esquadro não apareceu por completo?

Isso ocorreu, pois não houve o reconhecimento do atributo width=””, já que ele havia sido escrito com as letras finais invertidas. A Canvas API possui valores padrão de largura e altura para a tag <canvas> , que são 300px e 150px, respectivamente. Enquanto a altura foi alterada pelo seu código (cujo valor atribuído corresponde a 400px), a largura da tela permaneceu aquela inicialmente estabelecida pela própria API, de 300px — o comprimento horizontal do seu esquadro é maior que 300px, por isso ele não apareceu!

Ademais, gostaria de avisar que, no trecho de código que você enviou, há uma imagem junto. Devido a isso, apenas fiz uma pequena alteração para removê-la, dado que é a mesma figura que está logo acima. Tudo bem?

Caso tenha dúvidas acerca da minha explicação ou ao decorrer dos seus estudos, lembre-se que você pode contar com o fórum. Fico à disposição para te ajudar no que for preciso!

Abraços e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.