as multiplicações e divisõs são uma forma de fazero desenhaTriangulo em uma unica chamada de função (eu nomearia ela de desenhaEsquadro pois ela ja desenha os dois triangulos de uma so vez.
Uma abordagem que chama a desenhaTriangulo duas vezes foi a que eu utilizei na minha resolução:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function desenhaTriangulo(x1, y1, y2, x3, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.moveTo(x1, y1);
pincel.lineTo(x1, y2);
pincel.lineTo(x3, y2);
pincel.fill();
}
desenhaTriangulo(50, 50, 400, 400, "black");
desenhaTriangulo(100, 175, 350, 275, "white");
</script>
Em exatas não há um jeito certo ou errado em se fazer determinado exercício. Em exatas há um resultado esperado, a forma que voce utilizar para o resolver, se resolver, ja ta valendo (ao meu ver). Em programação tende-se a simplificar os codigos e torna-los mais legiveis (tanto pra maquina quanto para o programador) talvez a confusão gerada foi na hora de nomear a função como descrevi acima. Porisso eu segui por essa abordagem (que é matematicamente mais facil também).
Mas se voce olhar como foi resolvido. Ao fazer as contas, voce chegará nos resultados das posições no canvas de cada ponta no triangulo pequeno (é apenas a relação entre o triangulo maior para o menor).
Espero ter ajudado com este meu textão. rsrs
