Phaser Canvas overflow on div

[tduval]

HI all,

I created a simple HTML/CSS layout and put my PHASER.Game Canvas inside a specific div.

var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 200,
    parent: document.getElementById("divPhaser"),
    physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 },
                debug: true
            }
    }
};

console.log("Init Game Config... ", config);
var game = new Phaser.Game(config);

Then I setup a few paraemter to the Phaser canvas to align it inside the div and also to scale it aoccrding to the ratio :

boot.prototype = {
	preload: function(){
        ...
	},
  	create: function(){
                 this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
		 this.scale.pageAlignHorizontally = true;
		 this.game.state.start("...");
	}
}

But then the Canvas is always slightly right-offset of the div, even when I resize the windows or change the resolution.

I attached the screenshot of the "issue"

[samme]

Unrelated, but that physics entry is for Phaser 3 only. Make sure you're using only https://photonstorm.github.io/phaser-ce/global.html#GameConfig.

Game parent should have no padding. See https://photonstorm.github.io/phaser-ce/Phaser.ScaleManager.html#toc-3

Use game.debug.scale(X, Y).

[tduval]

Thanks for your quick reply.

I change the game config to (physicsConfig) :

var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 200,
    parent: document.getElementById("divPhaser"),
    physicsConfig: { arcade: true },
};

Am I right ?

Also, yes I had a padding to the parent div of the canvas, when I remove the padding the canvas fits perfectly inside the div.

But when I create another div (without any padding/margin) inside my parent div and assign Phaser to this div instead of the parent's one, then the Phaser canvas is totally offset in the left...