question about sizing the canvas

[bowlofrice]

Hi,

I am working on adding features to the tutorial game for phaser 2. 

I am currently running into an issue where the scaling for the canvas isn't working. When the browser isn't in full screen mode, the canvas stretches correctly until you reach a certain point then it does this:

https://imgur.com/a/Q5xX9RZ

Also when you go into full screen mode the background breaks and sizing isn't correct.

Looking at the console this is what it says about the console:

<canvas width="2332" height="1288" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: inherit; width: 885px; height: 489px; margin-left: 0px; margin-top: 150px; margin-bottom: -150px;"></canvas>

I believe this second width

width: 885px; height: 489px

 

is the issue, but I have researched into this, and can't figure out a way to change this. 

                      var canvas_width =  window.innerWidth  * window.devicePixelRatio;
                      var canvas_height = window.innerHeight * window.devicePixelRatio;
                     var game = new Phaser.Game( canvas_width , canvas_height, Phaser.AUTO, 'game', { preload: preload, create: create,           update: update })
 

 

* {
    margin: 0;
    padding: 0;
}

html body {
    width: 100%;
    height: 100%;
    background-color:#6ac1f7;
    margin: 0;

}

#game{
    width: 800px;
    
}

canvas {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;

}

 

The rest of the code is here:

https://embed.plnkr.co/gTKkhHfCgqoxI1BCQnnj/

 

I would appreciate any help, thanks a lot!

[bowlofrice]

resolved this issue myself