Introduction to Transformations

suggest change

Transformations alter a given point’s starting position by moving, rotating & scaling that point.

You can also do less common transformations, like shearing (skewing), by directly setting the transformation matrix of the canvas using context.transform.

Translate (==move) a point with context.translate(75,25)

Rotate a point with context.rotate(Math.PI/8)

Scale a point with context.scale(2,2)

Canvas actually achieves transformations by altering the canvas’ entire coordinate system.

Canvas transformations are persistent. All New drawings will continue to be transformed until you reset the canvas’ transformation back to it’s default state (==totally untransformed). You can reset back to default with:

// reset context transformations to the default (untransformed) state
context.setTransform(1,0,0,1,0,0);

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:



Table Of Contents