title: Canvas draw an image in circular increments?
body: <p>I would like to draw an image in circular (or similar) increments as a progress bar, I had originally wanted to draw this with lines in canvas but I ended up being unhappy with how it looked.</p>
  
  <p>This jsfiddle shows how I would like it to look at 100%, none of the bar would be drawn at 0%, the start and end points of the bar are also marked.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById("test");
  var ctx = canvas.getContext("2d");
  
  var img = new Image();
  img.src = "http://i.imgur.com/Jhteqyx.png";
  
  img.onload = function() {
  
    ctx.drawImage(img,
      0,
      0
    );
  };
  
  
  //game score and level number dont draw over or clear
  ctx.font = 'bold 50px Arial';
  ctx.fillText("LVL NUMBER", 45, 100);
  ctx.fillText(" TOTAL SCORE", 15, 190);
  
  //label only ignore
  ctx.font = 'bold 10px Arial';
  ctx.fillText("end", 57, 25);
  ctx.fillText("start", 125, 25);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="test" width=700 height=700&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I was thinking this could be achieved using additional drawImage parameters, I'm already using this to draw a countdown timer using an image as a fill but I'm not sure how to draw in a circular manner with the added complication of ignoring the middle area?</p>
  
  <pre><code> context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  </code></pre>
  
  <p>This may be the wrong way to approach the problem, is this possible?</p>