Randomizing shape properties: drawing a field of flowers

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

Randomizing shape properties: drawing a field of 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 ...

Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.