Paper.js: No proper way to destroy paper.Scope

[przyb]

I'm using multiple Paper.js canvases by creating a new scope for each of them. The site is driven with AJAX, so I have to destroy unneeded instances when I change the subpages. Unfortunately, there's no such thing as paper.destroy() method that I could call to clear the memory when I no longer need an instance of paper scope. And after I call view.remove(), my console gets full of errors from paper.js core, as the scope keeps trying to use it anyway.

To show you what I'm trying to do, here's a piece of code taken from the constructor:

this.paper = new paper.PaperScope;
this.paper.setup(this.canvas);

And that's how I tried to destroy the instance:

this.paper.view.remove();

And then I remove the canvas from DOM. After doing that, I keep getting the following error on console:

Cannot read property 'ownerDocument' of null

Currently, the only solution I come up with is to reuse scopes and canvases instead of destroying them (using a pool of unused instances instead of constantly creating new ones), so I don't have a huge memory leak. Although that's not the perfect solution as I can't fully get rid of these instances.

So my question is: how to properly completely destroy paper.js instances to prevent memory leaks?

[evanjacover]

I'm running into the same problem. Considering spawning worker threads to handle the drawing to deal with this problem, but that's not ideal.

[lehni]

paper is a a PaperScope object. So there actually is PaperScope#remove() as well as #clear(). Did you try these?

paper.remove();

[BHuys]

I'm having the same problem, I initialize my scope like this:

let scope = new paper.PaperScope; scope.setup(document.getElementById(canvasId));

When my canvas is removed from DOM I clear this scope like this:

scope.remove(); scope.clear(); scope = null;
but for some reason my memory keeps going up each time I create a scope, but doesn't go down when I remove and clear it which results in a crash after some time.

using paper.remove() instead of my code above doesn't work because I'm using specific scopes because I have multiple canvas and I want to be able to clear them individualy. Could it be that cleared scopes are still stored in the main paper object? Is there a way to select and clear scopes by canvas id?

[sasensi]

Resolution of a similar issue is on going here #1538.

[shishirraven]

I am using VueJS and in a v-for loop i have canvases set.
Now on each VueJS DOM Update I am trying to destory the previous Scopes and Recreating the new.

But when I use.
this.paperScopes[i].remove();
this.paperScopes[i].clear();
this.paperScopes[i] = null;

The code runs but the diagram is still visible.

Also a strange thing happens is that Canvas Size starts to grow each time

this.paperScopes[i]  = new paper.PaperScope();
canvases[i]     = document.getElementById('canvas_'+i);
this.paperScopes[i].setup(canvases[i]);
this.paperScopes[i].activate();
var myCircle = new this.paperScopes[i].Path.Circle(new this.paperScopes[i].Point(100, 70), 50);
myCircle.fillColor = 'black';

What is the proper way to destroy the the paperScope and recreate another one?

Any help would be truly appreciated. If I would find an answer I will post back.
Thanks.