Shishir Raven

How to use multiple canvas for Paper JS on a single page?

—

by

Shishir Raven
in ,

We can use PaperScope to achieve this. The following is a simple example. 

var scope = new paper.PaperScope();
var scope2 = new paper.PaperScope();

var canvas_1 = document.getElementById('canvas_1');
scope.setup(canvas_1)
var canvas_2 = document.getElementById('canvas_2');
scope2.setup(canvas_2)

scope.activate();
var myCircle = new scope.Path.Circle(new scope.Point(100, 70), 50);
myCircle.fillColor = 'black';

scope2.activate();
var myCircle = new scope2.Path.Circle(new scope2.Point(100, 70), 50);
myCircle.fillColor = 'green';
Demo on JsFiddle

I am currently building a complex application which includes drawing architectural layouts. And I need to make multiple canvases to be working in VueJS loops. Please comment and let me know if anyone has good Ideas about how I can make that happen.

Comments

Leave a Reply