title: rotate circle canvas javascript
body: <p>I am experiencing trouble in rotating a circle with HTML5 canvas.  I am creating a a circle which functions as a loading guage.  Right now, the loading portion (lime green color) begins at the at the 45 degree mark.  I can't seem to figure out how to get this portion to begin at the 0 degree mark.  Any help will be greatly appreciated.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;guage&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
      &lt;p&gt;Your browser does not support canvas.&lt;/p&gt;
      &lt;script src="http://127.0.0.1:3000/guage.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And for the Javascript:</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  //background color
  ctx.fillStyle = "rgb(52, 70, 105)";
  ctx.fillRect(0, 0, canvas.height, canvas.width);
  
  //drawing circle
  ctx.beginPath();
  ctx.lineWidth = "20";
  ctx.strokeStyle = "rgb(66, 70, 67)";
  ctx.arc(150,125, 75, 0, 2 * Math.PI);
  ctx.stroke();
  
  //generate random number between 0.01 and 1.99 since
  //fill of circle is created with respect to radians.
  var precision = 3;
  var rando = parseFloat(Math.min(0.01 + (Math.random() * (1.99 - 0.01)),1.99).toFixed(2));
  //calculate percent for display in center.
  var percent = Math.round((rando * 500) / 10);
  
  //Create fill for circle
  var angle = 90 * (Math.PI / 180);
  ctx.beginPath();
  ctx.lineWidth = "20";
  ctx.strokeStyle = "rgb(24, 242, 92)";
  ctx.arc(150,125, 75, 0, rando * Math.PI);
  ctx.stroke();
  
  
  //Create percent in middle of circle
  ctx.font = "20px Verdana";
  ctx.fillStyle = "rgb(24, 242, 92)";
  ctx.fillText(percent +"%", 135, 135);
  </code></pre>
  
  <p>Here is a screenshot of the output in a browser: 
  Is there a way to rotate the circle back by 45 degrees?  Or do any of you have an alternative suggestion that I have completely neglected to try in this example?</p>
  
  <p>Thanks in advance!</p>