Jump to content

CSS on Canvas Shifts Hitzone away from Dragged Sprite


Recommended Posts


When adding CSS border-style or padding to the canvas element, I found that the hit zones of dragged objects shift off the sprite, presumably in proportion to the CSS values.

Below code shows this error (FF & Chrome).  For test.png I used a 100x100 square.  If you try to drag the sprite while the mouse pointer is directly over it, it won't move.  Move the pointer outside & to the left of the sprite & you'll be dragging it.

Even with setting:

   this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE;
   this.scale.pageAlignHorizontally = false; 

this issue still occurs.

I came to this, because I wanted a border or side alley to the left & right of the game canvas in a different color.  It seems Phaser hijacks the entire width & adding padding to wrapper divs showed up outside the entire width, not next to the canvas element.  Anyone know a way to control the padding outside & to the left/right of the canvas element that Phaser creates?

Thank You!


		<script src="assets/js/lib/phaser.js" type="text/javascript"></script>
			window.onload = function () {
				var game = new Phaser.Game(768, 1024, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update });
				function preload() {
					console.log('Hey World');
					this.game.load.image('test', 'assets/img/test.png');

				function create() {
					this.test = this.game.add.sprite(this.world.centerX, this.world.centerY, 'test');
					this.test.anchor.setTo(0.5, 0.5);
					this.test.inputEnabled = true;

				function update() {

			canvas {
				border-color: #ffffff;
				border-width: 3em;
				border-left-style: solid;
				border-right-style: solid;
				border-top-style: none;
				border-bottom-style: none;
				padding-left: 3em;
				padding-right: 3em;
		<div id='game-wrapper'><div id='game'></div></div>




Link to comment
Share on other sites


  • Recently Browsing   0 members

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