How to deal with multiple projects in one scope in paper.js

How to deal with multiple projects in one scope in paper.js

Reading Time: 2 minutes

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

First of all, we will see the architecture of Paper.js. When working with PaperScript, each script is run in its own scope, a PaperScope object. Each scope or context holds a row of objects that describe its state, such as a list of open projects, a reference to the active project, a list of views that each represent a canvas element, the currently active view, a list of mouse tools, the currently active tool, etc.

To explain the relation between scopes, projects, views and tools: Each scope can hold one or multiple projects, which are displayed through one or multiple views (each representing a Paper.js canvas). Views are not associated with a specific project, but in fact render all visible projects that have items within the visible area. Tools can work on any project within any view, as long as they belong to the same scope.

So, in this blog we will see that how can we deal with multiple projects in one scope.

First, I am creating a global scope.

xxxxxxxxxx

var scope = new paper.PaperScope();

I have 2 canvas element to deal with :

xxxxxxxxxx

<canvas id="canvas_1"></canvas>

<canvas id="canvas_2"></canvas>

Now i will setup the canvas element in scope which will create separate projects for 2 canvas element.

xxxxxxxxxx

var canvas_1 = document.getElementById('canvas_1');

scope.setup(canvas_1);

​

var canvas_2 = document.getElementById('canvas_2');

scope.setup(canvas_2)

Now, whatever the action we will perform like drawing, it will be drawn at the project which is created later. In our case, all the drawings would happen at canvas_2 project.
But we want to handle these 2 projects separately.

So to handle these projects separately, we have to do following :
1. First, get the view of the canvas by its id :

xxxxxxxxxx

var view_1 = scope.View._viewsById['canvas_1'];

1. And, activate that particular project :

xxxxxxxxxx

view_1._project.activate();

Now whatever you will draw, it will happen on canvas_1.

So conclusion is that if you want to perform drawing on particular canvas project, just get the view of that and activate the project. You are done.

Cheers !!!