In my web project, I am utilizing multiple Paper.js canvases by creating a new scope for each of them. Due to the AJAX-driven nature of the site, I need to get rid of unnecessary instances when switching between subpages. Unfortunately, there is no built-in method like paper.destroy() that allows me to easily clear the memory once an instance is no longer needed. After attempting to call view.remove(), I found that my console was bombarded with errors from the paper.js core, as the scope continued trying to access it.
Here is a snippet of code from the constructor to illustrate what I am facing:
this.paper = new paper.PaperScope;
this.paper.setup(this.canvas);
I attempted destroying the instance in this way:
this.paper.view.remove();
Subsequently, I removed the canvas element from the DOM. Yet, despite these actions, the following error persisted in the console:
Cannot read property 'ownerDocument' of null
My current approach involves reusing scopes and canvases instead of outright destroying them (maintaining a pool of unused instances rather than continually generating new ones) to avoid substantial memory leaks. While somewhat effective, this workaround does not completely resolve the issue of lingering instances.
Hence, my inquiry is: What is the correct procedure to fully eliminate paper.js instances and prevent memory leaks?