User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 313

Figure 7-11. Spiral drawn on canvas using trigonometric functions
Canvas state
Setting the fill and stroke style will affect all subsequent graphics created on the current
canvas context. To deal with temporarily changing the fill and stroke style, the canvas
context has two methods, save() and restore() , which are used to save the styles
set and then restore them to the saved state later. When multiple shapes are drawn on the
canvas, these two methods are often used to isolate the stylistic changes applied by each
shape. For instance, in the following code block, three squares are drawn that are out-
lined by the colors red, green, and blue, respectively. A border is then drawn around all
the boxes. Because save() and restore() are used, the final border does not need
a style set because it will be using the original styles:
…
context.save();
context.strokeStyle = "#ff0000";
context.strokeRect(0,0,100,100);
context.restore();
context.save();