title: draw canvas making from one more
body: <p>I'm having a working countdown timer the only thing is i need to show it multiple times and I can't seem to get it working for multiple counters.</p>
  
  <p>The working code : <a href="http://jsfiddle.net/3RpvJ/" rel="nofollow">http://jsfiddle.net/3RpvJ/</a> </p>
  
  <p>I have tried to make more div's like timer1 timer2 enz. but i cant seem to get it working </p>
  
  <pre><code>window.onload = function() {
      canvas  = document.getElementById('timer'),
      seconds = document.getElementById('counter'),
      ctx     = canvas.getContext('2d'), 
      sec     = 180,
      countdown = sec;
  
  ctx.lineWidth = 8;
  ctx.strokeStyle = "#528f20";
  
  var 
  startAngle = 0, 
  time       = 0,
  intv       = setInterval(function(){
  
  
      var endAngle = (Math.PI * time * 2 / sec);
      ctx.arc(65, 35, 30, startAngle , endAngle, false);
      ctx.clearRect(0, 0, 200, 200);
  
      startAngle = endAngle;
      ctx.stroke();
  
      countdown--;
      if ( countdown &gt; 60){
      seconds.innerHTML = Math.floor(countdown/60);
      seconds.innerHTML += ":" + countdown%60;
      }
      else{
      seconds.innerHTML = countdown;
      }
  
      if (++time &gt; sec,countdown == 0 ) 
      { 
          clearInterval(intv),
          $("#timer, #counter").remove(),
          $("#timers").prepend('&lt;img id="theImg" src="http://ivojonkers.com/votify/upvote.png" /&gt;'); 
      }
  
  
  
  }, 10);
  </code></pre>
  
  <p>}​</p>