<canvas width="600", height="400"></canvas>
<script>
var tela = document.querySelector('Canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0, 0, 600, 400)
function desenhaEsquadro(x1, y1, x2, y2, cor){
pincel.fillStyle = cor;
pincel.beginPath();
pincel.moveTo(x1, x1);
pincel.lineTo(x1, y1);
pincel.lineTo(y1, y1);
pincel.fill();
pincel.fillStyle = "white";
pincel.beginPath();
pincel.moveTo(x2, x2 + x1 + x1/2);
pincel.lineTo(x2, y2);
pincel.lineTo(y2 - x1 - x1/2, y2);
pincel.fill();
}
desenhaEsquadro(50, 400, 100, 350, 'black');
</script>
