# \[SOLVED\] Fullscreen is not really fullscreen?

**URL:** <https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236>\
**Category:** Phaser 3\
**Created:** [July 25, 2019, 1:08pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236 "2019-07-25T13:08:37Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 25, 2019, 1:08pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/1 "2019-07-25T13:08:37Z")

</div>

Hi everyone!

I made a title screen where a user can click an icon which will toggle making the game fullscreen.  
When I click it, the game window becomes fullscreen, but the canvas does not scale up.

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/4315446f99f2d8703c3ed5242a4e145d8ee47009.png)

I am using the following code in my create function:

```
this.fullscreenButton.on('pointerdown', function () {

        if (this.scale.isFullscreen){                
            this.scale.stopFullscreen();
        }
        else{
            this.scale.startFullscreen();
        }
    }, this);

```

I also get this error:  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/8c2ba84df5b51bb01d93eb4e2494ffd683738516.png)

Any ideas on how to fix this, or alternative implementations would be very much appreciated 🙂

---

<div class="post-metadata">

**Author:** ![dude78](https://avatars.discourse-cdn.com/v4/letter/d/a9a28c/32.png) [@dude78](https://phaser.discourse.group/u/dude78)\
**Post date:** [July 25, 2019, 1:17pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/2 "2019-07-25T13:17:29Z")

</div>

What scale mode is used here?

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 25, 2019, 1:22pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/3 "2019-07-25T13:22:40Z")

</div>

I’ve got `mode:Phaser.Scale.FIT` in my game config.

---

<div class="post-metadata">

**Author:** ![dude78](https://avatars.discourse-cdn.com/v4/letter/d/a9a28c/32.png) [@dude78](https://phaser.discourse.group/u/dude78)\
**Post date:** [July 25, 2019, 2:36pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/4 "2019-07-25T14:36:32Z")

</div>

Does this scale mode work properly when you are not in FullScreen?

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 25, 2019, 3:23pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/5 "2019-07-25T15:23:23Z")

</div>

As far as I can see, everything behaves as expected when not in fullscreen.  
I found this thread on Phaser’s GitHub, so I’m wondering if a bug might be to blame here.

> <https://github.com/photonstorm/phaser/issues/4605>

Anyone know if this can be avoided with a different fullscreen implementation? Also how often are new releases of Phaser made?

---

<div class="post-metadata">

