how to detect point on canvas after canvas rotation

Question

I am working on html5 canvas app in which i draw rectangle on canvas.

1. Canvas is tarnslate to center position
2. Use fillRect function to draw rectangle
3. Canvas is position absolute with respect to its parent div. Its work properly when canvas is at original position but when I rotate canvas 90/180/270 degree i am not able to relate point clicked on screen and point to draw on canvas. For eg: when canvas is at original position i am able to get point click on screen and then transferal that point to canvas point to draw rectangle as per my translate position. But when i rotate canvas by 90/180/270 degree, i am not able to convert that screen point to canvas point. so the shape is drawn at odd/different position then actually click by user.

My Question:

When canvas is rotated, how to translate the point that is click on screen to canvas draw point as per its rotation

Answer 1

I made a tiny transform class for this very purpose:

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

You can then use it like this:

var t = new Transform();
console.log(t.transformPoint(5,6)); // will be just [5,6]
// apply the same transformations that you did to the canvas
t.rotate(1);
console.log(t.transformPoint(5,6)); // will be [-2.347, 7.449]

fiddle:

http://jsfiddle.net/DRf9P/

Answer 2

I am affraid that we will have to use math.

Rotate a point by the negative value of rotation angle to get its position on rotated plane using this equation:

nX = x * cos(a) - y * sin(a)

nY = x * sin(a) + y * cos(a)

where a is negative of rotation value

Your point is now on normal not rotated plane so the rest of logic is just like when angle = 0

Here is a demo fiddle for you:

http://jsfiddle.net/Q6dpP/5/

And here is a version with translation:

http://jsfiddle.net/Q6dpP/6/