Find vertices of rectangle after rotating it

Question

So I admit I didn't really know how to phrase the question. But a full explanation should help shed some light. Here is what I know. I have a rectanlge drawn on an HTML5 Canvas. I know the points of all 4 corners and the width and height. From this I can calculate the mid-point. What I want to know is if I rotate the rectangle n degress, what the new points will be. So for example I want to rotate it 45deg from the center point. What will the new vertices of the four corners be? Hopefully that fully explains what I'm looking for. Code examples, preferably in JavaScript, would be great. Thanks in advance.

Answer 1

This function calculates what you need. `pivot' is the origin of the rotation (the center of the rectangle in your case).

function rotatePoint(pivot, point, angle) {
  // Rotate clockwise, angle in radians
  var x = Math.round((Math.cos(angle) * (point[0] - pivot[0])) -
                     (Math.sin(angle) * (point[1] - pivot[1])) +
                     pivot[0]),
      y = Math.round((Math.sin(angle) * (point[0] - pivot[0])) +
                     (Math.cos(angle) * (point[1] - pivot[1])) +
                     pivot[1]);
  return [x, y];
};

To convert the degrees to randians:

function degToRad(deg) {
  return deg * Math.PI / 180;
}