Firefox fingerprinting protection breaks mouse event handling

[eternal-sorrow]

I noticed some years ago that some html5 games do not work correctly in my browser. The problem is always the same - a click at any point in the canvas always registers as a click at one specific element on the screen. I couldn't pinpoint the issue correctly so I didn't know where to ask help for this, so I just shrugged back then, started Chrome and the game worked as expected in it. Recently I decided to investigate and after a debug session I found that the game in question uses CreateJS and soon I found the culprit:

EaselJS/src/easeljs/display/DisplayObject.js

Line 1326 in c716bf0

var hit = ctx.getImageData(0, 0, 1, 1).data[3] > 1;

CreateJS uses getImageData canvas method to detect a hit on an element. With fingerprinting protection enabled this method returns random noise on Firefox. So CreateJS always detects a hit on the first displayed object, no matter where the click actually happened.

[danzen]

Thanks for letting us know. Just digging around and do not see an easy fix. If anyone knows how other canvas frameworks get around this - or if they do, then please pass along the tip.

[eternal-sorrow]

Just don't use the image extraction to determine the element clicked. Use the click coordinates.

[danzen]

I am not sure that click coordinates will do it without knowing a pixel color at those coordinates. If anyone sees a specific location in the CreateJS code and perhaps a working example of using image coordinates or other, let us know and we can dig further. It was relate to rollover functionality, hitTest, getObjectsUnderPoint, etc.