How can I improve the quality of output from Chart.js --> both pdf and png files are lower image quality

I was successful in taking Chart.js output and sending it to an image file (png) and to a pdf. The issue is that with both outputs the image quality is much lower than the chart in the browser. The png file is marginally acceptable, while the pdf is very grainy. Is there another way to produce output from Chart.js that has the same visual quality that it has in the browser?

Here's the way I output to png:

    var a = document.createElement('a');
    a.href = myChart.toBase64Image();
    a.download = 'Site 1 - Users Per Department.png';
    a.click();

And here's the way I output to pdf:

    $('#create_PDF_btn').on('click', function() {
        var canvas = document.querySelector("#myChart");
        var canvas_img = canvas.toDataURL("image/png",1.0); 
        var pdf = new jsPDF('landscape','in', 'letter');
        pdf.addImage(canvas_img, 'png', .5, 1.75, 10, 5); 
        pdf.save('Site 1 - Users Per Department.pdf')
    });

One additional observation of the PDF is that this code produces a much larger file than I expected - 4,700 KB vs 21 KB (output to pdf from my current solution in MS Access). I can't add the pdf, so I'm including a copy of the image here. Notice the graininess in the text and legend points:

I'm using a relatively new version of Chart.js (3.4.1) and jsPDF (1.5.3).

Thanks for any input.