Uma inofensiva flor...

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>