Skip to content
/ domvas Public
forked from pbakaus/domvas

Domvas implements the missing piece that connects the DOM and Canvas.

Notifications You must be signed in to change notification settings

zbynek/domvas

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Domvas

Overview

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.

Usage

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

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

Syntax

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

readyCallback's 'this' and first argument points to a valid, preloaded image node that you can simply draw to your canvas context.

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.

Caveats

  • Internet Explorer is not supported, as it doesn't support the foreignObject tag in SVG.
  • For whatever reason, Opera is failing. I am not sure why. If a Opera pal is reading this, get in touch!
  • SVG's foreignObject is subject to strong security – meaning any external content will likely fail (i.e. iframes, web fonts)
  • The DOM object is not linked, but copied – if you change the style of the DOM object, it will not automatically update in Canvas
  • Content outside the bounding box of the element will be cut of per default if painted to Canvas. Don't worry though, simply pass a more comfortable offset to the toImage function (see above)

Credits / License

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

About

Domvas implements the missing piece that connects the DOM and Canvas.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 42.9%
  • JavaScript 35.9%
  • HTML 21.2%