Monday, November 7, 2011

Rendering HTML on Canvas

Robert O'Callahan writes in his blog about a workaround that allows to render HTML on Canvas element using SVG:

The trick is to create an SVG image containing the content you want to render, in this case a containing HTML, and draw that image to the canvas. Constructing the SVG image as a data: URI lets you compose the content dynamically without requiring an external resource load. There is nothing tricky going on here; this feature works exactly as it should according to the specs.

Blog post
Demo

There is also another project that aims at rendering HTML on Canvas. Niklas von Herzen has created a JavaScript library to solve the issue.

4 comments:

  1. I know this is a super old post but just wanted to say thanks because I found this after hours of searching for a way to screenshot pages (even though, they technically aren't screenshots)

    ReplyDelete