get clicks through html canvas

user_272594 0
Viewed 24445

I'm seeing a lot of questions about how to get the html5 canvas element to receive mouse clicks, I'm using the canvas as an overlay and the mouse clicks aren't going through to the elements below. I'm loading an image into the canvas, and I thought that might be the problem but I've also tried it with an empty canvas and I get the same result.

Here is an example: with the image: http://www.1luckypixel.com/paranormal/canvas_test.html the link goes to google but it's not registering.

It's my understanding that the canvas is transparent to the mouse by default?

mouse canvas html
9 Answers

Assuming you can't put the links above the canvas...

For new/decent browsers, simply use this CSS:

#canvas { pointer-events:none; }

And a dirty workaround for IE + older browsers (you could remove the dependency on jQuery):

jQuery('#canvas').click(function(e) {
    window.location = jQuery('#element-under-canvas').attr('href');
});

Obviously this only supports anchors as it stands, and you need to know the specific element under the canvas (or can find it using jQuery selector magic).

user_1889260

Setting the canvas styles.pointerEvents to "none" will allow underlying mouse click events to trigger.

this.canvas = this.renderer2.createElement('canvas'); // create the canvas 
this.canvas.style.pointerEvents = "none";
user_48750660
Related