Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

474 CHAPTER 12 Drawing with HTML5

FIGURE 12-8 he strokeStyle property, which accepts the same values as fillStyleT

Saving and restoring the drawing state

It is possible to save all the context object properties to a stack, which is a last-in, first-out

(LIFO) collection. This does not save the actual canvas; just the settings are saved. The save

method saves the current settings, and the restore method restores the settings. The follow-

ing example shows the save and restore methods.

function saveRestore() {

var canvas = document.getElementById('myCanvas')

, ctx = canvas.getContext('2d');

ctx.lineWidth = 20;

ctx.strokeStyle = “green";

ctx.lineJoin = 'round';

ctx.strokeRect(20, 20, 50, 50);

ctx.save();

ctx.lineWidth = 10;

ctx.strokeStyle = “red";

ctx.lineJoin = 'bevel';

ctx.strokeRect(100, 100, 50, 50);

ctx.restore();

ctx.strokeRect(180, 180, 50, 50);

}