Uma solução matematicamente diferente e mais simples!

E aí pessoal, depois de fazer o exercício proposto do esquadro fui conferir a resolução do professor e vi que ele fez uma solução matemática completamente diferente da minha, porém achei a solução que eu cheguei mais simples.

<canvas width="800" height="600"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    function desenhaEsquadro (ax, ay, cx, cy, cor) {

    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.moveTo(ax, ay);
    pincel.lineTo(ax, cy);
    pincel.lineTo(cx, cy);
    pincel.fill();

    pincel.fillStyle = "white";
    pincel.beginPath();
    pincel.moveTo(ax * 2, ay * 3.5);
    pincel.lineTo(ax * 2, cy * 0.875);
    pincel.lineTo(cx * 0.6875, cy * 0.875);
    pincel.fill();
    }

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


</script>

O que eu fiz, basicamente, foi partir do pensamento de que os valores dos argumentos da função seriam do triângulo maior e a partir disso eu dividi os valores de x e y do triangulo menor pelos do triangulo maior para chegar no valor de proporção de um triangulo para o outro, no caso de cy foi 350/400=0,875, ou seja, o o valor de* cy* do triangulo branco é 87,5% menor que do preto.

Espero que esse exemplo possa ajudar a galera que não manja tanto de geometria como eu.

Fica aberto a críticas galera, se alguém quiser acrescentar ou corrigir algo vou ficar bastante agradecido.