Edit in JSFiddle

$(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, 2 * Math.PI);
    context.fill();
    context.fillStyle = "orange";     
    context.fillRect(20, 20, 50, 50);
    context.font = "24px Helvetica";
    context.fillStyle = "#000";
    context.fillText("Canvas", 50, 130);
    $('#ballon').draggable();
    $('#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');
            }
        });
    });
});

 <canvas id="canvas" width="480" height="320"></canvas> 
<button id="download">Download Pdf</button>

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