<meta charset="UTF-8">
<canvas width="700" height="500"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function desenhaQuadrados(x,cor) {
pincel.fillStyle = cor;
pincel.fillRect(x,50, 100,100);
pincel.strokeRect(x,50, 100,100);
pincel.strokeRect(x+100,50, 100,100);
}
function desenhaTexto(texto,x,y,cor){
pincel.font = '20px Georgia';
pincel.fillStyle = cor;
pincel.fillText(texto,x,y);
}
pincel.fillStyle = 'white';
pincel.fillRect(0,0, 700,500);
for(var x = 50; x <= 250; x = x + 100){
desenhaQuadrados(x,'green');
}
desenhaTexto("Qual é a fração ?",50, 30, 'black');
</script>
