title: How to redraw canvas (every 250ms) without flickering between each redraw?
body: <p>I wrote a function that draws out a slice of a pizza based on how big you specify it to be (in degrees)</p>
  
  <pre><code>function drawProgress(degs){
  
  var canvas = document.getElementById('progress');
  var context = canvas.getContext('2d');
  
  context.globalAlpha=1;                
  var img = new Image();
  img.onload = function(){
  
      context.beginPath();
      context.arc(canvas.width/2,canvas.height/2, canvas.height/2, 0, degs * (-Math.PI/180), true);
      context.lineTo(canvas.width/2, canvas.height/2);
      context.clip();                        
      context.drawImage(img, 0, 0, canvas.width,canvas.width);
  }                           
  img.src = 'pizza.png';
  
  }
  </code></pre>
  
  <p>When I try to call this function every 250ms, the progress is not updated after the first draw.</p>
  
  <pre><code>function runsEvery250ms(percent){
      drawProgress(3.6 * percent);
  }
  </code></pre>
  
  <p>What changes do I need to make to the code to get the canvas to redraw each time <code>drawProgress(degs)</code> is called?  Is it possible to perform redraws without causing the pizza to flicker?</p>