jQuery 1.4 Animation Techniques - Index of

Canvas Animations
We can set the color of strokes (outlines) or fills, as well as drop-shadows using the
following properties:
Property Usage
fillStyle Sets the color of the fill. Can be set to a CSS color, or a gradient object.
shadowBlur Sets the amount of blur on the shadow.
shadowColor Sets the color of the shadow. Can be set to a CSS color or a gradient
object.
shadowOffsetX Sets the relative position of the shadow along the x axis.
shadowOffsetY Sets the relative position of the shadow along the y axis.
strokeStyle Sets the color of the stroke. Can be set to a CSS color, or a gradient object.
These properties can be set on paths and text as well. They aren't limited strictly to the
native shape.
Paths
Any shape other than a rectangle must be drawn using a path. This gives us a flexible way
of drawing custom, complex shapes. Methods used for creating paths include:
Method Usage
arc(a, b, c, d, e, f) Draws a circular sub-path. Arguments a and b are the
starting coordinates of the sub-path, c is the radius,
d is the starting angle in radians, and e is the ending
angle in radians. The last parameter f accepts a Boolean
indicating whether the sub-path should be drawn
anticlockwise or not.
arcTo(a, b, c, d, e) Draws a circular sub-path to a specified point. Arguments
a and b are the starting coordinates, c and d are the
ending coordinates. Argument e is the radius.
beginPath() Starts a new path.
bezierCurveTo(a, b, c, d, e, f) Draws a sub-path along a Bezier curve, which is a curve
featuring two control points. Arguments a, b, c, and d
represent the coordinates of the two control points and
arguments e and f represent the end coordinates of the
sub-path.
closePath() Closes the path by drawing a line from the current
position to the starting position of the first sub-path in
the current path list.
[ 268 ]