I’m happy to announce a new pet project of mine: Domvas. Domvas implements the missing piece that connects the DOM and Canvas. It gives to the ability to take arbitrary DOM content and paint it to a Canvas of your choice.
That dialog that is a pain to layout in Canvas but needs to be animated? Yep. Always wanted to use CSS transforms in Canvas? Yep. I think you get the idea.
Domvas uses a feature of SVG that allows you to embed XHTML content into the SVG – and as you might know, the actual SVG can be used as a data uri, and therefore behaves like a standard image.
I have written about this technique in 2008 when I brought CSS transforms to browsers that did not have them. It took a little more experimentation to transform it into a reusable plugin: HTML content needs to be serialized to XML, and all styles have to be inlined.
The whole library weights less than 1k and has no external dependencies. It is tested to run well on the latest versions of Safari, Firefox and Chrome, but refuses to run on Opera (yet, for reasons unknown) and unfortunately doesn’t run in Internet Explorer, as IE to this date still does not implement SVG’s foreignObject.