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

context.strokeStyle = "#00ff00";
context.strokeRect(50,50,100,100);
context.restore();

context.save();
context.strokeStyle = "#0000ff";
context.strokeRect(100,100,100,100);
context.restore();

// Rectangular outline will be default black, because
original

style settings were restored con-

text.strokeRect(0,0,200,200);
…

Note Is canvas a Flash killer? You may have heard this question posed, particularly
after Steve Jobs of Apple Inc. famously railed against Adobe Flash in an open letter
in 2010, in which he stated that Flash is an antiquated technology that will soon be
replaced by HTML5 technologies. This was in part spurred on by the creation of the
video element—as video is an area on the Web where Flash dominates—but the
canvas element encroaches a bit onto Flash's territory as well, although the overlap is
limited. Canvas is a scriptable bitmap image optimized for drawing with pixel data, and
it does not include any built-in methods for animation. Canvas uses immediate mode
rendering, meaning it does not store the graphics it displays as separate entities. It's like
actually painting on a real canvas, where paint can be layered on top of the image, but
once on the canvas, it is effectively part of any prior paint that has been applied. Flash
content, on the other hand, is traditionally stored as vector imagery (although it handles
bitmap data as well), and it includes the concept of a display list for its graphics, which
is very much like the DOM for HTML. This means that graphics in Flash are separ-
ated into nodes that can be easily accessed from code for interactive and animation pur-
poses. In many respects, SVG, another graphics technology for the Web, is more akin
to the traditional space of Flash. Therefore, canvas alone does not replace Flash, but
together with other technologies associated with HTML5, it is making the authoring of
content traditionally restricted to Flash possible.

Canvas interactivity

Interacting with canvas graphics is a matter of setting an event handler function on one
of the mouse-related events of the canvas, such as onmousedown , onmouseover , or