How can I keep the canvas in focus (center) of the camera when the screen size of the browser changes while using Babylonjs?

Question

The user can change the screen size and this distorts the size of the canvas we created and thus the image focus of the camera. To solve this problem, we need to write focusing code.

Answer 1

  relocateCamera_CanvasSize = () => {
        this.engine = this.scene.getEngine();
        this.engine.onResizeObservable.add(() => {
            if (this.scene.getEngine().getRenderHeight() > this.scene.getEngine().getRenderWidth()) {
                camera.fovMode = Camera.FOVMODE_HORIZONTAL_FIXED;
            }
            else {
                camera.fovMode = Camera.FOVMODE_VERTICAL_FIXED;
            }
        });
    }