In <canvas>, we can draw any shape that we want by constructing an outline using lines and curves and then filling it in with color. But sometimes it’s easier to draw a shape by combining circles and rectangles. I draw this flower by combining six orange circles for petals and one yellow circle for the center of the flower.

Since <canvas> is scriptable, once I’ve told the browser how to draw one petal, I can easily tell it to draw six petals. All I have to do is tell it where to draw the six petals so that they are spaced evenly around the center of the flower. Fortunately, <canvas> has a feature, called the “context” that makes positioning the petals really easy. Think of the context as the drawing universe. In <canvas>, we can manipulate this drawing universe in a number of useful ways.

The first thing I do is change the origin of the context. By default, the origin of the context is the top left corner of the <canvas>. I change the origin of the context to the center of the <canvas> because that’s where I want to draw my flower. Then I draw my first petal: an orange circle with a radius of 24 pixels at coordinates (0, 40). Notice how these coordinates are relative to my new origin, which is the center of my flower.

To draw the second petal, I rotate the context 60° clockwise and draw an orange circle at the exact same coordinates: (0, 40). Rotating the context is like rotating the piece of paper that I’m drawing on. By moving the “paper” and not my “pen”, I can draw all six petals at the same location—with no major calculations required.

On the left is a picture of what my drawing looks like when we are sitting outside of the context. On the right is a picture of what my drawing looks like when we are sitting inside of the context and have a pen’s eye view. Once I’ve rotated the context and drawn the six petals, I draw a yellow circle with a radius of 24 pixels at coordinates (0, 0)… and my flower is done.

Draw a flower.

Learn more about rows of flowers.