I have a page which has several <canvas> elements.

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.

Example data arrays;

$(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]]);
});

setup function;

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);  
}

This works perfectly. draw() runs and each canvas is populated.

However - I need to animate the canvas. As soon as I replace line 8 of the above example;

draw(dimensions, data, i);  

with

setInterval( function() { draw(dimensions, data, i); }, 33 );

It stops working and only draws the last canvas (with the others remaining blank).

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.