Esquadro como ficou ?

<meta charset="utf-8">

<canvas width= "600" height= "400"> </canvas>
<br><h1>Dois esquadros...<h1>
<script>

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');//Para obter um objeto desta interface, chama-se  getContext() em um elemento <canvas>, adicionando "2d" como argumento 
// fillStyle define a cor de preenchimento do retângulo
// beginPath() Inicia um novo caminho (path), esvaziando a lista de sub-caminhos (sub-paths) 
// fill() define a cor de preenchimento do retângulo.
// movTo()  move o ponto inicial de um novo sub-caminho (sub-path) para as coordenadas. 
// lineTo() conecta o último ponto do sub-caminho (sub-path) para as coordenadas x, y, através de uma linha (mas na realidade não a desenha).

pincel.fillStyle = 'black'; 
pincel.beginPath();
pincel.moveTo(50, 50);
pincel.lineTo(50, 400);
pincel.lineTo(400, 400);
pincel.fill();

pincel.fillStyle = 'white';
pincel.beginPath(); 
pincel.moveTo(100, 175);
pincel.lineTo(100, 350);
pincel.lineTo(275, 350);
pincel.fill();

pincel.fillStyle = 'black';
pincel.beginPath(); 
pincel.moveTo(100, 50);
pincel.lineTo(450, 50);
pincel.lineTo(450, 400);
pincel.fill();

pincel.fillStyle = 'white'; 
pincel.beginPath();
pincel.moveTo(225, 100);
pincel.lineTo(400, 100);
pincel.lineTo(400, 275);
pincel.fill();


</script>