title: How to run setInterval() on multiple canvases simultaneously?
body: <p>I have a page which has several <code>&lt;canvas&gt;</code> elements.</p>
  
  <p>I am passing the canvas ID and an array of data to a function which then grabs the canvas info and passes the data onto a draw() function which in turn processes the given data and draws the results onto the canvas. So far, so good.</p>
  
  <p>Example data arrays;</p>
  
  <pre><code>$(function() {
      setup($("#canvas-1"), [[110,110,100],
                            [180,180,50],
                            [220,280,80]]);
  
      setup($("#canvas-2"), [[110,110,100],
                            [180,180,50],
                            [220,280,80]]);
  });
  </code></pre>
  
  <p>setup function;</p>
  
  <pre><code>function setup(canvas, data) {
      ctx = canvas[0].getContext('2d');
      var i = data.length;
      var dimensions = {
          w : canvas.innerWidth(),
          h : canvas.innerHeight()    
      };
      draw(dimensions, data, i);  
  }
  </code></pre>
  
  <p>This works perfectly. <code>draw()</code> runs and each canvas is populated.</p>
  
  <p>However - I need to animate the canvas. As soon as I replace line 8 of the above example;</p>
  
  <pre><code>draw(dimensions, data, i);  
  </code></pre>
  
  <p>with</p>
  
  <pre><code>setInterval( function() { draw(dimensions, data, i); }, 33 );
  </code></pre>
  
  <p>It stops working and only draws the last canvas (with the others remaining blank).</p>
  
  <p>I'm new to both javascript and canvas so sorry if this is an obvious one, still feeling my way around. Guidance in the right direction much appreciated! Thanks.</p>