It appears that my issue was do to me not adding the link resource for locale.properties in my HTML. Turns out the first error I was getting was more of a red herring, and was able to solve this issue by focusing on the second error.

I added this:

<link rel="resource" type="application/l10n" href="[your path to]/locale/locale.properties">

Where all the HTML for the viewer is located and it loaded right up.

Finally, I got it fixed myself,

After digging into the source code of viewer.js, I find out that Mozilla add some calculation for width heigh of the canvas and there is an additional parameter is transform.

The solution is in https://jsfiddle.net/f4opuvLm/ You can see the difference with offical example source code provided by Mozilla here: https://jsfiddle.net/r2tc9ob5/

I hope this help someone else!

There is documentation available on their github readme. They cite the following example code:

/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */

//
// See README for overview
//

'use strict';

//
// Fetch the PDF document from the URL using promises
//
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
  // Using promise to fetch the page
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

Code below might be more accurate regarding https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples

pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.js';

pdfjsLib.getDocument('helloworld.pdf')
    .promise
    .then(pdf => {
      pdf.getPage(1).then(page => {
        let outputScale = window.devicePixelRatio || 1;
        let transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
        let scale = 1.5;
        let viewport = page.getViewport({scale});

        let canvas = document.getElementById('the-canvas');
        let context = canvas.getContext('2d');

        canvas.width = Math.floor(viewport.width * outputScale);
        canvas.height = Math.floor(viewport.height * outputScale);
        canvas.style.width = Math.floor(viewport.width) + 'px';
        canvas.style.height =  Math.floor(viewport.height) + 'px';

        let renderContext = {
          canvasContext: context,
          transform,
          viewport,
        };

        page.render(renderContext);
      });
    })
    .catch(console.error);