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

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

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