title: HTML5 Canvas multi circle issue
body: <p>I have this code that is displaying one circle with a % value, and i'm trying to add another circle next to it who displays another % value.</p>
  
  <p>To do so, i have tried to add another JS code who calls the second ID <code>my_canvas2</code> but the results are one circle with an incremental % value with no ending.</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 ctx = document.getElementById('my_canvas1').getContext('2d');
  
  var al = 0;
  var start = 4.72;
  var cw = ctx.canvas.width;
  var ch = ctx.canvas.height;
  var diff;
  
  function progressSim() {
    diff = ((al / 100) * Math.PI * 2 * 10).toFixed(2);
  
    ctx.clearRect(0, 0, cw, ch);
    ctx.lineWidth = 7;
    ctx.fillStyle = '#09F';
    ctx.strokeStyle = "#09F";
    ctx.textAlign = 'center';
    ctx.fillText(al + '%', cw * .5, ch * .5 + 2, cw);
    ctx.beginPath();
    ctx.arc(80, 80, 70, start, diff / 10 + start, false);
    ctx.stroke();
    if (al &gt;= 65) {
      clearTimeout(sim);
      // Add scripting here that will run when progress completes
    }
    al++;
  }
  var sim = setInterval(progressSim, 25);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="my_canvas1" width="170" height="170" style="border:1px dashed #CCC;"&gt;&lt;/canvas&gt;
  &lt;canvas id="my_canvas2" width="170" height="170" style="border:1px dashed #CCC;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've seen some similars subjects where the issue was the closing path of the first circle, i've tried so, still the same problem. Thanks for helping.</p>