ansaurus

Question

How to load a HTML file into canvas?

Answer 1

+1 A:

He's talking about HTML5 / Javascript.

It's not possible without writing your own Rendering Engine (in Javascript).

2010-07-18 17:59:07

@Mewp,HTNL and javascript and HTML5 canvas.

Don Don 2010-07-18 19:47:51

Answer 2

+3 A:

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 <foreignObject> 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.
<foreignObject> is buggy in most browsers - Firefox (ironically) seems to have the best support.

Example:

<svg xmlns="http://www.w3.org/2000/svg"&gt;
 <foreignObject x="0" y="0" height="800" width="800">
  <body xmlns="http://www.w3.org/1999/xhtml"&gt;
   <p>Hello world!</p>
   <input type="date"/>
  </body>
 </foreignObject>
</svg>

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

lucideer 2010-07-18 18:14:29

@lucideer,// browser = Firefox v3.66; os = crappy Vista // and we must support FF var canvas= document.getElementById('oneElement'); var ctx= canvas.getContext('2d');var img= new Image(); ctx.drawImage(img, 0, 0, img.width, img.height); } img.src = 'element1.html'; // outcome the html file has not been loaded into the canvas

Don Don 2010-07-18 19:43:23

Hey Don Don - as I said in the first line of the answer "Not reliably" - I wouldn't recommend doing this in any production sites yet, just informing you of the possibility.

lucideer 2010-07-18 20:01:08

@lucideer, ok.Could you take a look at another related question??http://stackoverflow.com/questions/3276131/how-to-convert-a-block-of-rendered-html-code-or-a-div-into-a-pngThanks.Don

Don Don 2010-07-18 20:58:16

@Don Ok, will do.

lucideer 2010-07-18 23:09:34

ansaurus

tags:

views:

answers:

How to load a HTML file into canvas?

related questions