PDF.js displays PDF documents in really low resolution/ blurry almost. Is this how it is?

Question

I am trying to use PDF.js to view PDF documents. I find the display really low resolutions to the point of being blurry. Is there a fix?

 // URL of PDF document
        var url = "https://www.myFilePath/1Mpublic.pdf";

        // Asynchronous download PDF
        PDFJS.getDocument(url)
          .then(function(pdf) {
            return pdf.getPage(1);
          })
          .then(function(page) {
            // Set scale (zoom) level
            var scale = 1.2;

            // Get viewport (dimensions)
            var viewport = page.getViewport(scale);

            // Get canvas#the-canvas
            var canvas = document.getElementById('the-canvas');

            // Fetch canvas' 2d context
            var context = canvas.getContext('2d');

            // Set dimensions to Canvas
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Prepare object needed by render method
            var renderContext = {
              canvasContext: context,
              viewport: viewport
            };

            // Render PDF page
            page.render(renderContext);
          });

Answer 1

There are two things you can do. I tested and somehow it worked, but you will get a bigger memory consumption.

1 . Go to pdf.js and change the parameter MAX_GROUP_SIZE to like 8192 (double it for example) . Be sure to have your browser cache disable while testing.

2. You can force the getViewport to retrieve the image in better quality but like, I don't know how to say in English, compress it so a smaller size while showing:

// URL of PDF document var url = "https://www.myFilePath/1Mpublic.pdf";

    // Asynchronous download PDF
    PDFJS.getDocument(url)
      .then(function(pdf) {
        return pdf.getPage(1);
      })
      .then(function(page) {
        // Set scale (zoom) level
        var scale = 1.2;

        // Get viewport (dimensions)
        var viewport = page.getViewport(scale);

        // Get canvas#the-canvas
        var canvas = document.getElementById('the-canvas');

        // Fetch canvas' 2d context
        var context = canvas.getContext('2d');

        // Set dimensions to Canvas
        var resolution =  2 ; // for example

        canvas.height = resolution*viewport.height; //actual size
        canvas.width = resolution*viewport.width;

       canvas.style.height = viewport.height; //showing size will be smaller size
        canvas.style .width = viewport.width;

        // Prepare object needed by render method
        var renderContext = {
          canvasContext: context,
          viewport: viewport,
          transform: [resolution, 0, 0, resolution, 0, 0] // force it bigger size
        };

        // Render PDF page
        page.render(renderContext);
      });
enter code here

Hope it helps!