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:
- 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; }
- Define a
draw
method of theFlower
object that creates flower petals with afor
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.