― I’M SHISHIR RAVEN

WEBSITE & App Builder

Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry’s standard dummy text.

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

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';

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.


Posted

in

,

by

Tags: