[RFC] Responsive fill mode

[marklundin]

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 - playcanvas/react#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

engine/src/framework/app-base.js

Lines 1311 to 1314 in 43d0ee2

	if (this._resolutionMode === RESOLUTION_AUTO) {
	// Check if the canvas DOM has changed size
	const canvas = this.graphicsDevice.canvas;
	this.graphicsDevice.resizeCanvas(canvas.clientWidth, canvas.clientHeight);

/cc @willeastcott @mvaligursky @Maksims

[mvaligursky]

Sounds great!

[mvaligursky]

But isn't it the same as FILLMODE_FILL_WINDOW ?

[marklundin]

Not quite, FILLMODE_WINDOW specifically targets the window size. This is just if you want a responsive canvas that fills a specific container.

[Maksims]

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?

[marklundin]

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

[Maksims]

Responsive in web world - associated with reaction of a style to a different resolutions and aspect ratios: mobile/tablet/desktop.