Div to Image Tutorial

HTML

<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>

<button>Generate Image</button>
<div id="mydiv">
<p>text!</p>
</div>
<br>
<br>
 
<div id="canvas">
    <p>Canvas:</p>
    </div>
 
    <div id="image">
        <p>Image:</p>
    </div>




JQUERY

$(document).ready(function(){
$("button").click(function(){
html2canvas([document.getElementById('mydiv')], {
    onrendered: function (canvas) {
        document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');

var image = new Image();
        image.src = data;
            document.getElementById('image').appendChild(image);
    }
      });
  });
});



CSS

#mydiv {
    background-color: lightblue;
    width: 200px;
    height: 200px
}

#canvas
{
 display:none;
}

Demo 

http://jsfiddle.net/amitworkdesk/7rdt5seL/