<html>
<meta charset="utf-8">
<canvas width="800" height="600"></canvas>
<script>
function desenhaQuadrado(x, y, larguraQuadrado,alturaQuadrado,cor, tela) {
var pincel = tela.getContext('2d');
pincel.fillStyle = cor;
pincel.fillRect(x, y, larguraQuadrado, alturaQuadrado);
pincel.strokeStyle = 'black';
pincel.strokeRect(x, y, larguraQuadrado, alturaQuadrado);
}
function preencheTelaComQuadrados(tela,larguraQuadrado,alturaQuadrado,corQuadrado){
var contador = 0;
for (contador; contador < tela.height; contador += larguraQuadrado) {
for (var i = 0; i < tela.width; i += alturaQuadrado) {
desenhaQuadrado(i,contador,larguraQuadrado,alturaQuadrado,corQuadrado,tela);
}
}
}
var tela = document.querySelector('canvas');
preencheTelaComQuadrados(tela,100,100,'yellow');
</script>
</html>
