playcanvas
[RFC] Responsive fill mode
Problem
PlayCanvas currently supports:
• FILLMODE_KEEP_ASPECT and FILLMODE_FILL_WINDOW: tied to the window size
• FILLMODE_NONE: allows manual control over the canvas dimensions
However, a common use case - embedding a responsive canvas that fills its container (width: 100%; height: 100%) - requires manually tracking container size and managing updates with FILLMODE_NONE. This is unintuitive and boilerplate-heavy for something that should be simple.
related - https://github.com/playcanvas/react/issues/123
Proposal
Introduce a new fill mode:
FILLMODE_RESPONSIVE - automatically sizes the canvas to fill its parent element using standard CSS dimensions.
This would greatly simplify responsive layouts, especially for apps with embedded or resizable UIs.
Implementation
This could be implemented with a minimal change here, adding a clause to handle the new mode using:
canvas.style.width = '100%';
canvas.style.height = '100%';
The Graphics Device would naturally get the correct dimensions during update via https://github.com/playcanvas/engine/blob/43d0ee2ffa6e0d49dd2350bb1b9f50b717fd2c65/src/framework/app-base.js#L1311-L1314
/cc @willeastcott @mvaligursky @Maksims
Not quite, FILLMODE_WINDOW specifically targets the window size. This is just if you want a responsive canvas that fills a specific container.
In CSS terms, this is called "relative", so could be called "FILLMODE_RELATIVE". For width and height being 100%, does it require a parent element's style to have at least position: relative so it has positioning layout context?
If I understand correctly no, the container would not need position: relative, nor would the canvas need position: absolute. This is just about sizing, not positioning.
An example is having a container sized according to various breakpoints. Ideally the canvas does not need to know those dimensions, it just fills the container regardless. RESOLUTION_AUTO takes care of ensuring the context matches.
I feel 'responsive' is a familiar enough terminology in the flex box and grid layout models for users to understand although it's not official
Responsive in web world - associated with reaction of a style to a different resolutions and aspect ratios: mobile/tablet/desktop.