Search code examples
javascriptcanvaspaperjs

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

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 I intend to draw on canvas 1, it appears on canvas 2.

In each view, I'm initialize the paper like this: 

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

When I create new paper objects, I use what should be the local scope:

var circle = new this.mypaper.Path.Circle(10, 10, 5);

However, when I create a circle in view1, it draws it in view2 instead.

I've done a lot of reading, but I still haven't found a clear explanation of how to setup multiple paperscopes or how to isolate views from each other.

Does anyone know how to use multiple canvases with paper.js correctly?


EDIT: I've created a jsFiddle to illustrate the problem: http://jsfiddle.net/94RTX/1/

Solution

  • 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.