Após a aula de fiquei pensando como preencher a tela inteira usando uma função, cheguei nesta função, colocando um 'for' dentro do outro. Funcionou, é um solução interessante? E para fazer as cores também serem diferentes, tipo, linha 1 verde, linha 2 vermelho, linha 3 azul e repetindo.
<canvas width="600" height="400"></canvas>
<script>
function desenhaquadrado(x, y, tamanho, cor) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle=cor;
pincel.fillRect(x, y, tamanho, tamanho);
pincel.fillStroke = 'black';
pincel.strokeRect(x, y, tamanho, tamanho);
}
for(y=0; y < 400; y = y + 50) {
for (x = 0; x < 600; x= x +50) {
desenhaquadrado (x, y, 50, 'green');
}
}
</script>
