Установить соотношение масштаба игры

const ProjectSettings = {
    backgroundColor: 0x333333,
    resolution: [100, 100],
};

const SceneContainers = {
    sceneContent: null,
    sceneCanvas: null,
    phaserGame: null,
    sceneUIDiv: null,

    init() {
        SceneContainers.sceneContent = document.getElementById('content');
        SceneContainers.phaserGame = new Phaser.Game({
            width: ProjectSettings.resolution[0],
            height: ProjectSettings.resolution[1],
            type: Phaser.AUTO,
            parent: SceneContainers.sceneContent,
            backgroundColor: ProjectSettings.backgroundColor,
            scene: [Preloader],
        });
        SceneContainers.sceneCanvas = SceneContainers.phaserGame.canvas;
        SceneContainers.sceneCanvas.classList.add('scene-canvas');

        SceneContainers.sceneUIDiv = document.createElement('div');
        SceneContainers.sceneUIDiv.id = 'scene-ui';
        SceneContainers.sceneContent.appendChild(SceneContainers.sceneUIDiv);
    },
};

const SceneScaler = {
    init() {
        SceneContainers.phaserGame.scale.scaleMode = Phaser.Scale.ScaleModes.RESIZE;
        SceneScaler.fitToScreen();
        window.addEventListener('resize', e => {
            SceneScaler.fitToScreen();
        });
    },

    fitToScreen() {
        const [contentW, contentH] = ProjectSettings.resolution;
        const [windowW, windowH] = [innerWidth, innerHeight];
        const ratio = contentW / contentH;
        const windowRatio = windowW / windowH;
        let scale = windowW / contentW;
        if (windowRatio > ratio) {
            scale = windowH / contentH;
        }

        //SceneContainers.sceneCanvas.width = contentW * scale;
        //SceneContainers.sceneCanvas.height = contentH * scale;
        SceneContainers.phaserGame.scale.resize(contentW * scale, contentH * scale);
        SceneContainers.sceneUIDiv.style.transform = `scale(${scale})`;
        SceneContainers.sceneContent.style.width = `${contentW * scale}px`;
        SceneContainers.sceneContent.style.height = `${contentH * scale}px`;
        SceneContainers.sceneUIDiv.style.width = `${contentW}px`;
        SceneContainers.sceneUIDiv.style.height = `${contentH}px`;
        SceneContainers.sceneContent.style.left =
        SceneContainers.sceneCanvas.style.left =
        SceneContainers.sceneUIDiv.style.left = `${windowW / 2 - (contentW * scale) / 2}px`;
        SceneContainers.sceneContent.style.top =
        SceneContainers.sceneCanvas.style.top =
        SceneContainers.sceneUIDiv.style.top = `${windowH / 2 - (contentH * scale) / 2}px`;
        //SceneContainers.phaserGame.scale.displayScale = new Phaser.Math.Vector2(scale, scale);
    },
};

class Scene extends Phaser.Scene {
    constructor(id) {
        super(id);
    }

    init() {
        this.events.on('shutdown', () => {
            SceneContainers.sceneUIDiv.innerHTML = '';
        });
    }
}

class Preloader extends Scene {
    constructor() {
        super('preloader');
    }

    preload() {
    }

    create() {
        this.add.rectangle(50, 50, 50, 50, 0xff6666);
    }
}

class EntryPoint {
    constructor() {
        this.init();
    }

    init() {
        SceneContainers.init();
        SceneScaler.init();
    }
}

new EntryPoint;

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

html, body {
    background: #333333;
}

#content {
    position: absolute;
    display: inline-block;
}

.scene-canvas {
    position: absolute;
}

#scene-ui {
    display: inline-block;
    position: absolute;
    transform-origin: left top;
}

<script src = "https://github.com/photonstorm/phaser/releases/download/v3.55.2/phaser.min.js"></script>
<div id = "content"></div>