question about sizing the canvas

Recommended Posts


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:

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%;
    margin: 0;


    width: 800px;

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



The rest of the code is here:


I would appreciate any help, thanks a lot!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.