bowlofrice

question about sizing the canvas

Recommended Posts

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.