Render Html In Canvas/webgl

Is it possible to render HTML elements in Canvas or WebGL? (similar to how one can draw a video element texture in WebGL)

Solution 1:

There is an attempt that can do the work near 80%. Fail to render dropdownlist, buttons and some more, but mostly items from the page are rendered.

See and download it from here.

http://html2canvas.hertzen.com/

also

http://hertzen.com/experiments/jsfeedback/

Solution 2:

No, it's currently not possible, not yet. But it is planned to include this functionality as pointed out in a video from 3rd WebGL Camp (at about 6:44).

Solution 3:

You should also check out http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html

It might throw a security error in Chrome but works fine in Firefox.

Solution 4:

I just thought I'd add why.

This is the same issue as dirty canvases and the timing attack that was fixed soon after WebGL shipped

With canvas 2d you can draw images into the canvas with ctx.drawImage(someImage, ...); The problem comes from cross domain images. Normally JavaScript can not read the pixels inside an image. It can read the pixels inside a canvas. So, to get the pixels from an image you first draw the image to the canvas then read the pixels from the canvas ctx.getImageData(...)

This is a security problem for cross domain images (images from domains other than the domain of the page).

The solution for canvas 2d is the moment you draw a cross domain image into a 2d canvas that canvas is internally marked as dirty and both ctx.getImageData and canvas.toDataURL will throw a security error.

Originally WebGL followed the same rule. If you called gl.texImageXXX with a cross domain image or a dirty canvas the webgl canvas would be marked as dirty and gl.readPixels as well as canvas.toDataURL would not work.

Smart people pointed out that in the case of WebGL this was not enough because even if you couldn't call gl.readPixels you could design a shader that takes more time based on the colors of the textures it's accessing. Using that you could time how long it takes to access the pixels of a texture and effectively reconstitute the contents of the image.

The solution was that WebGL doesn't allow cross origin images by default. Instead, you have to request CORS (cross origin resource sharing) permission from the other server. Only if it grants permission can WebGL use the image.

Okay, after all that hopefully you can see why you can't render HTML into WebGL. If you could render HTML a canvas then you could use the above techniques to read the contents of that HTML including embedded iframes etc, dirty canvases, images from other domains, etc...

Solution 5:

Use this library https://github.com/PixelsCommander/HTML-GL it is as easy as wrap your content with <html-gl> tag.