HTML and XHTML Element Reference - HTML and CSS: The Complete Reference - page 200

Name Description Example

Adds a new stop to the gradient.
offset must be a number
between 0 and 1. color must
be a CSS color.

addColorStop(offset,
color)

lg.addColorStop(0,
"#B03060");
lg.addColorStop(0.5,
"#4169E1");
lg.addColorStop(1,
"#FFE4E1");

T ABLE 3-10 CanvasGradient Methods

Name Description Example

Retrieves the last state saved by the save()
function and resets settings to that state.

restore() context.restore();

Adds the current state to the drawing state stack.

save() context.save();

T ABLE 3-11 canvas State Preservation Methods

Name Description Example

Adds a clockwise rotation specified
by angle transformation to the
transformation matrix.

rotate(angle) context.rotate(Math

.PI/8);

Adds the scaling transformation to the
transformation matrix. x and y define
how much to stretch on the x and y
axis respectively.

scale(x, y) context.scale(2, 2);

setTransform (m11,
m12, m21, m22, dx,
dy)

Resets the transformation matrix
to the identity matrix and then calls
transform (m11, m12, m21,
m22, dx, dy) .

context.setTransform
(1, 1, 1 ,0, 0, 0);

transform(m11, m12,
m21, m22, dx, dy)

Multiplies the current transformation
matrix by the matrix defined by:
m11 m21 dx
m12 m22 dy
0 0 1

var sin = Math
.sin(Math.PI/6);
var cos = Math
.cos(Math.PI/6);
context.transform(sin,
cos, -cos, sin, 0, 0);

Adds the translation transformation to
the current transformation matrix. The
transformation moves the origin to the
location specified by (x, y) .

translate(x, y) context.translate

(100, 100);

T ABLE 3-12 Primary canvas Transformation Methods