O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – saving and restoring

Now, about those savePen() and restorePen() methods. Let's go on over to canvas2d.js and add them to the Canvas2D object. We could keep track of the current properties ourselves, but the canvas API provides an easier way.

The canvas API contains both save() and restore() methods. Any time you need to save the state of the context you call save() and it pushes the state of the context on to a stack. When you want to restore the context state you call restore() and it pops the state off the stack back into the context. This allows you to save and restore the state multiple times recursively.

This works great for situations where you may have a library of drawing functions that could be drawn in any order at runtime. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required