HTML5 Canvas Cookbook

Randomizing shape properties: drawing a field of flowers

In this recipe, we'll embrace our inner hippie by creating a field of colorful flowers.

How to do it...

Follow these steps to draw randomized flowers all over the canvas:

1. Define the constructor of a Flower object:

   // define Flower constructor
   function Flower(context, centerX, centerY, radius, numPetals, color){
       this.context = context;
       this.centerX = centerX;
       this.centerY = centerY;
       this.radius = radius;
       this.numPetals = numPetals;
       this.color = color;
   }

2. Define a draw method of the Flower object that creates flower petals with a for loop and then draws a yellow center:

   // Define Flower draw method ...