paper.js how to set up multiple canvases using only javascript

Question

I\'m trying to use paper.js in a webapp, but I\'ve been unable to get it to work with multiple canvases. It\'s like the scopes are getting mixed up between the canvases, so when

Answer 1

I haven't worked with Paper.js extensively, but it seems that each call to Path isn't using the PaperScope from which it's being accessed, but the global paper object. So if you overwrite paper to your desired PaperScope before each instantiation it should work.

See my updated fiddle.

Answer 2

@freejosh's answer works great for 10.2, but the fiddle still re-uses one canvas when upgrading to the latest version (12.2 as of now):

http://jsfiddle.net/ecneto/86qckn2h/1/

It's a simple fix, you can either downgrade, or make use of scope.activate(), which is feels a lot better than overriding paper:

http://jsfiddle.net/ecneto/n91rdp6z/2/

mypapers[0].activate();
var circle1 = new paper.Path.Circle(30, 30, 20);
circle1.style = {
    fillColor: new paper.Color(1, .5, .5),
    strokeColor: "black"
};

mypapers[1].activate();
var circle2 = new paper.Path.Circle(60, 60, 20);
circle2.style = {
    fillColor: new paper.Color(.5, .5, 1),
    strokeColor: "black"
};

Answer 3

In order to more explicitly manage which paperscope you are adding items to, you might consider setting the option insertItems to false.

  var paper1 = new paper.PaperScope();
  paper1.setup(canvasElement);
  paper1.settings.insertItems = false; 

That way, when you create new paper items, they are not automatically added to the paper. So, no matter which scope your paper item was created in, you still decide to add it to one paper or another. For example, you can theoretically do:

  // create a second scope 
  var paper2 = new paper.PaperScope();
  // create a circle in the first scope
  var myCircle = new paper1.Path.Circle(new paper1.Point(100, 70), 50);
  myCircle.fillColor = 'black';
  // add that circle to the second scope's paper 
  paper2.project.activeLayer.addChild(myCircle);

Answer 4

I actually solve this a bit differently:

var scope1 = new paper.PaperScope();
var scope2 = new paper.PaperScope();

When I want to draw in scope1:

scope1.activate();
// now I draw

Similarly when I want to draw in scope 2

scope2.activate();
// now I draw

Answer 5

I think I found the solution: I expanded the fiddle from @freejosh to also work with callbacks (e.g. resize): The trick is to re-fetch the correct scope inside the callback function:

http://jsfiddle.net/rassoh/mx9n3vsf/7/

var mypapers = [];

initPaper(0, $("#canvas1")[0]);
initPaper(1, $("#canvas2")[0]);

function initPaper(id, canvasElement) {
    var mousePosition = new paper.Point(0,0);
    mypapers[id] = new paper.PaperScope();
    paper = mypapers[id];
    paper.setup(canvasElement);
    var myCircle;

    createCircle = function() {
        if( "undefined" !== typeof myCircle) {
            myCircle.remove();
        }
        // this function is called on resize, so we have to re-fetch the scope!
        paper = mypapers[id];
        myCircle = new paper.Path.Circle(30, 30, 20);
        var lightRed = new paper.Color(1, 0.5, 0.5);
        var lightBlue = new paper.Color(0.5, 0.5, 1);
        myCircle.style = {
            fillColor: id === 0 ? lightRed : lightBlue,
            strokeColor: "black"
        };
    }
    createCircle();

    var tool = new paper.Tool();
    tool.onMouseMove = function(event) {
        mousePosition = event.lastPoint;
    };
    paper.view.onFrame = function() {
        if( "undefined" === typeof myCircle) {
            return;
        }
        var dist = mousePosition.subtract( myCircle.position );
        dist = dist.divide( 3 );
        myCircle.position = myCircle.position.add( dist );
    };
    paper.view.onResize = function() {
        createCircle();
    };
}

$(window).resize(function() {
    var width = $(".container").width() / 2;
    var height = $(".container").height();
    // this automatically triggeres paper's onResize event registered above
    mypapers[0].view.viewSize = new paper.Size( width, height );
    mypapers[1].view.viewSize = new paper.Size( width, height );
});

Please note that I also included a simple interaction with the circles, to also test for correct behaviour there.

Answer 6

Use arrays to separated your papers.

this.mypapers = []

var mypaper = new paper.PaperScope();
mypaper.setup($("myCanvasId")[0]);

mypapers.push(mypaper);

mypaper = new paper.PaperScope();
mypaper.setup($("myCanvasId")[1]);

mypapers.push(mypaper);

var circle = new this.mypapers[0].Path.Circle(10,10,5);
var circle2 = new this.mypapers[1].Path.Circle(10,10,10);

EDIT: I've update your js fiddle: http://jsfiddle.net/94RTX/3/

Apparently each setup erase the previous one, so the solution is to do it in this order:

setup canvas 1-> draw canvas 1 -> setup canvas 2 -> draw canvas 2