This flower has sixteen two-colored petals. And even though they don’t look like circles, each petal is drawn by drawing a red circle on top of a larger pink circle.

(Petal—Context View)

(Petal—Outside View)

The petals look like ovals and not circles because I am changing the x-scale of the context from 1 to 0.3. An x-scale of 1 is normal. An x-scale greater than 1 stretches the context in the x-direction, making everything drawn into the context wider when viewed from outside of the context. Conversely, an x-scale less than 1 makes everything skinnier.

Change the values in the number fields to draw your own flower.

Outer petal color: red: , green: , blue:

Outer petal circle: x-coordinate: , y-coordinate: , radius:

Inner petal color: red: , green: , blue:

Inner petal circle: x-coordinate: , y-coordinate: , radius:

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:

So why is the center of the flower a perfect circle? When I draw each petal, I apply an x-scale of 0.3, but when I draw the center of the flower, I reset the x-scale back to 1. Any change that we make to the context is stored in a context stack and can be undone by removing it from the stack.

Draw a flower with a gradient.