Minha resolução - basta uma única coordenada

Essa é minha resolução. Considerei as coordenadas do esquadro fornecido como exemplo no exercício.

Fiz alguns testes, inclusive com números decimais positivos, e o esquadro sempre fica com a mesma proporção. Se encontrarem resultado diferente, me avisem XD

Segui o seguinte raciocínio:

• A, B, C -> vértices do triângulo externo
• a, b, c -> vértices do triângulo interno

Para que os vértice B e b tenham ângulos de 90°, xB e xb devem ser iguais a xA e xa, respectivamente. O mesmo vale para yB e yb. Desse modo:

• xB = xA
• xb = xa
• yB = yC
• yb = yc

O esquadro é formado por 2 triângulos retângulos proporcionais entre si. Sendo assim, determinei a relação entre as coordenadas dos vértices ao dividir os valores dos vértices internos pelos externos.

• xa = (100/50)* xA = 2* xA
• ya = (175/50)* yA = 3.5* yA
• xc = (275/400)* xC = 0.6875* xC
• yc = (350/400)* yC = 0.875* yC

Substituindo os valores, temos:

• xA
• xB = xA
• xC
• yA
• yB = yA
• yC

• xa = 2* xA
• xb = xa = 2* xA
• xc = 0.6875* xC
• ya = 3.5* yA
• yb = yc = 0.875* yC
• yc = 0.875* yC

No exemplo do exercício, xA e yA são iguais, bem como xC e yC. Logo:

• xA
• xB = xA
• xC
• yA = xA
• yB = yA = xA
• yC = xC

Substituindo os valores na função:

• pincel.moveTo(xA, yA) = pincel.moveTo(xA, xA);
• pincel.lineTo(xB, yB) = pincel.moveTo(xA, xC);
• pincel.lineTo(xC, yC) = pincel.moveTo(xC, xC);

• pincel.moveTo(xa, ya) = pincel.moveTo(2* xA, 3.5* yA) = pincel.moveTo(2* xA, 3.5* xA);
• pincel.lineTo(xb, yb) = pincel.moveTo(2* xA, 0.6875* yC) = pincel.moveTo(2* xA, 0.6875* xC);
• pincel.lineTo(xc, yc) = pincel.moveTo(0.6875* xC, 0.6875* yC) = pincel.moveTo(0.6875* xC, 0.6875* xC);

Por último, xC é 8 vezes maior que xA nesse exemplo:

• xC = 8* xA

O código final ficou assim:

<canvas width="600" height="450"></canvas>
    <!--** ATENÇÃO **

    Para que o esquadro encaixe perfeitamente no tamanho do canvas:

    height = 9*xA
    width = 12*xA

    -->

<script>
    function desenhaEsquadro (xA, cor) {
        /*

        Insira a coordenada x onde o esquadro deve ficar e a cor desejada.

        */

        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        var xC = 8*xA

        // triângulo externo
        pincel.fillStyle= cor;
        pincel.beginPath();
        pincel.moveTo(xA, xA);
        pincel.lineTo(xA, xC);
        pincel.lineTo(xC, xC);
        pincel.fill();

        // triângulo interno
        pincel.fillStyle= "white";
        pincel.beginPath();
        pincel.moveTo(2*xA, 3.5*xA);
        pincel.lineTo(2*xA, 0.875*xC);
        pincel.lineTo(0.6875*xC, 0.875*xC);
        pincel.fill();

    }

    desenhaEsquadro (50, "black");

</script>

Críticas são bem-vindas =D