<!-- esquadro.html -->
<canvas width="600" height="400"></canvas>
<script>
var esquadro1=[50,400]
var esquadro2=[100,175]
var cor=["black","white"]
function desenhaEsquadro(xa,ya,xc,yc,xb,yb,cor){
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle=cor;
pincel.beginPath();
pincel.moveTo(xa,ya);
pincel.lineTo(xa,yc);
pincel.lineTo(xc,yc);
pincel.fill();
}
desenhaEsquadro(esquadro1[0],esquadro1[0],esquadro1[1],esquadro1[1],esquadro1[0],esquadro1[1], cor[0]);
desenhaEsquadro(esquadro2[0],esquadro2[1],esquadro2[0]+esquadro2[1],esquadro2[1]+esquadro2[1],esquadro2[0],esquadro2[1]+esquadro2[1], cor[1]);
</script>
