To achieve something similar to the image below using HTML5 canvas one can simply write the following:

var TO_RADIANS = 0.0174532925;
context.translate(30, 20);
context.rotate(30 * TO_RADIANS);
context.drawImage(img, 0, 0);

enter image description here

My problem comes when I want to convert the coordinates from inside the translated/rotated context back to the main context. For example, if a missile were shot from 0,0 inside the translated/rotated context along the X axis, what formula would you use to then convert its position to the outer context?


2 Answers 2


Note the following important identity for augmented isometric affine matrices:

$$ \begin{pmatrix} cos\theta & sin\theta & -(xcos\theta + ysin\theta)\\ -sin\theta & cos\theta & -(-xsin\theta + ycos\theta)\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} cos\theta & -sin\theta & u\\ sin\theta & cos\theta & v\\ 0 & 0 & 1\\ \end{pmatrix} \begin{pmatrix} x\\y\\1\\ \end{pmatrix} = \begin{pmatrix} x\\y\\1\\ \end{pmatrix} $$

where the isometric condition is recognized from: \$cos^2\theta + sin^2\theta=1\$ and \$\begin{pmatrix}u\\v\end{pmatrix}\$ is the translation in world coordinates of your original transformation.

In vector terms, if you think of your original transformation as being $$ \begin{pmatrix} R & T\\ 0 & 1\\ \end{pmatrix} $$

then the inverse transformation, to return to World Coordinates is simply

$$ \begin{pmatrix} R^{-1} & -R^{-1}T\\ 0 & 1\\ \end{pmatrix} $$
where because of isometry the inverse of R is simply the transpose of R, as noted above.

In vector form the initial identity is just
$$ \begin{pmatrix} R^{-1} & -R^{-1}T\\ 0 & 1\\ \end{pmatrix} \begin{pmatrix} R & T\\ 0 & 1\\ \end{pmatrix} \begin{pmatrix} v\\1 \end{pmatrix} = \begin{pmatrix} v\\1 \end{pmatrix} $$

which is readily proved by multiplying out to get first
$$ \begin{pmatrix} R^{-1} & -R^{-1}T\\ 0 & 1\\ \end{pmatrix} \begin{pmatrix} Rv + T\\1\\ \end{pmatrix} = \begin{pmatrix} v\\1 \end{pmatrix} $$

and then reducing the left hand side as $$ \begin{pmatrix} R^{-1}Rv + R^{-1}T-R^{-1}T\\1\\ \end{pmatrix} = \begin{pmatrix} R^{-1}Rv\\1\\ \end{pmatrix} = \begin{pmatrix} v\\1 \end{pmatrix} $$


Note also that the vector form of the identity is not specific to only a 2D space, but applies to any number of spatial dimensions.


You basically found out about transforms and spaces in 2D!

If you enter this "new missile space" via translation followed by a rotation then you have to do the same thing in reverse, multiplied by -1.

missile.rotate(-30 * TO_RADIANS);
missile.translate(-30, -20);

Now your missile is in "world space".

  • \$\begingroup\$ Sadly I don't have access to the rotate/translate functions for where I need to calculate the position. Those functions are only available when drawing the graphics, in this scenario I am purely obtaining the position. Ideally I need to do what the rotate/translation function would do but in JavaScript \$\endgroup\$
    – jskidd3
    Jul 8, 2015 at 23:14
  • \$\begingroup\$ Do you have access to the coordinates of the "missile space" inside the world space? \$\endgroup\$ Jul 8, 2015 at 23:22
  • \$\begingroup\$ I only have access to the coordinates displayed in the image. There is the main context which is the outer one, and then the rotated context inside of that. Both have an x, y axis. \$\endgroup\$
    – jskidd3
    Jul 8, 2015 at 23:25
  • \$\begingroup\$ Okay and do you know by how many degrees you have to rotate? \$\endgroup\$ Jul 8, 2015 at 23:32
  • \$\begingroup\$ For this example we can just say 30 degrees like the image :-) \$\endgroup\$
    – jskidd3
    Jul 8, 2015 at 23:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .