title: Rotating around an arbitrary point: HTML5 Canvas
body: <p>Come see the amazing disappearing rectangle!</p>
  
  <p>But seriously I have a really simple HTML5 canvas that just draws a rectangle(using lineTo instead of rect <strong>for a reason</strong>). </p>
  
  <p><strong>My Problem:</strong> I am attempting to rotate the rectangle 90 degrees. The rectangle should be rotated 90 degrees but instead it disappears.</p>
  
  <p>In my webapp project I am getting weird x,y placement errors when I rotate my complex polygons in HTML5 canvas', so I have created this simple HTML to test rotation &amp; ensure its rotating around its x,y point of 100,100. But even this has weird results when I attempt to rotate a shape.</p>
  
  <p>Can anyone tell me how to get my rectangle visible &amp; how I can rotate my polygons around a specific point without them completely changing x,y values.</p>
  
  <p>Has anyone experienced this issue with HTML5 canvas' &amp; know solutions to fix this?</p>
  
  <pre><code>&lt;canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;"&gt;
  
  &lt;/canvas&gt;
  &lt;script type="text/javascript"&gt;
  
      var canvas = document.getElementById("testCanvas");
      var dc     = canvas.getContext("2d");
  
      dc.clearRect(0, 0, canvas.width, canvas.height);
  
      dc.save();
      dc.fillStyle = "#FF0000";
  
      dc.rotate( 90*Math.PI/180 );  // rotate 90 degrees
      dc.beginPath();
      dc.moveTo(100, 100);
      dc.lineTo(200, 100);
      dc.lineTo(200,300);
      dc.lineTo(100,300);
      dc.closePath();
      dc.fill();
  
      dc.restore();
  --&gt;
  &lt;/script&gt;
  </code></pre>