On Dec 7, 2009, at 5:32 PM, Gregg Tavares wrote: > Excuse me if this has already been discussed > > Has there been a proposal for allowing mouse events to go through a canvas > element where it is transparent to the element below? > > As an example, assume you have a canvas element with a triangle rendered into > the top left corner so that half the canvas is opaque and half the canvas is > 100% transparent (Alpha = 0). That canvas is zIndexed to be above other > HTML. It would be nice if it was possible to interact with the visible html > under the transparent part of the canvas but as it is now all browsers treat > the canvas as a rectangle and ignore its transparency so that if the user > attempts to interact with the clearly visible HTML nothing happens. > > One solution that comes to mind is to add an option (css?) that tells the > browser "if alpha = 0 at the place the user clicks then pass the event > through to the element below" > > As a CSS option this could really apply to any tag. <img> for example. The pointer-events CSS property was recently added to Firefox for web (HTML) content: https://developer.mozilla.org/en/CSS/pointer-events
Although the current implementation only supports the values 'auto' and 'none' for web content, it seems like some of the SVG-only values could possibly be used for your example case. Or at the very least, I expect the property could be extended with additional values specifically for similar use cases with web content.