Convert rendered HTML 5 display (visible and invisible) to image when using HTML 5 canvas

Question

Is there source code (or a browser plugin) to convert the contents of an HTML 5 web page to an image file? This would not just include the visible contents, but the hidden contents as well (assuming there were scroll bars in the page). If there isn't, any advice on how to approach this particular functionality would be appreciated, and I can look into it.

I found this...

html to jpg with c#

However...

I think they just had text in the page, so it doesn't have any dynamic images on the page. My page specifically uses the HTML 5 canvas functionality to draw images. So that must be part of the image file.

Answer 1

It looks like you should be able to do it using javascript with this technique:

http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Make sure to take note of the following caveat however:

Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.

EDIT: You may also want to check out these related questions:

Save HTML5 canvas contents, including dragged-upon images

How to save a HTML5 Canvas as Image on a server