playcanvas / playcanvas/engine
[RFC] Responsive fill mode
@marklundin is already working on this.
Since May 6, 2025.
- Dominant language
- JavaScript
- Stars
- 16.8k
- Forks
- 2k
- Avg merge
- 4h 32m
- Merged PRs (30d)
- 222
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.