HTML5 canvas, convert canvas to PDF with jspdf.js

Question

I am trying to convert HTML5 canvas to PDF in JavaScript but I get a black background PDF. I tried to change the background color but still get black. The following is code I am trying:

Canvas = document.getElementById("chart");
Context = Canvas.getContext("2d");

var imgData = Canvas.toDataURL('image/jpeg');
var pdf = new jsPDF('landscape');
pdf.addImage(imgData, 'JPEG', 0, 0, 1350, 750);
pdf.save('download.pdf');

If you have any idea, I'd appreciate it very much.

Solution 1

A good approach is to use combination of jspdf.js and html2canvas. I have made a jsfiddle for you.

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

'

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

jsfiddle: http://jsfiddle.net/rpaul/p4s5k59s/5/

Solution 2

One very simple solution is that you are saving the image as jpeg. Saving instead as png works fine for my application. Of note, Blizzard's response also includes the print as png, and also produces non-black fill for transparent layers in the canvas.

  var canvas = event.context.canvas;
  var data = canvas.toDataURL('image/png');

instead of

  var canvas = event.context.canvas;
  var data = canvas.toDataURL('image/jpg');

Solution 3

I had the same problem, e.g. the first time when i create a pdf the canvas image is ok, but all the other next, came out black. No picture!

The workaround i found is as follows: after each call to pdf.addImage() i redraw the picture in the canvas. It works now fine for me.

EDIT: As requested, here some more details:

Let say i have a canvas drawing function like this (just an example, it doesn't matter):

function drawCanvas(cv) {
  for(var i=0; i<cv.height; i++) {
    for(var j=0, d=0; j<cv.width; j++) {
      cv.data[d] = 0xff0000;
      d += 4;
    }
  }
}

I had to fix my printing function as follows:

var cv=document.getElementById('canvas');
printPDF(cv) {
    var imgData=cv.toDataURL("image/jpeg", 1.0);
    var doc=new jsPDF("p","mm","a4");
    doc.addImage(imgData,'JPEG',15,40,180,180);
    drawCanvas(cv); // <--- this line is needed, draw again
}
drawCanvas(cv); // <--- draw my image to the canvas, ok
printPDF(cv); // first time is fine
printPDF(cv); // second time without repaint would be black

I admit, i did'nt investigate further, just happy that this works.

Comments

[user3289230]

Thank you for reply. I set backgroud color like Canvas.style.color = "white" but still black.

[Ozair Kafray]

Why is it a good approach to use a combination of html2canvas with jspdf. he already has a canvas. Same is my case. I am using the same code you have in onrendered, but since I already have a canvas I am not using html2canvas.

[Razan Paul]

That's a good question. It was just an experience. Few months ago, when I was working on this, I found that jspdf.js itself does not give consistent result for Flot graphs. Using html2canvas solved my problem. To be honest, I did not investigate the internal code of these libraries. Oh I remember, Flot graphs was adding other HTML elements with Canvas. If it is solely canvas, then Jspdf is probably enough.

[Sayan]

Could you expound on after each call to pdf.addImage() i redraw the picture in the canvas? It would be very helpful if you could share some code.

[Nagama Inamdar]

Welcome to Stackoverflow. Would you mind extending your answer bit more for other fellow programmers; in order to understand how exactly it helps to solve the problem.