Canvas Pocket Reference

Name

CRC.transform() — performs an arbitrary transform

Synopsis

void transform(float a, float b,
               float c, float d,
               float e, float f)

Arguments

a, b, c, d, e, f

Six elements of a 3 × 3 affine transformation matrix

Description

The arguments to this method specify the six nontrivial elements of a 3 × 3 affine transformation matrix T:

a c e
b d f
0 0 1

transform() sets the current transformation matrix to the product of the transformation matrix and the T:

CTM' = CTM × T

Translations, scales, and rotations can be implemented in terms of this general-purpose transform() method. For a translation, call transform(1,0,0,1,dx,dy). For a scale, call transform(sx,0,0,sy,0,0). For a clockwise rotation around the origin by an angle x, use:

transform(cos(x),sin(x),-sin(x), cos(x), 0, 0)

For a shear by a factor of k parallel to the X axis, call transform(1,0,k,1,0,0). For a shear parallel to the Y axis, call transform(1,k,0,1,0,0).

Example

// Perform a shear transform
function shear(c,kx,ky) { c.transform(1,ky,kx,1,0,0); }

// Rotate clockwise by theta radians about the point (x,y)
function rotateAbout(c, theta, x, y) {
    var ct = Math.cos(theta);
    var st = Math.sin(theta);
    c.transform(ct, -st, st, ct,
                -x*ct - y*st + x,
                x*st - y*ct + y);
}

See Also

CRC.rotate(), CRC.scale(), CRC.setTransform(), CRC.translate()