title: Get new x,y coordinates of a point in a rotated image
body: <p>I have Google Maps icons which I need to rotate by certain angles before drawing on the map using <a href="http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerImage" rel="noreferrer">MarkerImage</a>. I do the rotation on-the-fly in Python using PIL, and the resulting image is of the same size as the original - 32x32. For example, with the following default Google Maps marker:
  <img src="https://i.stack.imgur.com/uvFaG.png" alt="icon before rotation">
  , a 30 degrees conter-clockwise rotation is achieved using the following python code:</p>
  
  <pre><code># full_src is a variable holding the full path to image
  # rotated is a variable holding the full path to where the rotated image is saved
  image = Image.open(full_src)
  png_info = image.info
  image = image.copy()
  image = image.rotate(30, resample=Image.BICUBIC)
  image.save(rotated, **png_info)
  </code></pre>
  
  <p>The resulting image is <img src="https://i.stack.imgur.com/ziO3A.png" alt="icon rotated 30 degrees counter-clockwise"></p>
  
  <p>The tricky bit is getting the new anchor point to use when creating the MarkerImage using the new rotated image. This needs to be the pointy end of the icon. By default, the anchor point is the bottom middle [defined as (16,32) in x,y coordinates where (0,0) is the top left corner]. Can someone please explain to me how I can easily go about this in JavaScript?</p>
  
  <p>Thanks.</p>
  
  <p><strong>Update 22 Jun 2011:</strong>
  Had posted the wrong rotated image (original one was for 330 degrees counter-clockwise). I've corrected that. Also added resampling (Image.BICUBIC) which makes the rotated icon clearer.</p>