**Author:** ![dude78](https://avatars.discourse-cdn.com/v4/letter/d/a9a28c/32.png) [@dude78](https://phaser.discourse.group/u/dude78)\
**Post date:** [July 25, 2019, 3:31pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/6 "2019-07-25T15:31:14Z")

</div>

You can see releases dates on [https://github.com/photonstorm/phaser/releases](https://github.com/photonstorm/phaser/releases)  
as well as on [https://www.npmjs.com/package/phaser](https://www.npmjs.com/package/phaser)

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 25, 2019, 5:45pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/7 "2019-07-25T17:45:35Z")

</div>

Is there an implementation that avoids this bug? I’ve posted about this issue before, but it seems that the implementation that uses `window['game']['canvas'][game.device.fullscreen.request]();` crashes more than just my browser, so I am really stumped for solutions

---

<div class="post-metadata">

**Author:** ![dude78](https://avatars.discourse-cdn.com/v4/letter/d/a9a28c/32.png) [@dude78](https://phaser.discourse.group/u/dude78)\
**Post date:** [July 25, 2019, 5:49pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/8 "2019-07-25T17:49:50Z")

</div>

If you go to the link for bug report you provided above, you’ll find another link:

> **photonstorm** closed this in [67b28d](https://github.com/photonstorm/phaser/commit/67b28d6764b80e1c92db4078d4274aeb8b86bb7f)

I think you can just make changes locally, so you don’t have to wait until another release.

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 25, 2019, 9:39pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/9 "2019-07-25T21:39:15Z")

</div>

I’ve changed phaser.js locally to the lines in the commit:

```
if (fullscreen.keyboard)
            {
                fsTarget[fullscreen.request](Element.ALLOW_KEYBOARD_INPUT)
                .then(this.fullscreenSuccessHandler.bind(this))
                .catch(this.fullscreenErrorHandler.bind(this));
            }
            else
            {
                fsTarget[fullscreen.request](fullscreenOptions)
                    .then(this.fullscreenSuccessHandler.bind(this))
                    .catch(this.fullscreenErrorHandler.bind(this));
            }

```

but the issue still persists…

---

<div class="post-metadata">

**Author:** ![dude78](https://avatars.discourse-cdn.com/v4/letter/d/a9a28c/32.png) [@dude78](https://phaser.discourse.group/u/dude78)\
**Post date:** [July 25, 2019, 11:12pm UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/10 "2019-07-25T23:12:18Z")

</div>

After installing phaser 3.18.1 and writing code you provided at the beginning - I got an error.  
The same error as I got when tried code provided by the link

> Issue: [ScaleManager] TypeError: this…

But when changes were applied binding this, errors gone both for you code and in the “Issue: [Scale…”

I dunno what to do in this case. I have everything run perfectly.

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 26, 2019, 9:24am UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/11 "2019-07-26T09:24:24Z")

</div>

I checked again whether I applied the fix to the right lines in that section of code and I did. Tested it again and I didn’t get the error… but the game is still not scaling to fill the whole screen and stays bound within its dimensions  
This is my entire game.js file with the configs. Do you reckon there are other issues there I’m not seeing?

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

var config = {
  type: Phaser.AUTO,
  mode:Phaser.Scale.FIT,
  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);

```

I also found that I had 2 `<body>` tags in my index.html file, but removing the extra one didn’t help the issue.  
I’ve now tested this on other browsers and the issue persists across all of the ones that support Phaser 3 😰

---

<div class="post-metadata">

**Author:** ![dude78](https://avatars.discourse-cdn.com/v4/letter/d/a9a28c/32.png) [@dude78](https://phaser.discourse.group/u/dude78)\
**Post date:** [July 26, 2019, 9:53am UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/12 "2019-07-26T09:53:26Z")

</div>

Try to do this:

```
scale: {
  mode: Phaser.Scale.FIT,
  parent: "app",
  width: 1024,
  height: 640
},

```

and add `div` in your html with `id="app"`.

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 26, 2019, 10:19am UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/13 "2019-07-26T10:19:36Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/761ff017136e14774d90b9b2e967c6c38e0b707e.png)

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):

> [@Implementing menu keyboard controls](https://phaser.discourse.group/t/implementing-menu-keyboard-controls/1637/2):
>
> Found an example: [https://sbteam.itch.io/surge-breaker](https://sbteam.itch.io/surge-breaker) No source code though disappointed_relieved

---

<div class="post-metadata">

**Author:** ![dude78](https://avatars.discourse-cdn.com/v4/letter/d/a9a28c/32.png) [@dude78](https://phaser.discourse.group/u/dude78)\
**Post date:** [July 26, 2019, 10:22am UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/14 "2019-07-26T10:22:49Z")

</div>

You can simply add `autoCenter: Phaser.Scale.CENTER_BOTH` to your `scale` config object.  
You can always look up examples: [http://labs.phaser.io](http://labs.phaser.io)

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 26, 2019, 10:23am UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/15 "2019-07-26T10:23:24Z")

</div>

Got the centering fixed with  
`autoCenter: Phaser.Scale.CENTER_BOTH`  
in the scale manager.

The menu system is still broken though… I’ll keep trying

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 26, 2019, 10:30am UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/16 "2019-07-26T10:30:08Z")

</div>

Ah! a lot of my object alignment uses `config.height` and `config.width`, so I just changed them all to `config.scale.height` and `config.scale.width` respectively.

Thank you very much @dude78 for your help 🤩

---

<div class="post-metadata">

**Author:** ![dude78](https://avatars.discourse-cdn.com/v4/letter/d/a9a28c/32.png) [@dude78](https://phaser.discourse.group/u/dude78)\
**Post date:** [July 26, 2019, 10:31am UTC](https://phaser.discourse.group/t/solved-fullscreen-is-not-really-fullscreen/3236/17 "2019-07-26T10:31:32Z")

</div>

You are welcome, @ThePandaJam 🙂.