HTML5 Canvas Transformation State Stack Tutorial

Published on April 9th 2011 by Eric Rowell

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.

Live Demo and Editor new window

Author Bio

Eric Rowell

Eric Rowell 

Eric Rowell is the creator of KineticJS, the founder of MeteorCharts, the founder and chief editor of Html5CanvasTutorials.com, the author of HTML5 Canvas Cookbook, and a senior web developer at LinkedIn. He really likes robots, and dreams of one day building his own Megazord.

Submit an Article

Hi there! Are you looking to promote your website or boost your brand? With nearly one million unique page views per month, HTML5 Canvas Tutorials is a great place to submit HTML5 canvas related articles to help meet your goals.

comments powered by Disqus