Diseñando una flor

Código de solución propuesta

    <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 flor (px, py, radio) {
            dibujarCirculo(px,py,radio,"red");
            dibujarCirculo(px,py-2*radio,radio,"yellow");
            dibujarCirculo(px,py+2*radio,radio,"blue");
            dibujarCirculo(px-2*radio,py,radio,"orange");
            dibujarCirculo(px+2*radio,py,radio,"brown");
        }

        flor (300,200,20);
        flor (100,150,30);
        flor (500,250,10);
    </script>