HTML and CSS Reference
In-Depth Information
If you think back to the days of the version of MS Paint that
came with Windows 95, you can imagine some of the func-
tionality of canvas. In fact, Paint has been replicated using the
canvas element, as shown in
Figure 5.1
. Applications that aim
to become full-fledged vector drawing suites (
Figure 5.2
) are
popping up all over the Web (whereas Scalable Vector Graphics
[SVG] would be a better choice—see the “When to use Can-
vas, when to use SVG” sidebar later in this chapter). As these
applications are based on Open Web technology, they work in a
browser on more devices, too. The Harmony application shown
in
Figure 5.3
even works on mobile devices, including the
iPhone and Android phones.
The 2D API is large enough that I suspect we'll see entire topics
dedicated to the subject. Since I have only one chapter to talk
about it, I'll primarily show you the basics. But I'll also include
some of the funky stuff you can do with the canvas element, like
capturing frames from a video or processing individual pixels
from an image inside the canvas. I'll even show you how to
export to files ready to be saved to your desktop. And I'll show
you how to create your first animation, which might even hark
back to the days of BASIC computing.
FIguRE 5.1
MS Paint
replicated using the canvas
element.
