deconstructive/example.html

<html>
 <!--
/****************************************************************************
**
** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies).
** Contact: Qt Software Information (qt-info@nokia.com)
**
** This file is part of the Graphics Dojo project on Qt Labs.
**
** This file may be used under the terms of the GNU General Public
** License version 2.0 or 3.0 as published by the Free Software Foundation
** and appearing in the file LICENSE.GPL included in the packaging of
** this file.  Please review the following information to ensure GNU
** General Public Licensing requirements will be met:
** http://www.fsf.org/licensing/licenses/info/GPLv2.html and
** http://www.gnu.org/copyleft/gpl.html.
**
** If you are unsure which license is appropriate for your use, please
** contact the sales department at qt-sales@nokia.com.
**
** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE
** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
**
****************************************************************************/
-->
    <head>
        <style>
            div { display: block; margin-left:0px; width: 275px;}
            input[type="text"] {
                -webkit-border-radius: 10px;
                 padding: 3px;
                 background-image: -webkit-gradient(linear, left top, left bottom, from(#99cc99), to(#88ee88));
                 color: white;
                 -webkit-text-stroke: 1px rgba(0,0,0,0.4);
                 font-size: 24px;
                 margin:0px;
                 border-width: 2px;
                 border-color: rgba(0,0,0,0.5);
            }
        </style>
        <script>
            function renderElement(selector, onLoad) {
                var img = new Image;
                img.onload = function() { onLoad(img); };
                img.src = "render:"+escape(selector)+"?"+(new Date().getTime());
            }
            function rerender()
            {
                var canvas = document.getElementById("canvas");
                renderElement('input[type="text"]', function(img) {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var ctx = canvas.getContext("2d");
                    ctx.save();
                    ctx.fillStyle = "white";
                    ctx.globalAlpha = 1;
                    ctx.fillRect(0,0,canvas.width,canvas.height);
                    ctx.globalAlpha = 0.5;
                    ctx.translate(canvas.width,canvas.height);
                    ctx.rotate(Math.PI);
                    ctx.drawImage(img,0,0);
                    ctx.restore();
                    document.getElementById("image").src = img.src;
                });
            }
        </script>
    </head>
    <body onload="document.getElementById('input').focus()" />
        <div>
            <form>
                Type something: <input type="text" id="input"  onkeydown="setTimeout(rerender,0)"/>
                <canvas id="canvas" width="320" height=240"></canvas>
            </form>
        </div>
    </body>
</html>