Boa noite! Eu fiz do jeito abaixo;
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
function desenhaCirculo(x,y,raio,cor) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var cores = ['orange', 'red', 'black', 'blue', 'red', 'yellow'];
// Selecina a cor
pincel.fillStyle = cores[cor];
pincel.beginPath();
pincel.arc(x,y, raio, 0, 2 * Math.PI);
pincel.fill();
}
// variavel 'cl' usada para selecionar uma cor diferente dentro do array
var cl = 0;
// laço para repetir em linha
for (x = 200; x < 500; x = x + 100) {
desenhaCirculo(x,200,50,cl++);
}
// variavel 'cc' usada para selecionar uma cor diferente dentro do array
var cc = 5;
// laço para repetir em coluna
for (y = 100; y < 400; y = y + 100) {
desenhaCirculo(300,y,50,cc--);
}
</script>
