[webkit-dev] enhancement - html hole element

[Timothy Hatcher]

I don’t think this belongs in WebKit — it is not a feature post browsers need. You could easily implement this niche feature using <object> that hooks in your own native code. An object gets told when it resizes without the need for JavaScript events.

— Timothy Hatcher

> On Sep 18, 2014, at 9:22 AM, Julien Isorce <j.isorce at samsung.com> wrote:
> 
> Hi,
> 
> A typical scenario when running WebKit in an embedded environment like a TV or STB is to "punch through" graphics to the video plane.
> 
> At Samsung Research UK we have developed a new <hole> element  that acts much like a <canvas> to
> 
> - Expose a rectangular "hole" in a web page.
> - Support a mechanism to retrieve the position and size of the hole from JavaScript whenever its dimensions or location change.
> 
> We realise that there is currently no W3 specification for this element, but since our solution works we wanted to open the discussion to see if there is any wider interest, and if there is, to start the process of drafting a specification. Some details:
> 
> - Principle:
> 
> A hole is a rectangular area that behaves pretty much like a canvas, but everything in its area is transparent.
> Every layer behind the hole is transparent in this rectangle.
> In JavaScript you can register a handler which is notified when the hole position or size changes.
> 
> - Use case:
> 
> On TV this is useful to see the channel displayed behind the browser. Retrieving the hole's position and size
> from JavaScript allows to rescale the TV channel plane to match the hole area whenever the hole changes.
> Assume in JavaScript we have an object to control the TV channel plane.
> This use case applies in many interactive TV applications, so it could be useful for a lot of people.
> 
> - Interfaces:
> 
> We have defined a new tag <hole> which  is similar to the <canvas> tag.
> We have defined a "geometrychanged" JS event which is sent when the hole dimensions change.
> This event contains the hole width, height and position in screen coordinates.
> 
> - Hole in canvas:
> 
> A hole tag has been defined to be less intrusive and having the feature in separate places in the code.
> But we now think it may be better to actually put the "hole" capabilities under the canvas.
> For example <canvas style="background:hole;">
> 
> Note that setting it as transparent is not enough to have a hole as the layers behind the canvas won't be necessarily transparent, and not only in its area.
> The whole point of the hole capability is to make transparent every layers behind the hole and only in a specific rectangle.
> 
> - Next steps:
> 
> I would be very interested to hear if there are any other developers who need this functionality. If so, let's discuss the best way to share it, or possibly do it a better way.
> 
> Comments are welcome.
> 
> Julien
> 
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> https://lists.webkit.org/mailman/listinfo/webkit-dev