[whatwg] Passing mouse events through the transparent parts of a <canvas> tag

[Jonas Sicking]

On Mon, Dec 7, 2009 at 7:15 PM, Jason Oster <parasyte at 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