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

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


  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)