[SOLVED] Fullscreen is not really fullscreen?

Phaser 3
13

I’ve got this div in my html file:

<body>
<div id="SerolGame"></div>
</body>

I’ve added changes to my config file so it looks like this:

// game.js
var gameSettings = {
  playerXSpeed: 400,
  playerYSpeed: 1000
}

var config = {
  type: Phaser.AUTO,
  scale: {
mode: Phaser.Scale.FIT,
parent: "SerolGame",
width: 1024,
height: 640
  },
  backgroundColor: 0x000000,
  pixelArt: true,
  scene:[
Boot, 
Title, 
Credits,
Instructions1,
Level1,
Level1Complete,
Instructions2,
Level2,
Level2Complete,
GameOver
  ],
  physics: {
default: 'arcade',
arcade: {
    gravity: {y: 0},
    debug: true
}
  },
  input: {
gamepad: true
  }

};

var game = new Phaser.Game(config);

This helped somewhat. The canvas on startup appears bigger and when I click the fullscreen button I get a fullscreen image.It’s not in the middle though…

image
image1920×1080 54.6 KB

Is there an align setup I’m missing somewhere?

This also broke the menu system I built since posting this issue…
I used yannick’s answer in the following thread (translated to js from ts):