HTML5 Canvas Example

HTML

<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
 <canvas id="canvas" width="480" height="320"></canvas> 
<button id="download">Download Pdf</button>

CSS

#canvas {
    
}
#background {
    display: none;
}
#ballon {
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: move;
    opacity: 0.5;
}

JavaScript

$(document).ready(function() {
    var d_canvas = document.getElementById('canvas');
    var context = d_canvas.getContext('2d');
    context.moveTo(20, 20);
    context.lineTo(100, 20);
    context.fillStyle = "#999";
    context.beginPath();
    context.arc(100, 100, 75, 0, 1 * Math.PI);
    context.fill();
    context.fillStyle = "orange";     
    context.fillRect(200, 200, 50, 50);
    context.font = "24px Helvetica";
    context.fillStyle = "#000";
    context.fillText("Canvas", 50, 130);

    $('#download').click(function() {       
        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL(
                    'image/png');              
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });
    });
});