How to fill the canvas when resized?

Questions
1

hi,

I’m working on a React app with react-babylonjs. The 3D viewport is declared as:

            <Engine antialias adaptToDeviceRatio canvasId="babylon-js">
              <Scene>
                <arcRotateCamera
                  name="camera1"
                  target={Vector3.Zero()}
                  ...
                />
                <hemisphericLight
                  name="light1"
                  intensity={0.7}
                  direction={Vector3.Up()}
                />
                <CustomMesh />
              </Scene>
            </Engine>

It seems when the canvas width is changed, the height is adjusted automatically to maintain the w:h ratio. How to override this behavior that width and height can be adjusted independently?

2

Let me add @brianzinn to the rescue :slight_smile: He is the daddy of react-babylonjs

3

I think usual way is to use css on the containing div. like:

width: 100%;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */

Any properties non engine-related that you put on <Engine> will flow through to the canvas (ie: HTMLCanvasElement). You can also use css calc for width, if that’s easier, but that’s usually in a wrapping container outside and then the canvas would be left as 100% width/height. I’ve also made adjustments in the past with FOV when it makes sense, but that doesn’t seem to be your issue.