Canvas allows you to context.translate, context.rotate and context.scale in order to draw your shape in the position & size you require.

Canvas itself uses a transformation matrix to efficiently track transformations.

• You can change Canvas’s matrix with context.transform
• You can change Canvas’s matrix with individual translate, rotate & scale commands
• You can completely overwrite Canvas’s matrix with context.setTransform,
• But you can’t read Canvas’s internal transformation matrix – it’s write-only.

Why use a transformation matrix?

A transformation matrix allows you to aggregate many individual translations, rotations & scalings into a single, easily reapplied matrix.

During complex animations you might apply dozens (or hundreds) of transformations to a shape. By using a transformation matrix you can (almost) instantly reapply those dozens of transformations with a single line of code.

Some Example uses:

• Test if the mouse is inside a shape that you have translated, rotated & scaled

There is a built-in context.isPointInPath that tests if a point (eg the mouse) is inside a path-shape, but this built-in test is very slow compared to testing using a matrix.

Efficiently testing if the mouse is inside a shape involves taking the mouse position reported by the browser and transforming it in the same way that the shape was transformed. Then you can apply hit-testing as if the shape was not transformed.

• Redraw a shape that has been extensively translated, rotated & scaled.

Instead of reapplying individual transformations with multiple .translate, .rotate, .scale you can apply all the aggregated transformations in a single line of code.

• Collision test shapes that have been translated, rotated & scaled

You can use geometry & trigonometry to calculate the points that make up transformed shapes, but it’s faster to use a transformation matrix to calculate those points.

A Transformation Matrix “Class”

This code mirrors the native context.translate, context.rotate, context.scale transformation commands. Unlike the native canvas matrix, this matrix is readable and reusable.

Methods: