Y coordinate of rectangle after rotation on canvas. As shown in image the rectangle will be rotated on its center point axis. After rotation and canvas is restored I want to find the new X,Y coordinates like one shown in second image, before rotation points were 50,50 and after rotation they could be 62,40.

I found similar question so I took the images from there but that question is for some WPF and my requirement is JS. How to find coordinates of all corners of rectangle after rotation?

Y coordinate of rectangle after rotation on canvas. As shown in image the rectangle will be rotated on its center point axis. After rotation and canvas is restored I want to find the new X,Y coordinates like one shown in second image, before rotation points were 50,50 and after rotation they could be 62,40.

I found similar question so I took the images from there but that question is for some WPF and my requirement is JS. How to find coordinates of all corners of rectangle after rotation?

• javascript
• html
• canvas

• 4 @Doorknob A quick Google search doesn't really give the answer, or else I wouldn't have stumbled across this post! ;) I'm in a similar situation! – Rutwick Gangurde Commented Feb 6, 2013 at 7:23
• stackoverflow./a/22511805/2106820 – Arfan Mirza Commented Mar 19, 2014 at 16:14

1 Answer 1

I made a simple JavaScript transformation class for this exact purpose.

Using it you can transform arbitrary points by a transform of your making.

When you transform the canvas, transform the Transform object in the same way and then call transformPoint(x, y) to get back the appropriate coordinates.

So in your case calling transformPoint(50, 50) would return about [62, 40], etc.

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

Here's an example: http://jsfiddle/b2fEX/