View on GitHub


Implementing the missing piece that connects the DOM and Canvas.

Download this project as a .zip file Download this project as a tar.gz file


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.




var canvas = document.getElementById("test");
var context = canvas.getContext('2d');

domvas.toImage(document.getElementById("dom"), function() {
  context.drawImage(this, 20, 20);

Extended documentation:

domvas.toImage(domElement, readyCallback, width, height, left, top);

How it works

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.


Credits / License

©2012 Paul Bakaus. Licensed under MIT. Reach out on Twitter!