Print images of canvas using javascript

Question

I'm having a little issue with printing canvas elements using onClick and a javascript function to print the canvas elements on two pages within the same print job.

Right now I'm using jsPDF to create downloadable PDF's for the user to save. This is working as intended.

I also want to create a print feature that prints each canvas as a page.

Using the autoprint feature in jsPDF looked like an obvious answer, but unfortunately I've only been able to get it to spit out the canvas pages in portrait format jammed together on the same page. I want to print these canvas elements in landscape with each printed on it own page, but within the same print job.

I've looked around a bit at other javascript solutions for printing images, but those all assume an external source for the image. I need a solution like that, only pointing to the toDataURL() that I've already created.

I'm sure this has been answered somewhere before, but so far I haven't been able to piece it together correctly.

Here's what I've cobbled together for the jsPDF which spits out the portrait format listed above that I don't want.

function print() {
    ctx1.drawImage(c2,0,0); 
    ctx1.drawImage(c3,0,0); 
    var imgData1 = planner1.toDataURL(); 
    var imgData2 = planner2.toDataURL(); 
    var pdf = new jsPDF('l', 'pt', 'letter');
    pdf.addImage(imgData1, 'PNG', 0, 0, 0, 0, 'IMG1', 'fast');
    pdf.addPage();
    pdf.addImage(imgData2, 'PNG', 0, 0, 0, 0, 'IMG2', 'fast');
    pdf.autoPrint();
}‌‌‌‌‌‌

If anyone knows how to manipulate autoPrint() to support different sizes and formats, I'd love to hear about it since jsPDF documentation is a bit wanting.

Otherwise, I'd go for creating two letter sized png images that can be printed in the same print job as the other option.

I'd be eternally grateful for any assistance with this.

Answer 1

Well jsPDF wasn't going to get it done so I went the png route. Not exactly the most elegant solution (would have preferred to not to have to open another window and then close it) but it prints exactly what I want....

<script>
function print() {

  ctx1.drawImage(c2,0,0);
  ctx1.drawImage(c3,0,0);

  var win = window.open();
  win.document.write("<img src='"+planner1.toDataURL()+"'/><img src='"+planner2.toDataURL()+"'/>");
  win.print();
  win.window.close();

  window.location.href = '../php/planner.php?pln=<?php echo $user ?>';
}
</script>

I also added some css to ensure the headers and footers don't print.