Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

replaced index page with better readme

  • Loading branch information...
commit 551dd48a8641ee1bf387133e6bd66fa98d961c9e 1 parent 4f75dce
Paul Bakaus authored

Showing 2 changed files with 56 additions and 3 deletions. Show diff stats Hide diff stats

  1. +21 0 MIT-LICENSE.txt
  2. +35 3 README.md
21 MIT-LICENSE.txt
... ... @@ -0,0 +1,21 @@
  1 +Copyright 2012 Paul Bakaus
  2 +http://paulbakaus.com/
  3 +
  4 +Permission is hereby granted, free of charge, to any person obtaining
  5 +a copy of this software and associated documentation files (the
  6 +"Software"), to deal in the Software without restriction, including
  7 +without limitation the rights to use, copy, modify, merge, publish,
  8 +distribute, sublicense, and/or sell copies of the Software, and to
  9 +permit persons to whom the Software is furnished to do so, subject to
  10 +the following conditions:
  11 +
  12 +The above copyright notice and this permission notice shall be
  13 +included in all copies or substantial portions of the Software.
  14 +
  15 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  16 +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  17 +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  18 +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  19 +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  20 +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  21 +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
38 README.md
Source Rendered
... ... @@ -1,4 +1,36 @@
1   -domvas
2   -======
  1 +# Domvas
3 2
4   -Domvas implements the missing piece that connects the DOM and Canvas.
  3 +## Overview
  4 +
  5 +__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.
  6 +
  7 +## Usage
  8 +
  9 + var canvas = document.getElementById("test");
  10 + var context = canvas.getContext('2d');
  11 +
  12 + domvas.toImage(document.getElementById("dom"), function() {
  13 + context.drawImage(this, 20, 20);
  14 + });
  15 +
  16 +## Syntax
  17 +
  18 + domvas.toImage(domElement, readyCallback, width, height, left, top);
  19 +readyCallback's 'this' and first argument points to a valid, preloaded image node that you can simply draw to your canvas context.
  20 +
  21 +## How it works
  22 +
  23 +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.
  24 +
  25 +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.
  26 +
  27 +## Caveats
  28 +
  29 +- __Internet Explorer is not supported__, as it doesn't support the foreignObject tag in SVG.
  30 +- SVG's foreignObject is subject to strong security – meaning any external content will likely fail (i.e. iframes, web fonts)
  31 +- The DOM object is __not linked, but copied__ – if you change the style of the DOM object, it will not automatically update in Canvas
  32 +- 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)
  33 +
  34 +## Credits / License
  35 +
  36 +©2012 Paul Bakaus. Licensed under MIT. Reach out on [Twitter](http://twitter.com/pbakaus)!

0 comments on commit 551dd48

Please sign in to comment.
Something went wrong with that request. Please try again.