Rotate coordinates back after rotating game context (geometry)

Question

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?

Brotcrunsher · Answer 1 · 2015-07-08 23:01:47Z

up vote 0 down vote

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".

answered Jul 8 at 23:01

Brotcrunsher
1

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 – jskidd3 Jul 8 at 23:14

Do you have access to the coordinates of the "missile space" inside the world space? – Brotcrunsher Jul 8 at 23:22

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. – jskidd3 Jul 8 at 23:25