<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>On Dec 7, 2009, at 5:32 PM, Gregg Tavares wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">Excuse me if this has already been discussed<br><br>Has there been a proposal for allowing mouse events to go through a canvas element where it is transparent to the element below? <br><br>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.<br>
<br>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"<br><br>As a CSS option this could really apply to any tag. <img> for example.<font class="Apple-style-span" color="#000000"><font class="Apple-style-span" color="#144FAE"><br></font></font></blockquote>The pointer-events CSS property was recently added to Firefox for web (HTML) content: <a href="https://developer.mozilla.org/en/CSS/pointer-events">https://developer.mozilla.org/en/CSS/pointer-events</a></div><div><br></div><div>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.</div></body></html>