Bind events to an image with a canvas on top

I have an image in a HTML document with an absolutely positioned Canvas element on top of it, to allow me to draw over the image. This may seem like bad practice, but I am also using a JavaScript library that adds effects to the image when you mouse over it. For this reason, I cannot simply draw the image to the canvas.

However, having the Canvas in front breaks 开发者_开发技巧the JavaScript library, as the image is no longer generating mouse-over events.

Is there any way of having these two bits of functionality simultaneously?

(If needed, I can specify exactly what my problem is, but answers are more useful when they are generic.)

You can use jQuery.trigger or dispatchEvent with initMouseEvent to manually launch event on image.

Simple way to do it bind events to canvas and then pragmatically track if the cursor within the bound of image...

In the end I set the image as the css background of the canvas, then had a transparent png over the top to bind events to and track movement.

I also ended up modifying the library to my own needs, as I couldn't find another way.