get clicks through html canvas

Question

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?

Answer 1

Well the short answer is that you cannot pass the click through.

But the second shortest answer is that you can indeed do anything your heart desires! You just have to be willing to get a little strange with the solution.

The first way I can think of is slightly maddening but easy: For every item behind the canvas, make a similar secret item in front of the canvas. Then put the event you want on the secret item:

<!-- A visible button behind the canvas -->
<button id="but" type="button" style="position: absolute; top: 100px; left: 100px;">Click Me!</button>

<canvas id="can" width="500" height="500" style="position: absolute;"></canvas>

<!-- A near copy of the visible button, but this one is invisible and in front of the canvas! -->
<button id="but" type="button" onclick="alert('click!')" style="position: absolute; top: 100px; left: 100px; opacity: 0;">Click Me!</button>

If you want to see that code in action click here

There are slightly more-insane-yet-more-maintainable ways if you have a hundred things behind the canvas you want to be clickable, but this is probably the easiest to do if you just have 1-3 things you want to click behind a canvas.

Answer 2

I'm not sure how the procedure for this goes but Simon Sarris actually provided the solution in the comments:

Unfortunately my other method won't work in this instance. :( However, you could still mess with opacities until you have something close to what you want. Here's an example of transparent map showing a canvas behind it. It appears as if the green box is on top but it is really just showing through: jsfiddle.net/un9yW/11 Of course, doing this method means there is no way of making a green box to completely cover part of the map, and so on, which is kind of lame. I'll let you know if I think of anything else that will work for your situation. – Simon Sarris 7 hours ago