Multiple Canvas Elements to PDF using jsPDF
HTML
<script src="https://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>
<canvas id="canvas" width="480" height="320"></canvas>
<canvas id="canvas2" 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, 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);
var d_canvas2 = document.getElementById('canvas2');
var context2 = d_canvas2.getContext('2d');
context2.moveTo(20, 20);
context2.lineTo(100, 20);
context2.fillStyle = "#999";
context2.beginPath();
context2.arc(100, 100, 75, 0, 2 * Math.PI);
context2.fill();
context2.fillStyle = "orange";
context2.fillRect(20, 20, 50, 50);
context2.font = "24px Helvetica";
context2.fillStyle = "#000";
context2.fillText("Canvas", 50, 130);
$('#download').click(function() {
//create a canvas
canvas3 = document.createElement('canvas');
canvas3.id = 'canvas3'
document.body.appendChild(canvas3);
canvas3.width = 500;
canvas3.height = 500;
//add the images
base_image = new Image();
context3 = canvas3.getContext('2d');
context3.drawImage(d_canvas,0,0);
context3.drawImage(d_canvas2,0,200);
var doc = new jsPDF('p', 'mm');
html2canvas($("#canvas3"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
});
});