HTML 2 Canvas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="preset">
<h1>Usage</h1>
<a href="http://learn.javascript.ru/play/m8BKic">Example</a><br />
<p>To render an element with html2canvas, simply call: html2canvas(element, options);</p>
<p>To access the created canvas, provide the onrendered event in the options which returns the canvas element as the first argument, as such:</p>
</div>
<input type="button" value="Click" />
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5241909069a436f8"></script>
<!-- AddThis Button END -->

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto);
.preset {
    width: 800px;
    height: 200px;
    border: 1px solid #000;
    font-family: 'Roboto', sans-serif !important;
}

JavaScript

$('input').click(function() {
     html2canvas(document.querySelector('.preset'), {
    onrendered: function(canvas) {
        /* canvas is the actual canvas element,
           to append it to the page call for example
           document.body.appendChild( canvas );
        */
        //$('body').append( canvas );
        var dataURL = canvas.toDataURL();
        //alert(dataURL);
        /* $('body').append('<h1>We have an image here:</h1><img src="' + dataURL + '" />'); */
    }
});   
});