XWWEVbj

index.html

<div id="target">
    CodeMyUI.com, web design inspiration and code snippets.<br/> <br/><br/>Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>

<button onclick="takeScreenShot()">to image</button>

script.js

window.takeScreenShot = function() {
    html2canvas(document.getElementById("target"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

style.css

#target{
    width:300px;
    height:200px;
    background:#ff6361;
    color:#fff1e9;
    padding:10px;
}

button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
}

xwwevbj.markdown

XWWEVbj

as seen on http://jsfiddle.net/alperenozlu/sodofkcs/

A Pen by Saijo George on CodePen.

License.