Cálculo do esquadro branco ?

Tô quebrando a cabeça também tentando entender, uma vez que sem esses cálculos malucos não muda nada.

Em um fórum anterior, descobri que aqueles calculos é para o triangulo branco ser feito automaticamente, sem precisar ficar digitando numero. Desse modo, independente da alteração do triangulo maior, o menor sempre irá acompanhá-lo

Confesso que fiquei um pouco frustrado em não entender aqueles cálculos para montar o triangulo branco. Senti falta de uma explicação ou pelo menos algum link para um vídeo que o professor possa explicar mais detalhadamente o conceito. Mesmo sabendo que não é o foco do curso ensinar matemática.

Não sei nem por onde começar a entender esse segundo cálculo.

Confesso que fiquei um bom tempo tentando entender aqueles cálculo, compreendi que é para que o triângulo branco sempre esteja circunscrito no preto mas como encontrar aquela fórmula não faço ideia.

Refiz de acordo com meu melhor entendimento e resultou o escrito abaixo, eu acho mais enxuto e mais fácil de enxergar e o resultado foi o mesmo, se houver alguma discrepância me avisem.

```<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();
    pincel.fillStyle = 'white'
    pincel.beginPath();
    pincel.moveTo(xa + 50, ya + 125);
    pincel.lineTo(xa + 50, yc - 50);
    pincel.lineTo(xc - 125, yc - 50);
    pincel.fill();
  }
  desenhaEsquadro(50, 50, 400, 400, 'black');
</script>

`

Minha resolução foi fazer uma função para criar um triângulo. E naturalmente para ter um esquadro igual o proposto, teria que usá-la 2x...

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');

achei muito confuso também, matematica nao é meu forte mas as postagens aqui me ajudaram um pouco

Eu tô sem entender esse calculo até agora.

Fiquei com a mesma dúvida aqui, ainda estou sem entender muito bem.