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.

Answer 1

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 2

An example of coordinates calculation : Dice roll

Answer 3

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.