W3C home > Mailing lists > Public > whatwg@whatwg.org > December 2009

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

From: Jonas Sicking <jonas@sicking.cc>
Date: Mon, 7 Dec 2009 22:03:23 -0800
Message-ID: <63df84f0912072203m26fcc99ap1742547c2cace03e@mail.gmail.com>
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
Received on Monday, 7 December 2009 22:03:23 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:19 UTC