Using HTML5/Canvas/Javascript to take screenshots

Gecko has a really nice css feature called -moz-element (<a href="https://developer.mozilla.org/en/CSS/-moz-element" rel="nofollow">https://developer.mozilla.org/en/CSS/-moz-element</a>) that can be used to apply a _live_ view of a dom subtree as the background of another element.<p>People have done some awesome stuff with this, such as reflections, transition effects, and even recreating the blurred aero skin, by combining it with svg effects.<p><a href="http://hacks.mozilla.org/2010/08/mozelement/" rel="nofollow">http://hacks.mozilla.org/2010/08/mozelement/</a> <a href="https://developer.mozilla.org/media/uploads/demos/D/a/David%20Mulder/c65123ae9f13eaf293101077308a23f0/aero-windows_1316465302_demo_package/index.html" rel="nofollow">https://developer.mozilla.org/media/uploads/demos/D/a/David%...</a><p>And what's even cooler, this has been added to the CSS3 draft spec, so it might actually soon be implemented in the other layout engines! <a href="http://dev.w3.org/csswg/css3-images/#element-reference" rel="nofollow">http://dev.w3.org/csswg/css3-images/#element-reference</a>

Are these screenshots though?<p>I thought the point of a screenshot was to capture how the page/screen has been rendered by an actual browser/platform. Isn't this a different rendering? If the quirks aren't rendered then the use is limited.

If you haven't seen it yet, the "Shooter" addon for firefox basically does this same sort of thing (screenshot of page by using the canvas). <a href="https://addons.mozilla.org/en-US/firefox/addon/shooter/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/shooter/</a><p>The only real bug I've seen in it is the use of white as the default background color in pages, with all page styles (and css files) loaded on top... This means it's (properly?) ignoring the user defined page background color.

Try using their console: <a href="http://html2canvas.hertzen.com/screenshots.html" rel="nofollow">http://html2canvas.hertzen.com/screenshots.html</a><p>Very impressive! Can someone explain how _exactly_ does it work? Has the author implemented a renderer inside JavaScript?

Nifty but still not convinced that is how Google is doing it.<p>How do you handle iframes with content external to the domain?

Wow, that's impressive. Works really well.

I used this for our screenshot app as well :) It's really nice. Some quirks, but those are hardly noticeable.