why is the background black when with Chartjs export to a image

Question

I have a problem when i try to export the chart to a image the backgound is black this is the code

var canvas=ctx; var canvasImg = canvas.toDataURL("image/png", 1.0);

//creates PDF from img
var doc = new jsPDF('landscape');
doc.setFontSize(20);
doc.text(15, 15, "Cool Chart");
doc.addImage(canvasImg, 'JPEG', 10, 10, 280, 150 );
doc.save('canvas.pdf');

becacuse, you're saving it as JPEG but canvas renders it as transparent image (PNG) — Neeraj, Jul 09 '18 at 09:03

score 1 · Answer 1 · answered Dec 27 '18 at 14:35

This is a bit more complicated than simply what image format is being used. You need to explicitly set the canvas background to white. But exactly when to do this can be tricky. Please see my answer to a similar question: https://stackoverflow.com/a/53946660/165164

score 0 · Answer 2 · answered Sep 21 '21 at 08:12

I tried to send chart as image from Angular 2+ (canvas element) to spring boot for render image to PDF. I encountered blacked background problem. After collecting information about this problem. I decided to unite solution in the one comment to find solution easily at next time.

 <canvas #canvas"> </canvas>

 @ViewChild('canvas', { static: false }) canvas: ElementRef<HTMLCanvasElement>;

I rendered chart to canvas and get canvas element at .ts file as PNG format and send PNG to backend.

const base64Canvas = this.canvas.nativeElement.toDataURL("image/png").split(';base64,')[1];

why is the background black when with Chartjs export to a image

2 Answers2