title: HTML5 Canvas: Calculating a x,y point when rotated
body: <p>I developing a HTML5 Canvas App and it involves reading a xml file that describes the position of arrows, rectanges and other shapes I need to to draw on the canvas.</p>
  
  <p>Example of the XML layout:</p>
  
  <pre><code>&lt;arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/&gt; 
  &lt;rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/&gt; 
  </code></pre>
  
  <p>If the object is rotated it involves calculating the position of a point(called P the new position of the object after rotation) when rotated around another point(left,top). I am attempting to come up with a general function/formula I can use to calculate this point P but my Maths is a little weak &amp; I cannot identify what arc/tangent formula I am meant to use.</p>
  
  <p><strong>Can you assist me to come up with a formula I can use to calculate point P for rotations that can be both positive &amp; negative?</strong></p>
  
  <p><img src="https://i.stack.imgur.com/X2t9u.png" alt="enter image description here">  </p>
  
  <p>In the above example: point(14,446) is the left,top point &amp; point(226,496) is the mid point of the object when NOT rotated so the point=(left+width/2,top+height/2) and the blue dot is the mid point when rotated. I know how to calulate the length of the line between points (14,446) &amp; (226,496) but not how to calculate the blue point x,y position - BTW: the length of this line is the same as the line between the blue point &amp; (14,446)</p>
  
  <pre><code>len = sqrt( (496-446)^2 + (226-14)^2 );
      = 227.56;
  </code></pre>