Canvas - Introducing HTML5 - page 152

There are other path methods, which are beyond the scope of
this chapter, that you can use for finer control over the lines and
shapes you draw, including quadraticCurveTo , bezierCurveTo ,
arcTo , rect , clip , and isPointInPath .
When to use Canvas, when to use SVG
Canvas and SVG are both very good drawing APIs, but for different
reasons, and, as with anything, you want to use the right tool for the
job. SVG is a retained-mode API, and the 2D canvas API is an immedi-
ate-mode API.
SVG is vector based, so it handles scaling much better; canvas pro-
duces a bitmap-based image—it doesn't scale, it just zooms. SVG
maintains a tree that represents the current state of all the objects
drawn on-screen (similar to the regular DOM tree that represents the
current document). As this tree is available, it makes it a great candi-
date for interactivity because you can bind to specific objects in the
tree and listen for click or touch events and even do easy hit detection
for games. You can write SVG by hand as it's just XML—and now all
the latest browsers have full support for SVG (except, oddly, Andriod
WebKit browsers) both externally linked and inline alongside HTML5.
But if wrestling XML isn't your cup of tea, desktop tools such as Adobe
Illustrator and Inkscape can export and import SVG graphics which
makes life a little easier.
If you need some convincing of the almighty awesome power of SVG,
have a look at Raphaël, the JavaScript library by Dmitry Baranovskiy
( http://raphaeljs.com ). It uses SVG exclusively and is able to create
some very impressive drawings and animations.
Canvas is effectively an array of pixels that's very well suited to lots of
animations and highly JavaScript-centric applications. It's a lower-level
API when compared to SVG, which means that it's better for when
there isn't mouse interaction. This is because there's no tree maintain-
ing the state of the canvas because you can't hook an event handler
to objects you draw on a canvas—you would have to calculate the
position of the mouse interaction and maintain all the coordinates of
painted objects in memory. Since canvas is JavaScript centric, in your
processing loop you can handle keyboard events on the document
level. Finally, as the canvas is pixel orientated, as illustrated by the
screenshots at the start of this chapter, it's great for pixel pushing.
Each of these technologies has its strengths and weaknesses. As the
developer, it's your job to understand the requirements of your appli-
cation and pick the right one. Good luck!