# How do I make my game fill the entire screen?

**URL:** <https://phaser.discourse.group/t/how-do-i-make-my-game-fill-the-entire-screen/10599>\
**Category:** Phaser 3\
**Created:** [November 5, 2021, 3:38pm UTC](https://phaser.discourse.group/t/how-do-i-make-my-game-fill-the-entire-screen/10599 "2021-11-05T15:38:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ignasi](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ignasi/32/5813_2.png) [@ignasi](https://phaser.discourse.group/u/ignasi)\
**Post date:** [November 5, 2021, 3:38pm UTC](https://phaser.discourse.group/t/how-do-i-make-my-game-fill-the-entire-screen/10599/1 "2021-11-05T15:38:02Z")

</div>

I have a mobile with an infinity display with a small hole for the camera. When I run my game (portrait) black bars appear at the top and bottom of the screen. How do I make my game fill the entire screen?

---

<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:** [November 5, 2021, 3:39pm UTC](https://phaser.discourse.group/t/how-do-i-make-my-game-fill-the-entire-screen/10599/2 "2021-11-05T15:39:45Z")

</div>

👋

You can try scale mode [ENVELOP](https://newdocs.phaser.io/docs/3.55.2/Phaser.Scale.ScaleModes.ENVELOP).

---

<div class="post-metadata">

**Author:** ![DevGame](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/devgame/32/5690_2.png) [@DevGame](https://phaser.discourse.group/u/DevGame)\
**Post date:** [November 5, 2021, 3:55pm UTC](https://phaser.discourse.group/t/how-do-i-make-my-game-fill-the-entire-screen/10599/3 "2021-11-05T15:55:36Z")

</div>

> **[Phaser - Examples - Full Screen Game](https://phaser.io/examples/v3/view/scalemanager/full-screen-game)**
>
> Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

> [@Making a full screen game](https://phaser.discourse.group/t/making-a-full-screen-game/1136):
>
> hi guys im trying, to make my game full screen i am using: scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER\_BOTH, }, i want to draw on the edges of the screen too! what should i do? i also tried using mode: Phaser.Scale.ENVELOP + scene zoom But that caused a huge loss in image quality [image]

---

<div class="post-metadata">

**Author:** ![ignasi](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ignasi/32/5813_2.png) [@ignasi](https://phaser.discourse.group/u/ignasi)\
**Post date:** [November 5, 2021, 11:38pm UTC](https://phaser.discourse.group/t/how-do-i-make-my-game-fill-the-entire-screen/10599/4 "2021-11-05T23:38:22Z")

</div>

It works! but sprites don’t update their coordinates. How can I change the x and y coordinates of the sprites to fit the size of the screen in relation to it?

---

<div class="post-metadata">

**Author:** ![Bananedansunjeu](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bananedansunjeu/32/5822_2.png) [@Bananedansunjeu](https://phaser.discourse.group/u/Bananedansunjeu)\
**Post date:** [November 6, 2021, 4:34pm UTC](https://phaser.discourse.group/t/how-do-i-make-my-game-fill-the-entire-screen/10599/5 "2021-11-06T16:34:09Z")

</div>

“The width and height are automatically adjusted to make the size cover the entire target area while keeping the aspect ratio.”

Show your code and version