Handling multiple transforms with the state stack

Now that we have a good handle on transformations with the HTML5 canvas API, we're now in a position to further explore the canvas state stack and see what it can do for us with respect to transformations. In Chapter 2, Shape Drawing and Composites, we covered the state stack, a very powerful yet sometimes overlooked property of the canvas API. Although the canvas state stack can help with managing styling, it's most common usage is to save and restore transformation states. In this recipe, we'll perform multiple transformations while saving the canvas state between each transformation, and then draw a sequence of rectangles after restoring each state to see the effects.

How to do it...

Follow these ...

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.