Jump to content

Making Canvas Fill Window


quarks
 Share

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:

<style>
* {
	margin: 0;
	padding: 0;
}
</style>

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...

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...
 Share

  • Recently Browsing   0 members

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