Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML5 Canvas Transformation State Stack Tutorial

Discussion

To save and restore different transformation states with the HTML5 Canvas, we can use the save() and restore() methods of the canvas context.

In this tutorial, we'll save the transformation state by pushing the state onto the state stack immediately before each transformation.  We'll draw a blue rectangle, restore and pop off the last transformation state and draw a red rectangle, restore and pop off the last transformation state and draw a yellow rectangle, and then finally restore and pop off the final transformation state and draw a green rectangle.

comments powered by Disqus