Painting the DOM to Canvas with Domvas

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.

Checkout The project’s homepage for more details an download, or happily fork your way directly.

Enjoy!

6 Comments

jonathantneal on August 30th, 2012

Did you experience any issues with web fonts?

Paul Bakaus on August 31st, 2012

Yes – web fonts did not work in my test, but it was likely related to third party content. Possibly web fonts work if you load them from your own domain (but I would also have to detect them and embed them along..)