Why Multi Page PDF Generation From Banana Solr Dashboard Is Coming Blur Pixelwise

Question

I am working on a multipage pdf download using html2canvas and pdfmake. I am able to download the pdf but page height, page width of the generated pdf is not proper and the resolution is low/blur. The code is as below. Please refer the screenshot attached herewith.

Thanks in advance.

Code I have used is:

html2canvas(document.getElementById('newId')).then(
        canvas=>{
            var image = canvas.toDataURL('image/png');
            const PAGE_WIDTH = 500; 
            const PAGE_HEIGHT = 700;  
            const content = [];
            var w=500;
            var h=700;
            function getPngDimensions (base64) {
                    const header = atob(base64.slice(22, 70)).slice(16, 24);
                 const uint8 = Uint8Array.from(header, c => c.charCodeAt(0));
                 const dataView = new DataView(uint8.buffer);
                 return {
                         width: dataView.getInt32(0),
                          height: dataView.getInt32(4)
                 };
            }
            const splitImage = (img, content, callback) => () => {
                    const canvas = document.createElement('canvas');
                canvas.width = w*2;
                canvas.height=h*2;
                canvas.style.width=w+'px';
                canvas.style.height=h+'px';
                const ctx    = canvas.getContext('2d');
                ctx.scale(2,2);
                const printHeight = img.height * PAGE_WIDTH / img.width;
                for (let pages = 0; printHeight > pages * PAGE_HEIGHT; pages++) {
                        canvas.height = Math.min(PAGE_HEIGHT, printHeight - pages * PAGE_HEIGHT);
                        ctx.drawImage(img, 0, -pages * PAGE_HEIGHT, img.width, printHeight);
                                content.push({ image: canvas.toDataURL(), margin: [0, 5],width:PAGE_WIDTH });
                    }

                    callback();
            };

            function next () {
                    pdfMake.createPdf({ content }).open();
            }
            const { width, height } = getPngDimensions(image);
            const printHeight = height * PAGE_WIDTH / width;
            if (printHeight > PAGE_HEIGHT) {
            const img = new Image();
            img.onload = splitImage(img, content, next);
            img.src = image;
            return;
            }
            content.push({ image, margin: [0, 5], width: PAGE_WIDTH });
            next();

        }
            );

Update: I tried updating the width and height of the image formed by the canvas but increasing the width onl increases the pixel size and further truncates the right end of the dashboard.

const PAGE_WIDTH = 500; 
const PAGE_HEIGHT = 700;  
//some more code here as mentioned in the detailed snippet
const content = [];
var w=500;
var h=700;

Poor Pixel Display For Multi Page PDF Through Banana Dashboard