jQuery 1.4 Animation Techniques - Index of

Canvas Animations
Subjects that we'll look at in this chapter will include:
The API
Drawing to the
Animating the
Using with jQuery
in IE and the alternatives
Creating a based game
The canvas API
The element comes with a rich scripting API that exposes methods and properties
allowing us to define and control the shapes that are drawn on the canvas. The API can be
broken down into distinct sections depending on what the methods do.
The canvas element
The element itself has a couple of methods that can be called on it, including:
Method Usage
getContext(a) Returns an object (a CanvasRenderingContext2D object to be precise) which
can then have other methods from the API called on it to manipulate the
. The argument specifies the type of context to retrieve. Only
two dimensional contexts are available at present.
toDataURL() Returns a data URL representing the image on the . Optional
arguments include the type of image represented by the data URL (with the
default being image/png), and any arguments specific to the type, such as
the quality for image/jpg data URLs.
The element can be thought of as being similar to an element that doesn't
have an src attribute. Allowed attributes include the width and height of the element, an
id and a class, among others. There are no special attributes associated with the canvas,
although it can contain other elements. When the browser cannot display the ,
it can display the element's content as a fallback. The only properties of the
element we have access to, are the width and height. Setting either of these properties
causes the to reset its contents to nothing, which can be useful when we want
to clear it.
[ 266 ]