+
+ 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.
+
+ Demo
+
+
+
+
+
EHRMAGERD DOM IN CANVAS!
+
+
+
+
+
Usage
+
+
+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.
+
+ Caveats
+
+
+ - Internet Explorer is not supported, at it doesn't support the foreignObject tag in SVG.
+ - 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 confortable offset to the toImage function (see above)
+
+
+ Credits / License
+
+ ©2012 Paul Bakaus. Licensed under MIT. Reach out on Twitter!
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/domvas.js b/src/domvas.js
new file mode 100644
index 0000000..2d81473
--- /dev/null
+++ b/src/domvas.js
@@ -0,0 +1,87 @@
+"use strict";
+
+(function() {
+
+ var supportsCSSText = getComputedStyle(document.body).cssText !== "";
+
+ function copyCSS(elem, origElem, log) {
+
+ var computedStyle = getComputedStyle(origElem);
+
+ if(supportsCSSText) {
+ elem.style.cssText = computedStyle.cssText;
+
+ } else {
+
+ // Really, Firefox?
+ for(var prop in computedStyle) {
+ if(isNaN(parseInt(prop, 10)) && typeof computedStyle[prop] !== 'function' && !(/^(cssText|length|parentRule)$/).test(prop)) {
+ elem.style[prop] = computedStyle[prop];
+ }
+ }
+
+ }
+
+ }
+
+ function inlineStyles(elem, origElem) {
+
+ var children = elem.querySelectorAll('*');
+ var origChildren = origElem.querySelectorAll('*');
+
+ // copy the current style to the clone
+ copyCSS(elem, origElem, 1);
+
+ // collect all nodes within the element, copy the current style to the clone
+ Array.prototype.forEach.call(children, function(child, i) {
+ copyCSS(child, origChildren[i]);
+ });
+
+ // strip margins from the outer element
+ elem.style.margin = elem.style.marginLeft = elem.style.marginTop = elem.style.marginBottom = elem.style.marginRight = '';
+
+ }
+
+ window.domvas = {
+
+ toImage: function(origElem, callback, width, height, left, top) {
+
+ left = (left || 0);
+ top = (top || 0);
+
+ var elem = origElem.cloneNode(true);
+
+ // inline all CSS (ugh..)
+ inlineStyles(elem, origElem);
+
+ // unfortunately, SVG can only eat well formed XHTML
+ elem.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+
+ // serialize the DOM node to a String
+ var serialized = new XMLSerializer().serializeToString(elem);
+
+ // Create well formed data URL with our DOM string wrapped in SVG
+ var dataUri = "data:image/svg+xml," +
+ "