pulling images from different canvas and exporting to single pdf

Question

I have a situation where i am generating several graphs in web page and showing them in canvas and my requirement is that on click of download button,i should be able to export all canvas images to pdf.

I have successfully done this for single canvas element using html2canvas and Jspdf but cannot figure out how to do the same for all.

I followed this JSFiddle code for generating pdf from Html2canvas and jspdf.

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');
            }
        });
    });
});

Kindly help,thanks in advance.

Answer 1

There should be no need to use html2canvas for this. It will only deliver you another canvas element at a cost. You can use the original canvas element and toDataURL() directly with jsPdf.

Example (partly pseudo)

This will collect all canvases in the page and put them in a PDF. The pseudo part is the missing variables for width, deltas, factor etc. But you should get the gist of it.

Note: The size for images must be given in the same unit you're using for the document, so you need to convert pixel positions and sizes into millimeter representation using a pre-calculated factor based on document DPI (not shown here, but this may help).

var x = someX,
    y = someY,
    dx = somDeltaForX,
    dy = somDeltaForY,
    i,
    canvases = document.querySelectorAll("canvas"),
    pdf = new jsPDF('p', 'mm'),
    f = convertionFactorFromPixelstoMM;


for(i = 0; i < canvases.length; i++) {
  var url = canvases[i].toDataURL("image/jpeg", 0.75);
  doc.addImage(url, "JPEG", x * f, y * f, canvases[i].width * f, canvases[i].height * f);
  x += dx;   // tip: dx could also be based on previous canvas width in non-uniform sizes
  if (x > widthOfPage) {
    x = 0;
    y += dy;
  }
}

Answer 2

It was very simple ,I just changed the argument to this line

 html2canvas($("#canvas"), {

Instead of passing seperate canvases and then trying to export them to single pdf rather i kept different canvases in on Div and passed the Div id to the above mentioned line and both canvases were exported to single pdf file