G-movingflowers

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>flowers</title>
</head>
<canvas id="canvas1" width="640" height="480" style="border: 1px solid black;
        position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="canvas2" width="640" height="480" style="border: 1px solid black;
        position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
<body>

<script>

var layer1 = document.getElementById("canvas1");
var dt1 = layer1.getContext("2d");
var layer2 = document.getElementById("canvas2");
var dt2 = layer2.getContext("2d");


// Draw sky.
dt1.fillStyle = "lightBlue";
dt1.fillRect(0, 0, 640, 300);

// Draw grass.
dt1.fillStyle = "green";
dt1.fillRect(0, 300, 640, 180);

//call the "runFunc" when mouse is clicked
document,addEventListener("click",runFunc);


function runFunc()
{
dt2.clearRect(0,0,canvas2.width,canvas2.height);
for (var i = 1; i<=200000;i++)
    {
        //flower(Math.ceil(Math.random()*canvas2.width),Math.floor(Math.random()*canvas2.height),"#663399")
        flower(Math.ceil(Math.random()*640),Math.floor(Math.random()*180)+280,randomColour())
    }
}


function flower(xPos, yPos, colour)
{
    // Draw the stem.
    dt2.strokeStyle = "darkGreen";
    dt2.lineWidth = 3;
    dt2.beginPath();
    dt2.moveTo(xPos, yPos);
    dt2.lineTo(xPos, yPos+50);
    dt2.stroke();

    // Draw petal in specified colour.
    dt2.fillStyle = colour;
    dt2.beginPath();
    dt2.arc(xPos, yPos, 15, 0, 2*Math.PI);
    dt2.fill();

    // Draw yellow stamen.
    dt2.fillStyle = "#FFFF71";
    dt2.beginPath();
    dt2.arc(xPos, yPos, 10, 0, 2*Math.PI);
    dt2.fill();
}

    function randomColour()
    {
       red = Math.floor(Math.random()*255)+1;
       green = Math.floor(Math.random()*255)+1;
       blue = Math.floor(Math.random()*255)+1;

        return "rgb("+red+","+green+","+blue+")";
    }

</script>

</body>
</html>