title: How to draw multiple canvas elements with animation using javascript?
body: <p>I took a sample to draw gauge chart with animation from thecodeplayer.com and was trying to create a common javascript which we can use to create multiple such gauge charts on the same page. I created a sample code but all the gauge charts of canvas are being created at one place one over the other. I figured out that it has something to do with the setInterval animation but I am not able to understand how to fix it. </p>
  
  <p><strong>Updated Answer</strong> :</p>
  
  <p>Fixed the problem by putting getContext() for canvas inside _init() function to point to each canvas separately.</p>
  
  <p>The updated fiddle is present at <a href="http://jsfiddle.net/QsMVn/4/" rel="nofollow">http://jsfiddle.net/QsMVn/4/</a> </p>
  
  <p>In case, it does not work, here's the updated code :</p>
  
  <p><strong>HTML</strong> :</p>
  
  <pre><code>&lt;div id="A" style="border: 2px solid yellow"&gt;&lt;/div&gt;
  
  &lt;div id="B" style="border: 2px solid red"&gt;&lt;/div&gt;
  
  &lt;div id="C" style="border: 2px solid green"&gt;&lt;/div&gt;
  
  &lt;div id="D" style="border: 2px solid white"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong> :</p>
  
  <pre><code>var gaugeConfig = { "canvasHolderId": "A", "width": "300", "height": "300", "circleColor": "#222", "arcColor": "#00ff00", "canvasFillColor": "#333", "textPosition": "inside" }
          var gaugeConfig1 = { "canvasHolderId": "B", "width": "400", "height": "400", "circleColor": "#acacac", "arcColor": "#0000ff", "canvasFillColor": "#333", "textPosition": "inside" }
          var gaugeConfig2 = { "canvasHolderId": "C", "width": "500", "height": "500", "circleColor": "#444", "arcColor": "#ff0000", "canvasFillColor": "#333", "textPosition": "inside" }
          var gaugeConfig3 = { "canvasHolderId": "D", "width": "600", "height": "600", "circleColor": "#ccc", "arcColor": "#000000", "canvasFillColor": "#333", "textPosition": "inside" }
  
          function drawGauge(gc) {
  
              var W = gc.width;
              var H = gc.height;
              var degrees = 0;
              var new_degrees = 0;
              var difference = 0;
              var color = gc.arcColor;
              var bgcolor = gc.circleColor;
              var text;
              var animation_loop, redraw_loop;
              var me = this;
              var canvasHolder = document.getElementById(gc.canvasHolderId);
              var canvasCreator = document.createElement("canvas");
  
              canvasCreator.id = _randomId();
              canvasCreator.width = gc.width;
              canvasCreator.height = gc.height;
              canvasHolder.appendChild(canvasCreator);
              var canvas = document.getElementById(canvasCreator.id);
  
  
              function _randomId() {
                  var d = new Date();
                  return "canvas" + d.getFullYear() + "" + d.getMonth() + "" + d.getDay() + "" + d.getHours() + "" + d.getSeconds() + "" + d.getMilliseconds()*Math.random();
              }
  
              function _init() {
  
                 // alert(canvasCreator.id)
  
                  ctx = canvas.getContext("2d");
                  //Clear the canvas everytime a chart is drawn
                  ctx.clearRect(0, 0, W, H);
  
                  //Background 360 degree arc
                  ctx.beginPath();
                  ctx.strokeStyle = bgcolor;
                  ctx.lineWidth = 30;
                  ctx.arc(W / 2, H / 2, W / 3, 0, Math.PI * 2, false); //you can see the arc now
                  ctx.stroke();
  
                  //gauge will be a simple arc
                  //Angle in radians = angle in degrees * PI / 180
                  var radians = degrees * Math.PI / 180;
                  ctx.beginPath();
                  ctx.strokeStyle = color;
                  ctx.lineWidth = 30;
                  //The arc starts from the rightmost end. If we deduct 90 degrees from the angles
                  //the arc will start from the topmost end
                  ctx.arc(W / 2, H / 2, W / 3, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
                  //you can see the arc now
                  ctx.stroke();
  
                  //Lets add the text
                  ctx.fillStyle = color;
                  ctx.font = "50px bebas";
                  text = Math.floor(degrees / 360 * 100) + "%";
                  //Lets center the text
                  //deducting half of text width from position x
                  text_width = ctx.measureText(text).width;
                  //adding manual value to position y since the height of the text cannot
                  //be measured easily. There are hacks but we will keep it manual for now.
                  ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
              }
  
              function _animate_to() {
                  //clear animation loop if degrees reaches to new_degrees
                  if (degrees == new_degrees)
                      clearInterval(animation_loop);
  
                  if (degrees &lt; new_degrees)
                      degrees++;
                  else
                      degrees--;
  
                  _init();
              }
  
              function _draw() {
  
                  if (typeof animation_loop != undefined) clearInterval(animation_loop);
  
                  new_degrees = Math.round(Math.random() * 360);
                  difference = new_degrees - degrees;
  
                  //time for each frame is 1sec / difference in degrees
                  animation_loop = setInterval(function () { _animate_to() }, 1000 / difference);
  
              }
  
              _draw();
              redraw_loop = setInterval(function () { _draw(); }, 2000); //Draw a new chart every 2 seconds
          }
  
  
  
         new drawGauge(gaugeConfig);
         new drawGauge(gaugeConfig1);
         new drawGauge(gaugeConfig2);
         new drawGauge(gaugeConfig3);
  </code></pre>