title: how to get crop coordinates after a rotation javascript
body: <p>I need to retain coordinate information following a rotation and am struggling with the necessary math.</p>
  
  <p>I have an image, with certain crop coordinates.  These coordinates are given as the following object:</p>
  
  <pre><code>{
        h:  139.68333435058594,
        w:  139.68333435058594,
        x:  60.31666564941406,
        x2: 200,
        y:  80,
        y2: 219.68333435058594
  }
  </code></pre>
  
  <p>I am then rotating this image (it is a canvas element) but I would like the new coordinates to accurately reflect the rotation, leaving the original crop intact.  </p>
  
  <p>e.g. if the top left quarter of a 400x400 image is selected the returned coordinates would be x:0, y:0, x2:200, y2:200.  When rotated -90 degrees to the left, the new coordinates should be : x:0, y:200, x2:200, y:400.</p>
  
  <p>How would I write a function to calculate these new coordinates?</p>
  
  <p>Many thanks.</p>
  
  <p>To help visualize this question properly I have included a quick image:</p>
  
  <p><img src="https://i.stack.imgur.com/CmbLn.png" alt="enter image description here"></p>
  
  <p><strong>EDIT:</strong> The large square in the image above is the photo that I am rotating.  It is being rotated around its midpoint and the crop coordinates are relative to the image itself. Upon rotation the actual coordinate plane is reset prior to recalculating the new coordinates meaning that the top left point of the image/container will always be 0,0.</p>