Diseñando una flor

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

<script>
    let pantalla = document.querySelector("canvas");
    let pincel = pantalla.getContext("2d");
    let radio = 20;
    let x = 300;
    let y = 200; 

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

    pincel.fillStyle = "yellow";
    pincel.beginPath();
    pincel.arc(x, y, radio, 0, 2 * Math.PI);
    pincel.fill();

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.arc(x+(radio*2), y+(radio*2), radio, 0, 2 * Math.PI);
    pincel.fill();

    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(x, y+(radio*4), radio, 0, 2 * Math.PI);
    pincel.fill();

    pincel.fillStyle = "orange";
    pincel.beginPath();
    pincel.arc(x-(radio*2), y+(radio*2), radio, 0, 2 * Math.PI);
    pincel.fill();

    pincel.fillStyle = "red";
    pincel.beginPath();
    pincel.arc(x, y+(radio*2), radio, 0, 2 * Math.PI);
    pincel.fill();

    //FUNCIONES
    function dibujarCirculo(x, y, radio, color) {
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2 * Math.PI);
        pincel.fill();
    }
</script>