Diseñando una flor

Aquí una variante que dibuja 3 flores donde sus colores se generan de manera aleatoria:

<canvas width="1200" height="800">

</canvas>

<script>

    let pantalla = document.querySelector("canvas");
    let pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 1200, 800);

    function dibujarCirculo(x, y, radio, color) {

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

    function aleatorio(inferior,superior){

       numPosibilidades = superior - inferior
       aleat = Math.random() * numPosibilidades
       aleat = Math.floor(aleat)
       return parseInt(inferior) + aleat
    }

    function colorAleatorio() {
        hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
        color_aleatorio = "#";
        for (i=0;i<6;i++){
            posarray = aleatorio(0,hexadecimal.length)
            color_aleatorio += hexadecimal[posarray]
        }
        return color_aleatorio
    }

    function dibujarFlor(x, y) {

        dibujarCirculo(x, y + 80, 40, colorAleatorio());
        dibujarCirculo(x, y, 40, colorAleatorio());
        dibujarCirculo(x, y - 80, 40, colorAleatorio());
        dibujarCirculo(x - 80, y, 40, colorAleatorio());
        dibujarCirculo(x + 80, y, 40, colorAleatorio());
    }

    dibujarFlor(300, 200);
    dibujarFlor(500, 400);
    dibujarFlor(700, 600);

</script>