function desenharQuadradoVerde(x,y){
pincel.fillStyle ='green';
pincel.fillRect(x,y,50,50)
pincel.fillstoke = 'Black' // cor da Borda
pincel.strokeRect(x,y,50,50) // Borda
}
function desenharQuadradoVermelho(x,y){
pincel.fillStyle ='red';
pincel.fillRect(x,y,50,50)
pincel.fillstoke = 'Black' // cor da Borda
pincel.strokeRect(x,y,50,50) // Borda
}
function desenharQuadradoAzul(x,y){
pincel.fillStyle ='blue';
pincel.fillRect(x,y,50,50)
pincel.fillstoke = 'Black' // cor da Borda
pincel.strokeRect(x,y,50,50) // Borda
}
function desenharQuadradoAmarelo(x,y){
pincel.fillStyle ='yellow';
pincel.fillRect(x,y,50,50)
pincel.fillstoke = 'Black' // cor da Borda
pincel.strokeRect(x,y,50,50) // Borda
}
//esquadro
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0,600,400);
desenharQuadradoVerde(0,0);
desenharQuadradoVerde(0,50);
desenharQuadradoVerde(0,100);
desenharQuadradoVerde(0,150);
desenharQuadradoVerde(0,200);
desenharQuadradoVermelho(50,0);
desenharQuadradoVermelho(50,50);
desenharQuadradoVermelho(50,100);
desenharQuadradoVermelho(50,150);
desenharQuadradoVermelho(50,200);
desenharQuadradoAzul(100,0);
desenharQuadradoAzul(100,50);
desenharQuadradoAzul(100,100);
desenharQuadradoAzul(100,150);
desenharQuadradoAzul(100,200);
desenharQuadradoAzul(150,0);
desenharQuadradoAzul(200,50);
desenharQuadradoAzul(150,200);
desenharQuadradoAzul(200,150);
desenharQuadradoVermelho(250,100);
desenharQuadradoAmarelo(150,50)
desenharQuadradoAmarelo(150,100)
desenharQuadradoAmarelo(150,150)
desenharQuadradoAmarelo(200,100)
