Responsive canvas size

the <canvas> element will only stay at initial width and height and not able to change them afterward.

I am trying to set the canvas width and height dynamically when browser window size changes: <Unity unityContent={this.unityContent} className="unityApp" height={this.props.browserWindow.height} width={this.props.browserWindow.width} />

Describe the solution you’d like Make it listen to the height and width props, and change canvas size accordingly

[jeffreylanters]

When using ReactUnityWebGL 8.0.0 for Unity 2020 resizing should work without any problem because Unity no longer creates the canvas by itself.

[sg3s]

On Unity version 2018.3.11f1, without enabling the resizing functionality as provided by the plugin, we were able to get the resolution to adjust by setting the canvas element to 100% dimensions in css.

The canvas width/height are set to exact pixel values on every frame by UnityLoader, after getting the width/height needed based on its parent. You cannot directly set css width/height on the canvas, but an indirect css declaration targeting the canvas does work;

#game-container canvas {
    width: 100% !important;
    height: 100% !important;
}

Assuming #game-container is a position relative or absolute block level element and resizes with content on the page or the window itself the canvas should resize with it.

This also prevents issues when you take into account values such as window.devicePixelRatio to adjust to high DPI devices during frame resolution calculation.