Bom dia,
Se tratando de uma forma geométrica linear , reparei que o tamanho de Y sempre é proporcional ao tamanho de X. Sendo assim, criei a função apenas com uma variável e a cor, aonde X vai definir o tamanho do esquadro e independente do valor atribuído a ela a proporção se mantém.
<canvas width="600" height="400"></canvas>
<script>
function desenhaEsquadro(x,cor) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var y = x*8
pincel.fillStyle=cor;
pincel.beginPath();
pincel.moveTo(x, x);
pincel.lineTo(x, y);
pincel.lineTo(y, y);
pincel.fill();
pincel.fillStyle="white";
pincel.beginPath();
pincel.moveTo(x+x, x+(x*2.5));
pincel.lineTo(x+x, y-x);
pincel.lineTo(y-(x*2.5), y-x);
pincel.fill();
}
desenhaEsquadro(50, 'black')
</script>
