How to map points between 2D coordinate systems

This topic describes how to map points from one 2D coordinate system to another. This can be useful for graphics systems, such as canvas, that do not provide a current transformation matrix (CTM).

An affine transformation is a linear (or first-order) transformation that can relate two 2D coordinate systems, typically through a composition of rotations, translations, dilations, and shears. The following is a possible example:

Assuming a typical screen coordinate system (shown in red), affine transformations are expressed algebraically as follows:

In other words, if we can determine a, b, c, and d, we can calculate the point (x', y') from the point (x, y) and vice versa.

Notice that this system of linear equations has four unknowns. Therefore, we need four equations to determine a, b, c, and d:

In matrix notation, this linear system can be written as:

To determine a through d, we invertM and solve as follows:

Note  Although most modern calculators, as well as a number of mathematical websites (such as WolframAlpha), can easily invert matrices, the symbolic inverse of M is as follows:

 

Now by examining u and M, we see that we only need two known coincident points from each coordinate system:

For example, from the previous diagram, we see that:

Plugging these values into u and M yields:

Taking the inverse of M (approximate values shown) and multiplying by u produces:

That is:

So the transformation equations become:

For example, (x, y) = (37.1, 58.3) maps to the point (x', y') = (-7, -3) as follows:

And the point (x, y) = (54.28, 24.33) maps to the x’y’-origin, as expected:

This transformation technique can be useful for graphics systems that do not provide a current transformation matrix (CTM). Unlike SVG, canvas (as of this writing) does not provide a CTM (that is, there is no canvas.context.getTransform method). Therefore, the technique we've discussed here can be used in a number of scenarios instead. For example, consider a 600 pixel by 400 pixel canvas (in red) with the following implied coordinate system (in green):

For this relatively simple case, the required transformation equations can be derived without using linear algebra, but we do so to exemplify the above procedure. From this diagram, we see that:

Thus,

And,

Therefore,

So the transformation equations become:

That is, (0, 0) maps to (-8, 4) as follows:

And (600, 400) maps to (4, -4) in the same way:

As a final validation, we confirm that (400, 200) maps to the origin of the green coordinate system:

When the transformation equation coefficients are known, you can calculate (x, y) from (x', y') as follows:

To conclude, when a graphical system (such as canvas) does not provide a CTM, the above technique can be used to generate useful transformation equations given two coincident points from both 2D coordinate systems.

Related topics

How To Create 3D Graphics Using Canvas

HTML5 Canvas

SVG Coordinate Transformations