Canvas accumulation limits in p5.js global mode
26K reputation · 04 Jul 2022, 17:27 UTC
DOM Overhead During Dynamic Canvas Re-initialization
In p5.js global mode, the createCanvas() function initializes a renderer and attaches a canvas element to the HTML document body. When a sketch requires a dynamic change in resolution or a complete reset of the graphics context, calling createCanvas() again is a common approach to re-initialize the drawing surface.
However, the global mode architecture assumes a single active canvas. There is uncertainty regarding whether subsequent calls to createCanvas() automatically destroy the previous renderer and detach the associated DOM element, or if they simply orphan the previous canvas in the document body.
Given that instance mode provides a remove() method for explicit cleanup, the behavior in global mode remains ambiguous for applications that frequently resize or recreate the canvas.
- Does
createCanvas()perform an internal cleanup of the previous canvas element when called multiple times in global mode? - What is the recommended mechanism to prevent DOM accumulation when re-initializing a global sketch?