Documentation is unclear on how to "unmount" a canvas.

[srijan-paul]

The doc comment for CanvasSpace#dispose reads:

  Dispose of browser resources held by this space and remove all players. Call this before unmounting the canvas.

However, I've found that simply calling dispose() is not enough to stop the CanvasSpace object's draw loop from being called.
I'm using Pts.js in a Preact application, and for my use case I'd like to delete a CanvasSpace object as soon as my Preact component is unmounted. Of course, only the garbage collector can truly "delete" something, but I want to at least stop it from being referenced in places that causes the draw loop to be called. The code I wrote to do that was (simplified version):

function Component(plot) {
    const canvasRef = useRef(null);
    const [space, setSpace] = useState();
 
    // The callback is called when the component mounts on the DOM
    useEffect(() => {
       const newSpace = new CanvasSpace(canvasRef.current);
       setSpace(newSpace);
       // a clean-up function that is called when the component is unmounted from the DOM.
       return () => { space.dispose(); console.log("space disposed") }
    }, [])

   return <canvas ref={canvasRef}> </canvas>
}

However, I find that even after the clean-up function is run, and space disposed is logged on to the console, the space's draw loop continues to run. It throws an error (this._ctx is undefined) since the canvas element no longer exists after the component has been unmounted.

Either this is a possible bug, perhaps a stray callback to requestAnimationFrame somewhere in the source, or the documentation should be more clear about how to stop a CanvasSpace from having any visible side effects after it has been disposed.

Currently, my solution is to add a space.pause() before the call to dispose, so that the non-existent CanvasRenderingContext2D is at least not referenced in a call to the space's draw loop.
However, this just means that the space exists in memory, and its draw loop isn't being called.

Ideally, when a space has been disposed, the Garbage collector should be free to remove it from the heap.

[williamngan]

Thanks for the detailed description. This looks like a bug where the last frame is not stopped after dispose is called. I will look into a fix for this. Thank you!

[srijan-paul]

So I looked into the source code for CanvasSpace and I think I might have zeroed in on the problem.
requestAnimationFrame here in src/Space.ts but the corresponding call to cancelAnimationFrame does not happen until the last set of players are updated, as can be seen here.

Another problem that may happen is when we call removeAll, we simply set this.players to {}, thereby losing all information about the requestIDs, and they then stay uncanceled.

Or... get this, I'm wrong and it's something else entirely :p

Either way, let me know if you're open to contributions and I'd be happy to take a stab at this!