Fiz sem as contas. hehe

Ok, vários colegas no forum ficaram indignados com a solução do professor, mas sinceramente, se eu fosse bom em matemática, eu teria criado algo para gerar a proporção automaticamente. Até pensei em pesquisar sobre isso, mas achei que sairia do foco do meu estudo atual que é aprender a lógica da programação. Então, o meu código, não tem matemática. MAS, fala de matemática.

Abraços! Até mais.

<!-- esquadro.html -->

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

<script>

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

    var xa = 100
    var ya = 175
    var xc = 275
    var yc = 350

    function desenhaEsquadro(xa, ya, xc, yc, cor) {
    //a implementacao fica com vc :)
    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.moveTo(xa, ya);
    pincel.lineTo(xa, yc);
    pincel.lineTo(xc, yc);
    pincel.fill();
    }

    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='bold 20px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }
    function desenhaLinhaQuadrada (x,y,largura,altura, cor){
        pincel.strokeStyle=cor;
        pincel.strokeRect(x,y, largura, altura);
    }

    desenhaEsquadro(50,50,400,400, "black");
    desenhaEsquadro(100,175,275,350, "white");
    desenhaLinhaQuadrada(50,370,30,30, "white");
    desenhaTexto(30,250, "A");
    desenhaTexto(200,420,"B");
    desenhaTexto(230,230, "C");
    desenhaTexto(150, 50, "TEOREMA DE PITÁGORAS");
    desenhaTexto(150, 85, "a² = b² + c²");


</script>