How do i draw the content of DIV on html5 canvas using jquery

Question

Suppose I have div and inside that div I have few form controls like textboxes,dropdow checkbox,radiobutton etc. Now I want that when a user clicks a particular button, the content of div will be drawn on the canvas. I search google for having some sample code or example but found none. Please guide me how could I draw the content of DIV on html5 canvas using jquery with as it is the controls looks with style sheet.

Question updated

<div class="login">
<form method="post" action="www.mysite.com">
    <fieldset>
        <div class="login-fields"><label class="" for="username" id="username-lbl">User Name</label>                    
        <input type="text" size="25" class="validate-username" value="" id="username" name="username"></div>
        <div class="login-fields"><label class="" for="password" id="password-lbl">Password</label>                 
        <input type="password" size="25" class="validate-password" value="" id="password" name="password"></div>
        <button class="button" type="submit">Log in</button>
    </fieldset>
</form>
</div>

Suppose I have a form like above which I need to draw programmatically on canvas by jquery and look & feel of my form will be same.

UPDATE

var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
    onrendered: function (domElementCanvas) {
        var canvas = document.createElement('canvas');
        canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);

        // do something with canvas
    }
}

Answer 1

There is a solution for chrome : https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawWindow()

But I think that what you need is to use xml + svg; here is an example : http://jsfiddle.net/3N69j/

code :

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
           "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px'>" +
                "<ul> <li style='color:red'> hello </li>  <li style='color:green'>thomas</li> </ul> "  +   
               "</div>" +
             "</foreignObject>" +
           "</svg>";

var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }

You get the html code easily with jquery (on click, use $(this).html() and feed the svg data

good luck

Answer 2

Check out HTML-2-Canvas. I've gotten it to work rather well. Seems to work on Android cellphones too.