PDFs are getting rendered vertically mirrored

Configuration:

• Web browser and its version: Google Chrome Version 71.0.3578.98 (Official Build) (64-bit)
• Operating system and its version: Tried on Ubuntu 18.04 and Windows 10
• PDF.js version: 2.0.943 (current from npm)
• Is a browser extension: no

Steps to reproduce the problem:

I’ve copied the code from https://mozilla.github.io/pdf.js/examples/#hello-world-with-document-load-error-handling and changed 2 things:

1. added authorization headers (works fine when in jsfiddle)
2. viewport.height and .width both are NaN, so I’ve added a fallback to viewBox-properties

var loadingTask = pdfjsLib.getDocument({
        url: url,
        httpHeaders: {
            'Authorization': server.headers.get('Authorization')
        }
    });
    loadingTask.promise.then(function (pdf) {
        console.log('PDF loaded');

        // Fetch the first page
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function (page) {
            console.log('Page loaded');

            var scale = 1.5;
            var viewport = page.getViewport({
                scale: scale
            });

            // Prepare canvas using PDF page dimensions
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height ||viewport.viewBox[3]; /* viewport.height is NaN */
            canvas.width = viewport.width || viewport.viewBox[2];  /* viewport.width is also NaN */

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function () {
                console.log('Page rendered');
            });
        });
    }, function (reason) {
        // PDF loading error
        console.error(reason);
    });

What is the expected behavior?

Correct Rendering of the PDF

What went wrong? (add screenshot)

As you can see, the PDF is vertically mirrored. This is not a problem with this specific PDF, as it is rendered correctly here and the issue happens with any other PDFs I’ve tested.

I think it has something to do with viewport.heightand.widthbeingNaN` and/or the fact that the example uses a newer (2.1.something) version of PDF.js, but I’d like to use the npm package.

[timvandermeij]

I think it may be because of:

var viewport = page.getViewport({
  scale: scale
});

Could you try with var viewport = page.getViewport(scale); to see if that works? If so, we need to make a new release because this recently changed and we updated the examples already.

[nleanba]

var viewport = page.getViewport(scale); fixed the problem, thank you.