Jump to content

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?

Link to comment
Share on other sites

  • 4 weeks later...

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!

Link to comment
Share on other sites

  • 2 years later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...