Flor

en mi caso utiliza dos variables en la función principal en dibujarFloor entonces con eso tomamos las posiciones de los círculos una vez que tenemos eso solo resta ver las posiciones de los demás círculos es , restamos de que tamaño será la circunferencia ,en este caso es 20 la circunferencia y otros 20 la posición donde tiene que ir el otro círculo entonces la suma de eso es 40 una vez con eso restamos y sumamos en las posiciones que tiene que ir cada color este es el código que hice

<meta charset="utf-8">



<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();
    }



    function dibujarFlor(posicionX,posicionY){
    //dibujarCirculo(300,200,20,"red");
    //centro
    dibujarCirculo(posicionX,posicionY,20,"red");
    //arriba
    dibujarCirculo(posicionX,posicionY-40,20,"yellow");
    //izquierda
    dibujarCirculo(posicionX-40,posicionY,20,"orange");
    //derecha
    dibujarCirculo(posicionX+40,posicionY,20,"black");
    //abajo
    dibujarCirculo(posicionX,posicionY+40,20,"blue");  
    }

    dibujarFlor(100,200);

    dibujarFlor(200,300);
    dibujarFlor(400,300);
</script>