Print div on canvas

Question

In JavaScript, is it possible to print an element of an HTML page using the canvas element? For example, it would be useful to print this following element on a HTML5 canvas, so that individual pixels in the div could be manipulated:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Apparently, there actually is a way to take screenshots of a page using the HTML5 canvas: http://stackoverflow.com/questions/5621907/how-to-screenshot-website-in-javascript-client-side-how-google-did-it-no-nee — Anderson Green, Mar 01 '13 at 23:28
I think I've found a solution already: http://stackoverflow.com/a/6678156/975097 — Anderson Green, Mar 01 '13 at 23:30

score 1 · Accepted Answer · answered Mar 02 '13 at 00:05

For security reasons, "live" html elements cannot be written to canvas. (Imagine an identity thief writing a script that copies your bank user+password to canvas and sends it to the thief).

It looks like Niklas von Hertzen is writing an html parser. If you are in control of the html that you want to render, his method will work.

This method is called "headless" processing because the html is calculated--but not rendered to a browser.

If you need a more mature headless processor, this is a good one: http://phantomjs.org/

Print div on canvas

1 Answers1