Making Canvas Fill Window

Recommended Posts

This may turn out to be more of a CSS question than a Phaser question, but what is the magic formula for making the Phaser canvas exactly fill the browser viewport without any scrollbars? I have tried using window.innerWidth and window.innerHeight and that almost works, but the canvas seems to turn out a little too big and gives me a vertical scrollbar. Even with padding: 0 and margin: 0 on everything (html, body, div, canvas) I end up with a few pixels worth of scroll. The same thing seems to happen in both Firefox and Chrome.

Any suggestions?

Share this post

Link to post
Share on other sites

Try this margin/padding reset in your <head> tag:

* {
	margin: 0;
	padding: 0;

Then, use this JavaScript to set up your game:

var config = {
	type: Phaser.AUTO,
	width: window.innerWidth,
	height: window.innerHeight,
	pixelArt: true,
	scene: {
		preload: function(){},
		create: function(){},
		update: function(){},

var game = new Phaser.Game(config);

Using these, I get a full window canvas in Chrome, Firefox, and Edge with no scrollbars.

I'm not sure what your code looks like, but this works for me.

PS I'm using Phaser 3.3.0.

I hope that helps!

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.