paperjs: animation not working on all dynamically added canvas

Question

Animation not working on multiple dynamically added canvas.

I am trying to add multiple canvas on same page dynamically and would like to animate the objects separately in each canvas.

HTML Code

input id="genCan" type="button" value="Generate" style="width:100px"

Javascript Code

document.getElementById('genCan').onclick = genCanvas;

function genCanvas() {
    var scope = [];
    var bodyEle = document.getElementsByTagName('body');

    for(var i=0; i < 2; i++) {
        var canvasEle = document.createElement('canvas');
        canvasEle.id = "canvas" + i;
        canvasEle.width = 150;
        canvasEle.height = 150;
        canvasEle.style.border = "1px solid black";
        bodyEle[0].appendChild(canvasEle);
    }

    for(var i=0; i < 2; i++) {
        var id = 'canvas' + i;
        scope[i] = new paper.PaperScope();

        //paper = scope[i];
        scope[i].setup(document.getElementById(id));
        //scope[i].activate();

        var circle = new scope[i].Path.Circle(scope[i].view.center, 50);
        circle.fillColor = 'red';
        scope[i].view.onFrame = function(event) {
            var delay = event.count % 60;
            if(delay < 30) {
                circle.fillColor = 'red';
            } else {
                circle.fillColor = 'blue';
            }
        }
        scope[i].view.draw();
    }

    document.getElementById('genCan').disabled = true;
}

https://jsfiddle.net/46zjgo91/2/

Animation is working on only last canvas. I was expecting animation to work on all canvas.

Answer 1

I think that you are having a loop scope problem.
You can find information and workarounds about this in articles here or here or elsewhere on Google.
A simple solution could be to wrap the loop code in a IIFE.

Here is a fiddle demonstrating the solution.

document.getElementById('genCan').onclick = genCanvas;

function genCanvas() {
    var scope = [];
    var bodyEle = document.getElementsByTagName('body');

    for (var i = 0; i < 2; i++) {
        var canvasEle = document.createElement('canvas');
        canvasEle.id = 'canvas' + i;
        canvasEle.width = 150;
        canvasEle.height = 150;
        canvasEle.style.border = '1px solid black';
        bodyEle[0].appendChild(canvasEle);
    }

    for (var i = 0; i < 2; i++) {
        (function() {
            var id = 'canvas' + i;
            scope[i] = new paper.PaperScope();

            //paper = scope[i];
            scope[i].setup(document.getElementById(id));
            //scope[i].activate();

            var circle = new scope[i].Path.Circle(scope[i].view.center, 50);
            circle.fillColor = 'red';
            scope[i].view.onFrame = function(event) {
                var delay = event.count % 60;
                if (delay < 30) {
                    circle.fillColor = 'red';
                } else {
                    circle.fillColor = 'blue';
                }
            };
            scope[i].view.draw();
        })();
    }

    document.getElementById('genCan').disabled = true;
}