Permalink
Browse files

transformed index page into actual demo

  • Loading branch information...
1 parent 551dd48 commit 67ee889451a0ded64facb0796193b9d16268b4da @pbakaus committed Aug 30, 2012
Showing with 70 additions and 113 deletions.
  1. 0 { → demo}/css/main.css
  2. +70 −0 demo/index.html
  3. +0 −113 index.html
File renamed without changes.
View
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Domvas!</title>
+
+ <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="css/main.css">
+
+ <style type="text/css">
+
+ #dom {
+ font-family: Arial;
+ border: 5px solid rgba(0,0,0,0.2);
+ border-radius: 10px;
+ width: 260px;
+ padding: 5px 20px;
+ background: #4f8eff;
+
+ text-shadow: 1px 1px 0 #264782;
+ line-height: 1.4em;
+
+ margin: 20px;
+ }
+
+ #dom p {
+ color: rgba(255,255,255,0.8);
+ }
+
+ #dom strong {
+ color: #fff;
+ font-style: italic;
+ }
+
+ </style>
+</head>
+<body>
+
+ <section>
+
+ <h1>Demo</h1>
+
+ <div class="sub">
+
+ <div style='font-size:30px' id="dom">
+ <p>EHRMAGERD <strong>DOM IN CANVAS</strong>!</p>
+ </div>
+
+ <canvas id="test" width="350" height="206"></canvas>
+
+ </div>
+
+ </section>
+
+ <script src="../src/domvas.js"></script>
+ <script>
+
+ var canvas = document.getElementById("test");
+ var context = canvas.getContext('2d');
+
+ domvas.toImage(document.getElementById("dom"), function() {
+ // Look ma, I just converted this element to an image and can now to funky stuff!
+ context.drawImage(this, 20, 20);
+ });
+
+ </script>
+
+</body>
+</html>
View
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Domvas!</title>
-
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="css/main.css">
-
- <style type="text/css">
-
- #dom {
- font-family: Arial;
- border: 5px solid rgba(0,0,0,0.2);
- border-radius: 10px;
- width: 260px;
- padding: 5px 20px;
- background: #4f8eff;
-
- text-shadow: 1px 1px 0 #264782;
- line-height: 1.4em;
-
- margin: 20px;
- }
-
- #dom p {
- color: rgba(255,255,255,0.8);
- }
-
- #dom strong {
- color: #fff;
- font-style: italic;
- }
-
- </style>
-</head>
-<body>
-
- <section>
-
- <h1>Domvas!</h1>
-
- <p><strong>Domvas implements the missing piece that connects the DOM and Canvas</strong>. It gives to the ability to take arbitrary DOM content and paint it to a Canvas of your choice.</p>
-
- <p>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.</p>
-
- <h1>Demo</h1>
-
- <div class="sub">
-
- <div style='font-size:30px' id="dom">
- <p>EHRMAGERD <strong>DOM IN CANVAS</strong>!</p>
- </div>
-
- <canvas id="test" width="350" height="206"></canvas>
-
- </div>
-
- <h1>Usage</h1>
-
- <pre>
-var canvas = document.getElementById("test");
-var context = canvas.getContext('2d');
-
-domvas.toImage(document.getElementById("dom"), function() {
- context.drawImage(this, 20, 20);
-});
- </pre>
-
- <p>Extended documentation:</p>
-
- <pre>
-domvas.toImage(domElement, readyCallback, width, height, left, top);
- </pre>
-
- <h1>How it works</h1>
-
- <p>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.</p>
-
- <p>I have written about this technique in 2008 <a href="http://paulbakaus.com/2008/08/19/css-transforms-for-firefox/">when I brought CSS transforms to browsers that did not have them</a>. 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.</p>
-
- <h1>Caveats</h1>
-
- <ul>
- <li><strong>Internet Explorer</strong> is not supported, at it doesn't support the foreignObject tag in SVG.</li>
- <li>SVG's foreignObject is subject to strong security – meaning any external content will likely fail (i.e. iframes, web fonts)</li>
- <li>The DOM object is <strong>not linked, but copied</strong> – if you change the style of the DOM object, it will not automatically update in Canvas</li>
- <li>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)</li>
- </ul>
-
- <h1>Credits / License</h1>
-
- <p>&copy;2012 Paul Bakaus. Licensed under MIT. Reach out on <a href='http://twitter.com/pbakaus'>Twitter</a>!</p>
-
-
- </section>
-
- <script src="src/domvas.js"></script>
- <script>
-
- var canvas = document.getElementById("test");
- var context = canvas.getContext('2d');
-
- domvas.toImage(document.getElementById("dom"), function() {
- // Look ma, I just converted this element to an image and can now to funky stuff!
- context.drawImage(this, 20, 20);
- });
-
- </script>
-
-</body>
-</html>

0 comments on commit 67ee889

Please sign in to comment.