Instead of drawing petals with just two colors, I can draw petals with gradients. I draw the petals on this flower by changing the x-scale and filling a circle with a radial gradient. The center of my radial gradient is not the same as the center of my circle.
(Petal—Context View)
(Petal—Outside View)
Change the values in the number fields to draw your own flower.
Petal circle: x-coordinate: , y-coordinate: , radius:
Gradient center: x-coordinate: , y-coordinate:
Color Stop 1 (radius: ): red: , green: , blue:
Color Stop 2 (radius: ): red: , green: , blue:
Context: x-scale:
(Petal—Context View)
(Petal—Outside View)
(Center—Context View)
(Flower—Outside View)
Center color: red: , green: , blue:
Center circle: x-coordinate: , y-coordinate: , radius:
Number of petals:
Since drawing flowers on <canvas>, I’ve started to notice details that I used to miss. For example, petals can have more than one color, flowers have more than two parts, and sometimes petals are arranged in layers.