Question

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.

Answer 1

The problem has to do with how closures work. Closures don’t receive a copy of the data, they receive an active reference to it. So when the function is run later, it references a live copy of i and such — which have moved on since you set up the call.

You can fix it like this:

drawLater(dimensions, data, i);

…with this defined elsewhere:

function drawLater(dimensions, data, i) {

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

That works because the closure holds a reference to the arguments to drawLater, rather than to the variables in your loop.

Separately: Shouldn’t you be passing the canvas or its ID into that somewhere?