On Mon, Dec 7, 2009 at 7:15 PM, Jason Oster <paras...@kodewerx.org> wrote: > 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.
Indeed. We've talked about using this CSS property as a way to let only the non-transparent parts of an image receive events. Unfortunately if I recall correctly none of the currently defined values of pointer-events fit that behavior, but the intent would be to add one. In any case I think this CSS property is the way to add the feature you want, and so the discussion is probably best had on the www-style mailing list. / Jonas