HTML5 Game - Using transform() and setTransform()

Equations for general transformations

There are six arguments for transform() and setTransform():

transform(a, b, c, d, e, f) 
setTransform(a, b, c, d, e, f) 

Those six arguments are used in equations that encompass all the equations that we've seen for translating, scaling, and rotating.

x' = ax + cy + e 
y' = bx + dy + f 

The letters a...f represent the six arguments to transform() and setTransform().

The arguments e and f, when combined with a = 1, b = 0, c = 0, and d = 1, represent a pure translation.

Those equations simplify as the follows:

x' = x + e 
y' = y + f 

To scale, you use the arguments a and d, with all the other arguments set to 0.

Those equations simplify to the equations.

x' = ax 
y' = dy 

To rotate about the origin through an angle in radians, use the following arguments:

x' = cos(angle) times x + sin(angle) times y + 0 
y' = sin(angle) times x + cos(angle) times y + 0 

Related Topic