HTML5 Canvas: Calculating a x,y point when rotated

Question

I developing a HTML5 Canvas App and it involves reading a xml file that describes the position of arrows, rectanges and other shapes I need to to draw on the canvas.

Example of the XML layout:

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

If the object is rotated it involves calculating the position of a point(called P the new position of the object after rotation) when rotated around another point(left,top). I am attempting to come up with a general function/formula I can use to calculate this point P but my Maths is a little weak & I cannot identify what arc/tangent formula I am meant to use.

Can you assist me to come up with a formula I can use to calculate point P for rotations that can be both positive & negative?

In the above example: point(14,446) is the left,top point & point(226,496) is the mid point of the object when NOT rotated so the point=(left+width/2,top+height/2) and the blue dot is the mid point when rotated. I know how to calulate the length of the line between points (14,446) & (226,496) but not how to calculate the blue point x,y position - BTW: the length of this line is the same as the line between the blue point & (14,446)

len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;

Answer 1

It is quite simple. In rotation around the origin of the coordinate system for angle Theta coordinates (x,y) are changing as

x' = x * cos(Theta) - y * sin(Theta);
y' = x * sin(Theta) + y * cos(Theta); 

So, all that you need is to translate point of rotation to one of the points that you have. Lets write it in a more simplified way: (x1,y1) = (14,446) and (x2,y2) = (226,496). You are trying to "rotate" (x2,y2) around (x1,y1). Calculate (dx2,dy2) in a new coordinate system with the origin at (x1,y1).

(dx2,dy2) = (x2-x1,y2-y1);

Now rotate (positive angles are counterclockwise):

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees);
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees);

The last step is to translate coordinates of the point from the origin at (x1,y1) back to the original (0,0);

x2' = dx2' + x1;
y2' = dy2' + y1;

ps: read also this :) http://en.wikipedia.org/wiki/Rotation_matrix and do not forget that most trigonometric functions in different programming languages deal mostly with radians..

pps: and I hope that I did not scared you - ask if you have any questions.

Answer 2

I think in your case you should be able to calculate this rotation position with the following system of equations:

x = R * Math.cos(angle - angle0);
y = R * Math.sin(angle - angle0);
angle  = deg * Math.PI / 180;
angle0 = Math.atan(y0/x0);

R the length of yor radius vector (len in your example).
deg angle in degrees you are rotating to, i.g 120°
x and y the coordinates of the final position your are looking for.
angle is the actual rotation angle (in rad, not grads).
angle0 is the initial angle point was rotated to relativly to the X-axis. We need to precalculate it using Math.atan.

Haven't tested. So give it a try. But the idea is like that same - make use of trigonometric functions.

Answer 3

An example of coordinates calculation : Dice roll