Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
14. HTML5: Introduction to canvas > 14.20. save and restore Methods
14.20. save and restore Methods
The canvas’s state includes its current style and transformations, which are maintained in a stack. The save method is used to save the context’s current state. The restore method restores the context to its previous state. Figure 14.37 demonstrates using the save method to change a rectangle’s fillStyle and the restore method to restore the fillStyle to the previous settings in the stack.
1 <!DOCTYPE html>
2
3 <!-- Fig. 14.37: saveandrestore.html -->
4 <!-- Saving the current state and restoring the previous state. -->
5 <html>
6 <head>
7 <meta charset = "utf-8">
8 <title>Save and Restore</title>
9 </head>
10 <body>
11 <canvas id = "save" width = "400" height = "200">
12 </canvas>
13 <script>
14 function draw()
15 {
16 var canvas = document.getElementById("save");
17 var context = canvas.getContext("2d")
18
19 // draw rectangle and save the settings
20 context.fillStyle = "red"
21 context.fillRect(0, 0, 400, 200);
22 context.save();
23
24 // change the settings and save again
25 context.fillStyle = "orange"
26 context.fillRect(0, 40, 400, 160);
27 context.save();
28
29 // change the settings again
30 context.fillStyle = "yellow"
31 context.fillRect(0, 80, 400, 120);
32
33 // restore to previous settings and draw new rectangle
34 context.restore();
35 context.fillRect(0, 120, 400, 80);
36
37 // restore to original settings and draw new rectangle
38 context.restore();
39 context.fillRect(0, 160, 400, 40);
40 }
41 window.addEventListener( "load", draw, false );
42 </script>
43 </body>
44 </html>