How to load a HTML file into canvas?

Question

I know we can load an image into a canvas but I wonder if we are able to load a simple HTML file into a canvas. If yes, how?

Thanks.

Answer 1

Short answer: No, you cannot.

Long answer: Not reliably, BUT yes you can in certain (possibly hackish) ways. The key is in what you define as an "image". You are aware that you can add an image to the canvas with drawImage() - what you mightn't be aware of is what that "image" can be (not necessarily an actual image).

Firstly, the "image" can be a HTML5 video element - so you can add videos to the canvas. Secondly, in most modern browsers the "image" can be an SVG document, which can contain HTML via the SVG element.

Browser support:

• SVG documents in drawImage() are not currently supported in Firefox. The related bug is here and I think a fix is planned.
• is buggy in most browsers - Firefox (ironically) seems to have the best support.

Example:

Try loading that file with canvas drawImage() in Opera - as you'll see its interactivity is fairly buggy, but it displays fine.