IE 8 Canvas Workaround

Here's what I learned since my last post.

Putting an element with no background over the shape, stroke and fill elements used internally by excanvas does not stop them picking up mouse events through that element. This can cause undesirable behavior as your invisible element doesn't receive the mouse events you expect. The shape/stroke/fill elements seem to steal mouse events from the invisible element. This happens even if you give them a lower zOrder than the invisible element.

I found 2 ways to solve this:

1. Accept it and give the shape, stroke and fill elements mouseover/out/move handlers to catch the events that bleed through to them.
2. Give the invisible element a background-color and a very low opacity. Then no events bleed through to the shape, stroke & fill elements. I used an opacity of 0.01 and couldn't see the element.

I've decided to go with door number 2. I'd rather make a couple of CSS changes than have extra event handlers.

Unfortunately, your mileage may vary.