[Proyecto] Ejercicio flor con variante adicional !

<canvas width="600" height="400"></canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function dibujarCirculo(x, y, radio, color) {
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2*3.14);
        pincel.fill();
    }


    var color =["salmon", "pink", "darkgreen", "blue","aqua","teal", "violet" ,"maroon","olive","lime", "purple"];

    for (x = 50 ; x<600; x = x +100){

      c=Math.round(Math.random()*10);

    for(y=50; y<400; y = y +100)
    {
     c=Math.round(Math.random()*10);
    dibujarFlor(x, y,10,color)
}
}

    function dibujarFlor(x, y,radio, color){    
    dibujarCirculo(x, y-20, 20, color[c]);//arriba
    dibujarCirculo(x, y+20, 20, color[c]);//abajo
    dibujarCirculo(x-20,y, 20, color[c]);//izquierda
    dibujarCirculo(x+20,y, 20, color[c]);//derecha
    dibujarCirculo(x, y, 20, "yellow");//centro flor
    }

</script>