# How to do full screen for phaser 3

**URL:** <https://phaser.discourse.group/t/how-to-do-full-screen-for-phaser-3/5456>\
**Category:** Phaser 3\
**Created:** [March 9, 2020, 9:14pm UTC](https://phaser.discourse.group/t/how-to-do-full-screen-for-phaser-3/5456 "2020-03-09T21:14:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![gio\_nole](https://avatars.discourse-cdn.com/v4/letter/g/ec9cab/32.png) [@gio\_nole](https://phaser.discourse.group/u/gio_nole)\
**Post date:** [March 9, 2020, 9:14pm UTC](https://phaser.discourse.group/t/how-to-do-full-screen-for-phaser-3/5456/1 "2020-03-09T21:14:49Z")

</div>

I am using latest phaser.

I want to know how it’s possible to have full screen. By full screen, i mean i want the game to use the whole space of the parent div element.

This is the config I have

```javascript
var config = {
            type: Phaser.WEBGL,
            scale: {
                mode: Phaser.Scale.Fit,
                autoCenter: Phaser.Scale.CENTER_BOTH,
                parent: parentDiv,
                width: 1920,
                height: 1080
            },

            parent: parentDiv,
        };

```

If i use this config and set the style `(width:100%, height:100%)` to the parent div, what happens is the game is still not shown on the whole screen. It’s shown in the middle. Even though, parent element uses the whole screen. Is this a correct behaviour? I want my game to have full screen for all screen sizes.

Any idea ? is this a good practice? I don’t want to use custom functions for that.

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [March 9, 2020, 9:18pm UTC](https://phaser.discourse.group/t/how-to-do-full-screen-for-phaser-3/5456/2 "2020-03-09T21:18:33Z")

</div>

It’s `Phaser.Scale.FIT`, not `Phaser.Scale.Fit`. Property names in JavaScript are case sensitive.

---

<div class="post-metadata">

**Author:** ![gio\_nole](https://avatars.discourse-cdn.com/v4/letter/g/ec9cab/32.png) [@gio\_nole](https://phaser.discourse.group/u/gio_nole)\
**Post date:** [March 9, 2020, 9:19pm UTC](https://phaser.discourse.group/t/how-to-do-full-screen-for-phaser-3/5456/3 "2020-03-09T21:19:21Z")

</div>

This still doesn’t solve this. Any other ideas?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 9, 2020, 9:50pm UTC](https://phaser.discourse.group/t/how-to-do-full-screen-for-phaser-3/5456/4 "2020-03-09T21:50:02Z")

</div>

Verify that the game canvas is actually inside the parent element.

Verify the actual dimensions of the parent element.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 9, 2020, 9:54pm UTC](https://phaser.discourse.group/t/how-to-do-full-screen-for-phaser-3/5456/5 "2020-03-09T21:54:56Z")

</div>

And see [http://labs.phaser.io/100.html?src=src/scalemanager/fit%20with%20auto%20center.js](http://labs.phaser.io/100.html?src=src/scalemanager/fit%20with%20auto%20center.js).

---

<div class="post-metadata">

**Author:** ![gio\_nole](https://avatars.discourse-cdn.com/v4/letter/g/ec9cab/32.png) [@gio\_nole](https://phaser.discourse.group/u/gio_nole)\
**Post date:** [March 9, 2020, 10:01pm UTC](https://phaser.discourse.group/t/how-to-do-full-screen-for-phaser-3/5456/6 "2020-03-09T22:01:53Z")

</div>

It’s in there. As much as I can understand, FIT means that it might not actually use the whole available space of the parent. Maybe this is why this is happening. what i want it to do is scale and also fill the whole space of the parent.