[Projeto] Solução diferente com possibilidade de mudar o tamanho dos esquadros.

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

<script>

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


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

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

    pincel.fillStyle= "white";
    pincel.beginPath();
    pincel.moveTo(xa * 2, ya * 3.5);
    pincel.lineTo(xa * 2, xc / 1.142857142857143);
    pincel.lineTo(xc / 1.454545454545455, yc / 1.142857142857143);
    pincel.fill();


    }    

    desenhaEsquadro(50, 50, 400, 400, "black");


</script>

Fiz as divisões e as multiplicações para manter a proporção de cada esquadro. Assim, da fórmula "desenhaEsquadro" posso por qualquer valor(que caiba no canvas criado) que será desenhado 2 esquadros, um dentro do outro. Os primeiros pontos do esquadro maior são 50,50 e do menor são 100, 175, ou seja, 100 é o dobro de 50 (por isso xa * 2) e 175 é 3.5 vezes 50 (por isso ya * 3.5), e assim por diante.