jQuery 1.4 Animation Techniques - Index of

Context methods
There are two methods that relate directly to the context object returned by the
getContext() method. These are:
Method Usage
[ 267 ]
Chapter 10
save() Saves the current state of the canvas; only transforms are saved, not shapes or
paths.
restore() Restores the saved state.
We can also set a couple of global properties that apply to all shapes on the .
These properties are:
Property Usage
globalAlpha Sets the alpha transparency of shapes. Takes a decimal
between 0.0 and 1.0.
globalCompositeOperation Sets how shapes stack up on top of one another. Can be used
to create masks and clear areas of shapes.
Native shapes
The has just one native shape defined: the rectangle. One important point to note
here is that the element does not have an internal DOM tree—shapes or paths
we draw on the are not created as child elements of the element
and cannot be accessed with standard DOM manipulation methods. They are not individual
objects, they are just pixels. Methods from the scripting API used specifically when working
with rectangles include the following:
Method Usage
clearRect(a, b, c, d) Removes all shapes and paths from an area of the canvas.
Arguments a and b specify the coordinates to begin clearing at
and arguments c and d specify the width and height of the area to
clear.
fillRect(a, b, c, d) Draws a rectangle. Arguments a and b specify the coordinates to
begin drawing at and arguments c and d specify the width and
height of its sides.
strokeRect(a, b, c, d) Draws the outline of a rectangle. Arguments a and b represent the
starting coordinates of the shape and arguments c and d represent
the width and height of its sides.