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

Table of contents
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 tech enthusiast with having around 10 years of experience who loves to solve complex problems with pure quality. He is a functional programmer and loves to learn new trending technologies. His leadership skill is well prooven and has delivered multiple distributed applications with high scalability and availability by keeping the Reactive principles in mind. He is well versed with Scala, Akka, Akka HTTP, Akka Streams, Java8, Reactive principles, Microservice architecture, Async programming, functional programming, distributed systems, AWS, docker.