Saving and restoring canvas state
This recipe is based on the concept of stack. You can imagine a stack of books. Say, for example, I have to pick up a book from a stack of three books. It's always logical and easy to pick up the top-most book, read it, and keep it aside. Then I pick another book from the two-book stack, read it, and keep it aside. Then I pick the last book, read it, and keep it aside.
States of canvas work in a similar way. Let's see the output of the recipe:
How to do it…
The recipe for the previous output goes like this.
The HTML code:
<html> <head> <title>Canvas Save And Restore</title> <script src="CanvasSaveRestore.js"></script> </head> <body onload="CanvasSaveRestore()"> <canvas id="MyCanvasArea" width="500" height="200" style="border:2px solid blue;" > your browser does not support canvas </canvas> <h1>Canvas Save And Restore</h1> </body> </html>
The JavaScript code:
function CanvasSaveRestore...
