ESQUADRO, código comentado sem calculo

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

<script>
//criando a função para desenhar esquadro
    function desenhaEsquadro (xa, ya, xc, yc, cor){ //recebemos coordenadas que desenhariam a hipotenusa, apartir dela temos o ponto que cria os catetos
        var tela = document.querySelector("canvas");//trazendo canva para o html
        var pincel = tela.getContext("2d"); //criando um pincel em 2d

        pincel.fillStyle = cor ; //atribuindo uma cor ao pincel
        pincel.beginPath(); //criando um novo caminho para desenhar
        pincel.moveTo(xa, ya); // dando as coordenadas de para onde o pincel deve se posicionar
        pincel.lineTo(xc, yc); //para onde o pincel deve se mover
        pincel.lineTo(xa, yc); //uso agora as coordenadas xa e yc para gerar um novo ponto criando um triangulo
        pincel.fill(); //preenchendo esse triangulo com cor
    }
    desenhaEsquadro(50,50,400,400, "black"); //fazendo a chamada
    desenhaEsquadro(100,175,275,350, "white"); //fazendo a chamada

    //código simples, me sigam no instagram:felipednew precisando de ajuda so chamar.
</script>