Mi Flor

<meta charset = "utf 8">
<canvas width = "600" height = "400"></canvas> 

<h1>............................FLOWER.............................</h1>
<title>FLOWER-FOR-YOU</title>

<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.12);
        pincel.fill();
    } 

    //fondo
    pincel.fillStyle = "cyan";
    pincel.fillRect(260,160,80,80);

    //arriba
    dibujarCirculo(300,180,10,"yellow");

    //lado izquierdo
    dibujarCirculo(280,200,10,"orange"); 

    //lado derecho
    dibujarCirculo(320,200,10,"black"); 

    //centro
    dibujarCirculo(300,200,10,"red");

    //abajo 
    dibujarCirculo(300,220,10,"blue");

    //tallo derecho
    pincel.fillStyle = "darkgreen";
    pincel.beginPath();
    pincel.moveTo(300,230);
    pincel.lineTo(300,400);
    pincel.lineTo(350,350);
    pincel.fill();

    //tallo izquierdo
     pincel.fillStyle = "darkgreen";
    pincel.beginPath();
    pincel.moveTo(300,230);
    pincel.lineTo(300,400);
    pincel.lineTo(250,350);
    pincel.fill();
</script>