Help
The HTML5 canvas element has every experienced Javascript programmer excited. In this excerpt from Ben Henick's HTML & CSS: The Good Parts the author introduces the canvas element and its componants.
The canvas element is
essentially an img
element that’s dynamic instead of static. It is a particular place in a
page, with specific dimensions, where you can dynamically (which is to
say, programmatically) draw images and display animations and so on. It
can be used for things like dynamically generating charts and graphs,
making in-browser drawing/painting applications (or even in-browser
text-editing applications), and creating in-browser games—basically, the
kinds of things that various browser plug-in runtime environments like
Flash currently deliver.
Another way to look at the canvas
element is essentially as one part of a two-part “Canvas feature” that
also includes a programming interface, the CanvasRenderingContext2D API, which in
practice is a necessary part of actually making use of the feature.
Contrast that with the case of other interactive elements that are new
to HTML5, such as the video
element, which can be perfectly useful without needing to be scripted
using their related APIs. But you really can’t do anything with the
canvas element, without using it in
conjunction with the CanvasRenderingContext2D API.
The details of actually developing canvas content basically boil down to
details about programming with the CanvasRenderingContext2D API in Javascript,
which is beyond this scope of this book. The canvas element is less of a markup feature
and more of markup “hook” for hanging some programming on. There are
plenty of examples and write-ups elsewhere to help you get started,
including a chapter in Painting the Web.
If you’re not already an experienced Javascript programmer, canvas should perhaps not be your first
choice for delivering animations and interactive images as part of
your content. Instead, you might want to consider looking into SVG,
and seeing if that does the trick. If you’re primarily a markup author
or designer, you’ll probably find the declarative-programming approach
that SVG uses—which is actually quite similar to the declarative
approach of CSS—much more familiar than the imperative-programming approach on which canvas relies.
HTML and CSS are the workhorses of web design, but using them together to build consistent, reliable web pages is difficult if you're relying on outdated, confusing, and unnecessary HTML hacks and workarounds. With this practical book, you'll learn how to work with these tools far more effectively than is standard practice for most web developers. You'll learn how to connect the underlying theory and design of HTML and CSS to your everyday work habits.
