<canvas width="600" height="400"></canvas>
<script>
function desenhaQuadrado(x, y, cor) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = cor;
pincel.fillRect(x, y, 50, 50);
pincel.strokeStyle = 'black';
pincel.strokeRect(x, y, 50, 50);
}
var z = 1;
cor = "blue"
for (var x = 0; x <= 600;x = x + 50) {
for (var y = 0; y <= 400;y = y + 50) {
desenhaQuadrado(x, y, cor);
z = z + 1;
}
if (z % 2 == 0) {
console.log(z)
cor = "red"
} else {
cor = "blue"
}
}
//senhaQuadrado(50, 50, 'red');
//senhaQuadrado(0, 100, 'yellow');
</script>
