Diseñando una flor

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "#84C1D7";
    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();

    }

    dibujarCirculo(200,200,20,"#3E1C1A")
    dibujarCirculo(200,240,20,"#FFDA00")
    dibujarCirculo(200,160,20,"#FFDA00")
    dibujarCirculo(160,200,20,"#FFDA00")
    dibujarCirculo(240,200,20,"#FFDA00")

    dibujarCirculo(400,200,20,"#3E1C1A")
    dibujarCirculo(400,240,20,"#FFDA00")
    dibujarCirculo(400,160,20,"#FFDA00")
    dibujarCirculo(360,200,20,"#FFDA00")
    dibujarCirculo(440,200,20,"#FFDA00")



    function dibujarCuadrado(x,y,color){
            var pantalla = document.querySelector("canvas")
            var pincel = pantalla.getContext("2d")

            pincel.fillStyle = color
            pincel.fillRect(x,y,10,1000)

        }

        dibujarCuadrado(195,260,"green")
        dibujarCuadrado(395,260,"green")


</script>