# Change the canvas dimension on screen rotation

**URL:** <https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124>\
**Category:** Phaser 3\
**Created:** [April 16, 2019, 2:30pm UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124 "2019-04-16T14:30:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thrandal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thrandal/32/1211_2.png) [@Thrandal](https://phaser.discourse.group/u/Thrandal)\
**Post date:** [April 16, 2019, 2:30pm UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124/1 "2019-04-16T14:30:51Z")

</div>

Hello,

I’m trying to add a new feature on a HTML5 game and I can’t find a way to do it.

I try to change the game orientation during the game itself. When the player rotate the screen (Portrait \> Landscape or Landscape \> Portrait) I want to change the dimensions of the canvas to fit the new orientation.  
I am able to do this with a refresh, but I can’t find a way to do it “live” so far.

Here is a snippet from my game config :

> ```
> if(isPortrait()){
> config = {
> type : Phaser.CANVAS,
> parent:'game',
> scale:{
> mode : Phaser.Scale.FIT,
> autoCenter: Phaser.Scale.CENTER_BOTH,
> width: 735,
> height: 1310,
> },
> backgroundColor: "#000000",
> physics: {
> default: "arcade",
> arcade: {
> gravity: {
> x:0,
> y:0
> }
> }
> },
> scene: [
> Boot,
> SceneIntro,
> ScenePresentation,
> SceneMainMenu,
> SceneMain,
> SceneScore,
> SceneSocialMedia
> ]
> };
> }
> else{
> config = {
> type : Phaser.CANVAS,
> scale:{
> parent:'game',
> mode : Phaser.Scale.FIT,
> autoCenter: Phaser.Scale.CENTER_BOTH,
> width: 1310,
> height: 735,
> },
> backgroundColor: "#000000",
> physics: {
> default: "arcade",
> arcade: {
> gravity: {
> x:0,
> y:0
> }
> }
> },
> scene: [
> Boot,
> SceneIntro,
> ScenePresentation,
> SceneMainMenu,
> SceneMain,
> SceneScore,
> SceneSocialMedia
> ]
> };
> }
> 
> ```

the isPortrait function (pretty dumb and I suspect there is a builtin function)

> ```
> function isPortrait(){
> if(window.innerWidth < window.innerHeight){
> return true;
> }
> else{return false;}
> }
> 
> ```

Is there a way to do it “live” ?  
I already tried to resize the canvas via vanilla JS (changing the DOM properties of it) without any success.

---

<div class="post-metadata">

**Author:** ![theNeedle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/theneedle/32/745_2.png) [@theNeedle](https://phaser.discourse.group/u/theNeedle)\
**Post date:** [April 16, 2019, 7:08pm UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124/2 "2019-04-16T19:08:31Z")

</div>

Checkout [this example.](https://labs.phaser.io/100.html?src=src%5Cscalemanager%5Cfit%20with%20auto%20center.js) And [Here is](https://github.com/photonstorm/phaser3-examples/blob/master/public/src/scalemanager/fit%20with%20auto%20center.js) the source. Scalemanager checks if window is resized or not and will resize game according to what `mode` you have given. I think there is need to give different `height` - `width` in config.

---

<div class="post-metadata">

**Author:** ![Thrandal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thrandal/32/1211_2.png) [@Thrandal](https://phaser.discourse.group/u/Thrandal)\
**Post date:** [April 17, 2019, 8:08am UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124/3 "2019-04-17T08:08:53Z")

</div>

Thanks @theNeedle !

But I already did this.  
My game accept the rotation, the problem is I “need” (well, the marketting dep asks for it, to be honest 😄 ) to do it “live”.

What the game does (don’t mind the scaling problems with the background and stuff, it’s a WIP) :

 ![advergame](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/7c42e1f80a83a5504d3d05e868edafd00c3302f0.png)

But it works only with a refresh, if I don’t refresh the page it does this :

 ![advergame_2](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/2/25434de66c51ec2a1c18f65bc68fbf72ccbdee70.png)

What I looking for is a way to resize the canvas without a refresh. I tried to modify the width/height of the canvas via JS (modifying the DOM attributes of it) and via the resize method in Phaser, unsuccessfully.

---

<div class="post-metadata">

**Author:** ![theNeedle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/theneedle/32/745_2.png) [@theNeedle](https://phaser.discourse.group/u/theNeedle)\
**Post date:** [April 17, 2019, 8:41pm UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124/4 "2019-04-17T20:41:01Z")

</div>

example does work without need to refresh. Maybe you have something different in html or css that is interfering with scale of game. Maybe [this issue](https://github.com/photonstorm/phaser/issues/4361) is the problem.

Check [this post](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555?u=theneedle) as well.

---

<div class="post-metadata">

**Author:** ![Thrandal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thrandal/32/1211_2.png) [@Thrandal](https://phaser.discourse.group/u/Thrandal)\
**Post date:** [April 23, 2019, 11:48am UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124/5 "2019-04-23T11:48:16Z")

</div>

Hi,

I already read this resoruces and examples and it doesn’t do the trick for me. I can change the orientation with no problem and the game is rescaling like a charm but it keeps the orientation it had when the page is loaded.

What I have to do is :

 ![switchOrientation](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/1/18507f31b626b2ea745f597e20685db508164d0c.png)

I tried the examples, like I said, and I tried to get rid of the actual ScaleManager inside Phaser 3 and design my own but I felt it’s like reinventing the wheel (and it’s so time consuming).  
Am I missing something ?

---

<div class="post-metadata">

**Author:** ![LeoSolarz](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/leosolarz/32/1603_2.png) [@LeoSolarz](https://phaser.discourse.group/u/LeoSolarz)\
**Post date:** [June 21, 2019, 1:52pm UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124/6 "2019-06-21T13:52:56Z")

</div>

Hi, I’m having the same issue. I need to reconfigure the canvas size when a user rotates the device. It detects the rotation but I cannot find a way to reconfigure from 9:16 to 16:9

---

<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:** [June 21, 2019, 3:33pm UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124/7 "2019-06-21T15:33:25Z")

</div>

[https://labs.phaser.io/100.html?src=src\scalemanager\orientation%20check.js](https://labs.phaser.io/100.html?src=src%5Cscalemanager%5Corientation%20check.js)

---

<div class="post-metadata">

**Author:** ![IDNMAX](https://avatars.discourse-cdn.com/v4/letter/i/858c86/32.png) [@IDNMAX](https://phaser.discourse.group/u/IDNMAX)\
**Post date:** [August 11, 2020, 6:09am UTC](https://phaser.discourse.group/t/change-the-canvas-dimension-on-screen-rotation/2124/8 "2020-08-11T06:09:45Z")

</div>

Did you solve it？