playcanvas / playcanvas/engine

[RFC] Responsive fill mode

Open
#7,645 6 comments 2 reactions 1 assignee View on GitHub

@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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.