Dibujar Flor

Hola, les comparto mi codigo, cree una funcion donde se crea la flor usando 3 datos que son manipulables facilmente las cuales son el centro del circulo rojo, que es la cordenada de x, y, radio. De esta manera se puede escoger el tamaño de los circulos de la flor y mover su punto de origen a otra coordenada.

<meta charset="utf-8">

<h1>Dibujar flor</h1>

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

</canvas>


<script>

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

    function dibujarFlor(x,y,radio){
        dibujarCirculo(x,y,radio,"red");
        dibujarCirculo(x-(2*radio),y,radio,"orange");
        dibujarCirculo(x+(2*radio),y,radio,"black");
        dibujarCirculo(x,y-(2*radio),radio,"yellow");
        dibujarCirculo(x,y+(2*radio),radio,"blue");
    }


    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "lightgray";
    pincel.fillRect(0,0,600,400);


// esta funcion permite mover los circulos y dibujarlos del tamaño que uno quiera cambiando los parametros de x,y, radio

    var x=300;
    var y=200;
    var radio=25;

    dibujarFlor(x,y,radio);




</script>