Browse files

replaced index page with better readme

  • Loading branch information...
1 parent 4f75dce commit 551dd48a8641ee1bf387133e6bd66fa98d961c9e @pbakaus committed Aug 30, 2012
Showing with 56 additions and 3 deletions.
  1. +21 −0 MIT-LICENSE.txt
  2. +35 −3 README.md
View
21 MIT-LICENSE.txt
@@ -0,0 +1,21 @@
+Copyright 2012 Paul Bakaus
+http://paulbakaus.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
38 README.md
@@ -1,4 +1,36 @@
-domvas
-======
+# Domvas
-Domvas implements the missing piece that connects the DOM and Canvas.
+## 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](http://paulbakaus.com/2008/08/19/css-transforms-for-firefox/). 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.
+- 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](http://twitter.com/pbakaus)!

0 comments on commit 551dd48

Please sign in to comment.