Outra abordagem

insira seu código aqui

Percebi que da forma como o exercício foi escrito, não dá pra mudar o ponto de partida do esquadro sem alterar toda a proporção do desenho. Fiz uma solução utilizando o ponto de partida (x, y) e o tamanho do lado do triângulo maior, já que se trata de um esquadro de 45º, portanto os dois lados têm o mesmo tamanho. Dessa forma, posso mexer o esquadro dentro da tela e aumentar ou diminuir seu tamanho sem alterar suas proporções. O que acham?

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

<script>

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

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(x, y);
        pincel.lineTo (x + lado, y + lado);
        pincel.lineTo (x, y + lado);
        pincel.fill();
    }

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

        desenhaTrianguloRetangulo (x, y, lado, cor);
        cor = 'white';
        desenhaTrianguloRetangulo (x + lado / 7, y + 5 * lado / 14, lado / 2, cor);
    }

    desenhaEsquadroRetangulo (350, 70, 250, 'black', 'white');

</script>