How to draw div content on html5 canvas using jquery

Question

Suppose I have a div and inside a div, I have several form controls, such as text fields, dropdow, radobutton, etc. Now I want that when the user clicks a certain button, the contents of the div will be drawn on the canvas. I am looking for google to get some sample code or example, but have not found it. Read how I could draw the contents of a DIV on html5 canvas using jquery, as it looks with controls with a stylesheet.

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 that I need to draw programmatically on a jquery canvas, and the look of my form will be the 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 you need to use xml + svg; here is an example: http://jsfiddle.net/3N69j/

the 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 easily get the html code using jquery (on click, use $ (this) .html () and pass the svg data

luck

Answer 2

Check out HTML-2-Canvas . I got this to work pretty well. It seems to work on Android mobile phones too.