Usando trigonometria | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<canvas width="600" , height="500"></canvas>

<script>

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

    var h1
    var a1 
    var b1 

    var h2
    var a2
    var b2

    var h3
    var a3
    var b3

    var h4
    var a4
    var b4

    var h5
    var a5
    var b5

    function CalcularMedidasDosTriangulosAuxiliares(xa, ya, xc, yc, larg) {

        a1 = yc - ya;
        b1 = xc - xa;

        var somaQuadradoCatetos = Math.pow(a1, 2) + Math.pow(b1, 2);
        h1 = Math.pow(somaQuadradoCatetos, 1 / 2);

        b2 = larg;
        b3 = larg;

        a2 = (a1 / b1) * b2;
        h3 = (h1 / b1) * b3;

        a4 = larg;
        a5 = larg;
        b4 = (b1 / a1) * a4;
        h5 = (h1 / a1) * a5;
    }

    function desenhaTrianguloInterno(xa, ya, xc, yc, larg, cor) {

        CalcularMedidasDosTriangulosAuxiliares(xa, ya, xc, yc, larg);

        var yai = ya + h3 + a2;
        var xai = xa + larg;
        var yci = yc - larg;
        var xci = xc - h5 - b4;

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(xai, yai);
        pincel.lineTo(xai, yci);
        pincel.lineTo(xci, yci);
        pincel.fill();
    }

    function desenhaEsquadro(xa, ya, xc, yc, larg, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xa, yc);
        pincel.lineTo(xc, yc);
        pincel.fill();

        desenhaTrianguloInterno(xa, ya, xc, yc, larg, 'white');

    }

    var xa = 50
    var ya = 50
    var xc = 500
    var yc = 400
    var larg = 50

    desenhaEsquadro(xa, ya, xc, yc, larg, 'lightblue');

    //A SOLUÇÃO FINALIZA AQUI.
    //A programação abaixo foi implementada somente para ilustrar os
    //triângulos auxiliares e legendas para entendimento da solução.

    function desenhaTrianguloAuxiliar(x1, y1, x2, y2, x3, y3, cor) {

        pincel.fillStyle = cor;

        pincel.beginPath();
        pincel.moveTo(x1, y1);
        pincel.lineTo(x2, y2);
        pincel.lineTo(x3, y3);
        pincel.lineTo(x1, y1);
        pincel.fill();
        pincel.strokeStyle = 'blue'
        pincel.stroke()
    }

    pincel.font = '15px Georgia';

    desenhaTrianguloAuxiliar(xa, ya + h3, xa, ya + h3 + a2, xa + larg, ya + h3 + a2, 'gray')
    pincel.fillText('a2', xa - 20, (ya + h3 + a2 / 2) + 5);
    pincel.fillText('b2', xa + (larg / 2) - 10, (ya + h3 + a2) + 15);
    pincel.fillText('h2', xa + larg - 20, (ya + h3 + a2 / 2));

    desenhaTrianguloAuxiliar(xa, ya, xa, ya + h3, xa + (a1 / h1) * b3, ya + h3 - (b1 / h1) * b3, 'green')
    pincel.fillText('a3', xa + (a1 / h1) * b3 - 15, ya + h3 - (b1 / h1) * b3 - 15);
    pincel.fillText('b3', xa + (((a1 / h1) * b3) / 2) + 10, ya + h3 - (((b1 / h1) * b3) / 2) + 10);
    pincel.fillText('h3', xa - 20, (ya + h3 / 2));

    desenhaTrianguloAuxiliar(xc - h5 - b4, yc - larg, xc - h5 - b4, yc, xc - h5, yc, xc - h5 - b4, yc - larg, 'green')
    pincel.fillText('a4', xc - h5 - b4 - 20, (yc - a4 / 2) + 5);
    pincel.fillText('b4', xc - h5 - b4 / 2 - 10, yc + 15);
    pincel.fillText('h4', xc - h5 - b4 / 2 + 3, (yc - a4 / 2 - 5));

    desenhaTrianguloAuxiliar(xc - h5, yc, xc, yc, xc - h5 + (a1 / h1) * a5, yc - (b1 / h1) * a5, 'orange')
    pincel.fillText('a5', xc - h5 + ((a1 / h1) * a5) / 2 - 15, yc - ((b1 / h1) * a5) / 2 - 10);
    pincel.fillText('b5', xc - (h5 - ((a1 / h1) * a5)) / 2, yc - ((b1 / h1) * a5) / 2 - 5);
    pincel.fillText('h5', xc - h5 / 2 - 10, yc + 15);

    pincel.fillStyle = 'blue'
    pincel.fillText('a1', xa - 20, ya + a1 / 2 - 5)
    pincel.fillText('b1', xa + b1 / 2 - 15, yc + 15);
    pincel.fillText('h1', xa + b1 / 2, ya + a1 / 2 - 5);

    pincel.fillStyle = 'black'

    pincel.fillText('(xa, ya)', xa - 20, ya - 5)
    pincel.fillText('(xc, yc)', xc + 5, yc)

    var yai = ya + h3 + a2;
    var xai = xa + larg;
    var yci = yc - larg;
    var xci = xc - h5 - b4;

    pincel.fillText('(xai, yai)', xai + 5, yai + 5)
    pincel.fillText('(xci, yci)', xci - 60, yci);

    pincel.fillText('a1 = yc- ya, b1 = xc - xa. Aplicando Pitágoras: h1^2 = a1^2 + b1^2', xa + b1 / 4, ya - 20)
    pincel.fillText('Como os ângulos dos triâgulos ilustrados são iguais,', xa + b1 / 4, ya)
    pincel.fillText('então, as medidas dos lados desses triângulos são proporcionais.', xa + b1 / 4, ya + 20)
    pincel.fillText('b2=b3=a4=a5=larg (largura do esquadro)', xa + b1 / 4, ya + 40)
    pincel.fillText('Pela proporcionalidade, calculamos as medidas dos triângulos.', xa + b1 / 4, ya + 60)
    pincel.fillText('xai = xa + larg, yai = ya + h3 + a2, xci = xc - h5 - b4, yci = yc - larg', xa + b1 / 4, ya + 80)

</script>

Gostei bastante, e tomei a liberdade de fazer uma solução não didática:

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

<script>

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

    var xa = 50;                        //altere somente estas 6 variáveis: coordenadas x y do ponto A;
    var ya = 50;
    var xc = 550;                       //coordenadas x y do ponto C;
    var yc = 350;
    var larg = 50;                      //largura do esquadro;
    var cores = ["red", "white"];       //cor do esquadro.

    catx = xc - xa;
    caty = yc - ya;
    hipo = Math.pow((Math.pow(caty, 2) + Math.pow(catx, 2)), 1 / 2);

    var deltay = (larg * (caty + hipo))/ catx;
    var deltax = (larg *(catx + hipo)) / caty;

    function desenhaEsquadro(xa, ya, xc, yc, larg) {
        for(i = 0; i <=1; i++) {
            pincel.fillStyle = cores[i];
            pincel.beginPath();
            pincel.moveTo(xa + (larg * i), ya + (deltay * i));
            pincel.lineTo(xa + (larg * i), yc - (larg * i));
            pincel.lineTo(xc - (deltax * i), yc - (larg * i));
            pincel.fill();
        }
    }

    desenhaEsquadro(xa, ya, xc, yc, larg);

</script>