How can I capture an HTML document fragment as an alpha-transparent PNG?

Question

I'm looking for a way of capturing a section of a web page as a transparent-backgrounded PNG. This would mean that the transparent background property would be truly transparent. A root level element, instead of displaying white, would create a png with a transparent background.

However, I suspect the behavior I'm looking for just isn't possible. My next guess at the problem would be to create a canvas element, and somehow draw a html fragment onto the canvas. From there, capturing a PNG is trivial.

To summarise my two questions:

1. Is there a relatively simple way of capturing an HTML document fragment as a PNG, such that a root nodes background: transparent property truly results in transparency?
2. If not, can I draw an HTML document fragment to a canvas element, and if so, will I get the wanted behaviour?

Answer 1

I'm not sure precisely what you intend to capture in #1. Do you want to capture an image of what the user is seeing? I don't think thats possible.

For 2, the ability to draw HTML elements onto Canvas has been requested by various people but there is currently no drawElement() function or anything like it. :(

You can attempt to emulate the elements in Canvas with a ton of drawing, but you certainly cannot know what kind of (say) theme the user has. So if the user has the Hot-dog stand windows theme, there is no way to change your drawing accordingly.

Answer 2

Mozilla has a new experimental feature in its FF 4 beta that supports rendering an actual HTML element as a background of another element.