title: Animate a Canvas circle to draw on load
body: <p>OK Hello.</p>
  
  <p>I've decided to start using HTML canvas for a small project I have.</p>
  
  <p>There's no real start yet. I'm just learning the basics of Canvas and I want to Animate a circle </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;title&lt;/title&gt;
      &lt;style&gt;
        body {
          margin: 0px;
          padding: 0px;
          background: #222;
        }
  
       &lt;/style&gt;
    &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
   &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="myCanvas" width="578" height="250"&gt;&lt;/canvas&gt;
  
      &lt;script&gt;
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 75;
        var startAngle = 1.5 * Math.PI;
        var endAngle = 3.2 * Math.PI;
        var counterClockwise = false;
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 15;
        // line color
        context.strokeStyle = 'black';
        context.stroke();
      &lt;/script&gt;
  
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a fiddle <a href="http://jsfiddle.net/oskar/Aapn8/" rel="noreferrer">http://jsfiddle.net/oskar/Aapn8/</a> of what I'm trying to achieve.
  I'm not to fussed with the "Bounce" effect.</p>
  
  <p>But i basically want it to Draw on page load and stop at the desired Angle of the Arc
  Here's the Fiddle of what I've created so far.</p>
  
  <p><a href="http://jsfiddle.net/skerwin/uhVj6/" rel="noreferrer">http://jsfiddle.net/skerwin/uhVj6/</a></p>
  
  <p>Thanks</p>