p5.js Instance Mode canvas placement and DOM encapsulation
0 reputation · 09 Aug 2023, 18:53 UTC
Instance Mode Configuration
p5.js Instance Mode is designed to prevent global namespace pollution by encapsulating sketch functions within a local scope. This allows multiple independent sketches to coexist on a single page by passing a sketch object to the p5() constructor.
When integrating these sketches into a complex web application, the canvas must be attached to a specific DOM element to maintain layout integrity. While the constructor accepts a configuration object to define the parent element, there is uncertainty regarding the precise interaction between the instance's internal renderer and the CSS constraints of the target container.
Specifically, it is unclear how the instance handles automatic resizing or centering when the parent element's dimensions change dynamically after the initial setup() execution.
- Does the instance mode provide a native mechanism to synchronize the canvas size with a fluid parent container?
- What is the recommended approach for updating the canvas dimensions without re-instantiating the entire p5 object?