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.

I have 2 canvas element to deal with :

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

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 :

1. And, activate that particular project :

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 !!!

Written by 

Rishi is a Lead Consultant, with experience of more than 7 years. Rishi is product focused developer who loves developing both front-end user interfaces and scalable back-end infrastructure. He is a good team player, quick learner and a humble person. He has good time management skills, aimed to give best results and fully dedicated towards his work & responsibilities. He is able to work as individual and as well as in team. He loves to share his knowledge, therefore he often writes technical blogs.