Canvas CSS border affects mouse x/y calculations

[botman]

Hello,

 

I couldn't see reference to this, but apologies if I overlooked something obvious. I tried to search for existing bug reports in GitHub or the forum here, but the forum doesn't let me search the word 'border'.

 

I set up a simple example where I had a sprite that could be hovered over/clicked on, etc. E.g:

var foo = game.add.sprite( 100, 100, 'foo' );

foo.inputEnabled = true;

foo.input.useHandCursor = true;

However, I had included a border via CSS around the canvas element Phaser was drawing to. E.g. 

canvas {

border: solid 10px #111;

}

As a result, the calculation for if or not the mouse is over a given sprite is off by whatever the width of the border is. This is on latest Chrome on Windows and Mac.

 

The easy fix for me is to not have the border, but I was scratching my head for a while as to why something seemingly so basic wasn't working. 

 

Simple example here: http://botman.com.au/phaser/test/

 

Thanks for all your hard work!

 

Regards,

Chris

[lewster32]

You probably shouldn't be styling the canvas directly in most cases, but you can always surround the canvas in a div or other wrapping element and then apply the border to that.

[botman]

Yeah I agree, it's certainly easy to get around this, the bigger issue is it should maybe be highlighted in the docs or something, as I originally had the problem on a more complex game I'd been working on and couldn't for the life of me work out why clicking on sprites was out. I thought it might be something to do with scaling, so I spent a few hours stripping back code trying to find the base example that would trigger what appeared to be a bug. In the end it of course wasn't anything in the JS.