html2canvas and jsPDF partial gray section

Question

I'm trying to create a PDF from HTML using html2canvas and jsPDF. First I get all the html elements I want to pass to PDF as image and then I add them one by one as follows:

   var quality = 1
   var report1 = null
   var report2 = null
   var report3 = null
   var report4 = null
   var report5 = null
   var header = null

   html2canvas(document.querySelector('header'), {scale: quality})
        .then(canvas => {
            header = canvas
            html2canvas(document.querySelector('#report-1'), {scale: quality})
            .then(canvas => {
                report1 = canvas
                html2canvas(document.querySelector('#report-2'), {scale: quality})
                .then(canvas => {
                    report2 = canvas
                    html2canvas(document.querySelector('#report-3'), {scale: quality})
                        .then(canvas => {
                            report3 = canvas
                            html2canvas(document.querySelector('#report-4'), {scale: quality})
                                .then(canvas => {
                                    report4 = canvas
                                    html2canvas(document.querySelector('#report-5'), {scale: quality})
                                        .then(canvas => {
                                            report5 = canvas


                                            var imgDataHeader = header.toDataURL('image/png');
                                            var imgWidth = 210; 
                                            var imgHeight = header.height * imgWidth / header.width;
                                            var doc = new jsPDF('p', 'mm', 'A4');
                                            var position = 0
                                            doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 15;


                                            var imgDataReport1 = report1.toDataURL('image/png')
                                            imgHeight = report1.height * imgWidth / report1.width;
                                            doc.addImage(imgDataReport1, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;

                                            var imgDataReport2 = report2.toDataURL('image/png');
                                            imgHeight = report2.height * imgWidth / report2.width;
                                            doc.addImage(imgDataReport2, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;



                                            doc.addPage();
                                            position = 0


                                            imgDataHeader = header.toDataURL('image/png');
                                            imgHeight = header.height * imgWidth / header.width;
                                            doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 15;

                                            var imgDataReport3 = report3.toDataURL('image/png');
                                            imgHeight = report3.height * imgWidth / report3.width;
                                            doc.addImage(imgDataReport3, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;


                                            var imgDataReport4 = report4.toDataURL('image/png');
                                            imgHeight = report4.height * imgWidth / report4.width;
                                            doc.addImage(imgDataReport4, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;


                                            doc.addPage();
                                            position = 0

                                            imgDataHeader = header.toDataURL('image/png');
                                            imgHeight = header.height * imgWidth / header.width;
                                            doc.addImage(imgDataHeader, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 15;

                                            var imgDataReport5 = report5.toDataURL('image/png');
                                            imgHeight = report5.height * imgWidth / report5.width;
                                            doc.addImage(imgDataReport5, 'PNG', 0, position, imgWidth, imgHeight);
                                            position += imgHeight + 5;


                                            doc.save( 'file-.pdf');
                                        })
                                })
                        })
                    })
             })
        })        

The problem is that except the first clean area, the rest of elements (theoretically with a white background) appears with gray background.

scale == 1

If I increase the scale html2canvas option this problem disappears but charts borders turns totally white (they are inside a material card container which must appears too).

scale == 2

I tried changing other options available in html2canvas options but nothing changes.

Desired result

Answer 1

I solved the problem after I realized that the gray background color is in the body. Seems that html2canvas doesn't get the parent's style. So, I had to add style="background:#f5f5f5f5"in each div, scale = 2 and adding the same background in the pdf page using the gray level setFillColor option:

var doc = new jsPDF('p', 'mm', 'A4');
doc.setFillColor(245);
doc.rect(0, 0, 210, 700, "F");

Maybe this is a workaround but it's sufficient solution for me.