fiz de um jeito diferente, está correto?

Oi, Samara!!! Tudo bem contigo?

Sua lógica está correta sim!!!!

<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, yc); 
    pincel.lineTo(xc, yc); 
    pincel.fill(); 
}

desenhaEsquadro(50,50,400,400,'black')
desenhaEsquadro(100,175,250,350,'white')

</script>

Só observei que precisamos ajustar o Esquadro Branco. Coisa muito simples ;-)

Vá até a criação dele

desenhaEsquadro(100,175,250,350,'white')

e vá ajustando a posição xc = (250). Ajuste de 10 em 10 atualizando o navegador. ;-)

Espero ter ajudado, Samara!!!

Continue praticando. Sua lógica está bacana!

Um abraço e bons estudos!!!