quarks Posted April 10, 2018 Share Posted April 10, 2018 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 More sharing options...
namklabs Posted May 8, 2018 Share Posted May 8, 2018 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 More sharing options...
Yiğit Alp Posted February 28, 2021 Share Posted February 28, 2021 Scrollbars in my game. Link to comment Share on other sites More sharing options...
Recommended Posts