Fiz uma flor de círculos com flores de círculos. Analisando as respostas no fórum, encontrei uma interessante que automatiza o preenchimento das variáveis apenas com as coordenadas iniciais, mas em razão de manter as cores estáticas - e eu não saber (ainda) automatizar essa mudança sem recorrer a um input a cada desenho -, preferi fazer o trabalho de formiguinha, desenhando círculo por círculo. Se tiverem alguma ideia pra mudar as cores das pétalas automaticamente, estou todo ouvidos (e olhos).
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function desenharCirculo(x,y,raio,cor){
pincel.fillStyle=cor;
pincel.beginPath();
pincel.arc(x,y,raio,0,2*3.14);
pincel.fill();
pincel.stroke();
}
desenharCirculo(300,200,50,"red");
desenharCirculo(200,200,50,"orange");
desenharCirculo(400,200,50,"black");
desenharCirculo(300,100,50,"yellow");
desenharCirculo(300,300,50,"blue");
//circulo central
desenharCirculo(300,200,20,"black");
desenharCirculo(280,200,20,"yellow");
desenharCirculo(320,200,20,"blue");
desenharCirculo(300,220,20,"red");
desenharCirculo(300,180,20,"orange");
//circulo da esquerda
desenharCirculo(200,200,20,"black");
desenharCirculo(180,200,20,"yellow");
desenharCirculo(220,200,20,"blue");
desenharCirculo(200,220,20,"red");
desenharCirculo(200,180,20,"orange");
//circulo da direita
desenharCirculo(400,200,20,"black");
desenharCirculo(380,200,20,"yellow");
desenharCirculo(420,200,20,"blue");
desenharCirculo(400,220,20,"red");
desenharCirculo(400,180,20,"orange");
//circulo de cima
desenharCirculo(300,100,20,"black");
desenharCirculo(280,100,20,"yellow");
desenharCirculo(320,100,20,"blue");
desenharCirculo(300,120,20,"red");
desenharCirculo(300,80,20,"orange");
//circulo de baixo
desenharCirculo(300,300,20,"black");
desenharCirculo(280,300,20,"yellow");
desenharCirculo(320,300,20,"blue");
desenharCirculo(300,320,20,"red");
desenharCirculo(300,280,20,"orange");
</script>