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

Share Improve this question Follow edited May 23, 2017 at 12:12 CommunityBot 111 silver badge asked Feb 4, 2013 at 12:59 SandySandy 14.1k2222 gold badges7979 silver badges111111 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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/