What is the logic behind canvas' transform method signature?

Question

According to http://www.html5samples.com/2010/03/html-5-canvas-the-2d-context-part-1/

This is the signature for the context.transform method context.transform(m11, m12, m21, m22, dx, dy) is to multiply the current transformation matrix with the matrix described by:

m11 m21 dx

m12 m22 dy

 0   0  1

I am trying to figure out what is the logic behind this signature? Why can't you set all the elements of the matrix and why are the arguments listed in column order instead of row order?

DMG DMG · Accepted Answer · 2011-01-30T03:50:13

The reason you can't set the third row of the matrix as you've given it is that the bottom row doesn't correspond to any transformations you're likely to want.

A 2x2 matrix acting on a 2D vector in Cartesian coordinates can only perform linear transformations (scales, skews, and rotations about the origin - not translations).

In order to get affine 2D transformations (including translations), you need to use homogeneous coordinates. What this means in practical purposes is that you bump up to three dimensions, add a dummy "z" coordinate to all your vectors, and whenever you want a 2D translation, you really perform a 3D skew perpendicular to the z axis. That's the third column.

By convention (and for simplicity) the dummy z value is always 1. For practical purposes, it acts as a "translation speed" - doubling it will double the effect of any translations you try to perform. So, we don't want anything to change that z value from 1.

The third row of the matrix as you've written it corresponds to the value of z. As long as that row stays "0 0 1" x and y can't affect z, and it stays at 1. If you could set that row, you could accidentally let x and y "leak" into z, or multiply the value of z, making all your transformations from then on act very strangely. Locking that row prevents this from happening, without taking away any useful transformations.

Of course, that's the theory. In practice, it's unlikely that the software even contains a model of the third row. They just use a special case of the formula that assumes "0 0 1" - so that's the other part of the answer. You can't set it because it doesn't actually exist in the way the software works. ;)

What is the logic behind canvas' transform method signature?

2 Answers