<canvas whidth="600" heingth="400"></canvas>
<script>
function desenhaQuadrado(x,y,cor){
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = cor;
pincel.fillRect(x, 0, 50, 50);
pincel.fillStroke = 'black';
pincel.strokeRect(x, 0, 50, 50);
}
for (var x=0; x < 150; x=x+50){
desenhaQuadrado(x ,50, 'green')
}
desenhaQuadrado(150,50,'white');
</script>
Oi bruno, gostei da solução que deu, porem acho esta faltando o Y dentro da função Você o colocou como parâmetro mas não usou ele dentro da função, tipo assim:
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.fillStroke = 'black';
pincel.strokeRect(x, y, 50, 50);
}