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

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