Convert the `DOMCanvasFactory` to an ES6 class

For consistency, also updates the `pdf2png.js` example to use the slightly less verbose `canvasAndContext` parameter name.

examples/node/pdf2png/pdf2png.js

@@ -29,22 +29,22 @@ NodeCanvasFactory.prototype = {
     };
   },
 
-  reset: function NodeCanvasFactory_reset(canvasAndContextPair, width, height) {
+  reset: function NodeCanvasFactory_reset(canvasAndContext, width, height) {
-    assert(canvasAndContextPair.canvas, 'Canvas is not specified');
+    assert(canvasAndContext.canvas, 'Canvas is not specified');
     assert(width > 0 && height > 0, 'Invalid canvas size');
-    canvasAndContextPair.canvas.width = width;
+    canvasAndContext.canvas.width = width;
-    canvasAndContextPair.canvas.height = height;
+    canvasAndContext.canvas.height = height;
   },
 
-  destroy: function NodeCanvasFactory_destroy(canvasAndContextPair) {
+  destroy: function NodeCanvasFactory_destroy(canvasAndContext) {
-    assert(canvasAndContextPair.canvas, 'Canvas is not specified');
+    assert(canvasAndContext.canvas, 'Canvas is not specified');
 
     // Zeroing the width and height cause Firefox to release graphics
     // resources immediately, which can greatly reduce memory consumption.
-    canvasAndContextPair.canvas.width = 0;
+    canvasAndContext.canvas.width = 0;
-    canvasAndContextPair.canvas.height = 0;
+    canvasAndContext.canvas.height = 0;
-    canvasAndContextPair.canvas = null;
+    canvasAndContext.canvas = null;
-    canvasAndContextPair.context = null;
+    canvasAndContext.context = null;
   },
 };
 
@@ -65,16 +65,16 @@ pdfjsLib.getDocument(rawData).then(function (pdfDocument) {
     // Render the page on a Node canvas with 100% scale.
     var viewport = page.getViewport(1.0);
     var canvasFactory = new NodeCanvasFactory();
-    var canvasAndContextPair = canvasFactory.create(viewport.width, viewport.height);
+    var canvasAndContext = canvasFactory.create(viewport.width, viewport.height);
     var renderContext = {
-      canvasContext: canvasAndContextPair.context,
+      canvasContext: canvasAndContext.context,
       viewport: viewport,
       canvasFactory: canvasFactory
     };
 
     page.render(renderContext).then(function () {
       // Convert the canvas to an image buffer.
-      image = canvasAndContextPair.canvas.toBuffer();
+      var image = canvasAndContext.canvas.toBuffer();
       fs.writeFile('output.png', image, function (error) {
         if (error) {
           console.error('Error: ' + error);

src/display/dom_utils.js

@@ -20,37 +20,36 @@ import {
 
 var DEFAULT_LINK_REL = 'noopener noreferrer nofollow';
 
-function DOMCanvasFactory() {}
+class DOMCanvasFactory {
-DOMCanvasFactory.prototype = {
+  create(width, height) {
-  create: function DOMCanvasFactory_create(width, height) {
     assert(width > 0 && height > 0, 'invalid canvas size');
-    var canvas = document.createElement('canvas');
+    let canvas = document.createElement('canvas');
-    var context = canvas.getContext('2d');
+    let context = canvas.getContext('2d');
     canvas.width = width;
     canvas.height = height;
     return {
       canvas,
       context,
     };
-  },
+  }
 
-  reset: function DOMCanvasFactory_reset(canvasAndContextPair, width, height) {
+  reset(canvasAndContext, width, height) {
-    assert(canvasAndContextPair.canvas, 'canvas is not specified');
+    assert(canvasAndContext.canvas, 'canvas is not specified');
     assert(width > 0 && height > 0, 'invalid canvas size');
-    canvasAndContextPair.canvas.width = width;
+    canvasAndContext.canvas.width = width;
-    canvasAndContextPair.canvas.height = height;
+    canvasAndContext.canvas.height = height;
-  },
+  }
 
-  destroy: function DOMCanvasFactory_destroy(canvasAndContextPair) {
+  destroy(canvasAndContext) {
-    assert(canvasAndContextPair.canvas, 'canvas is not specified');
+    assert(canvasAndContext.canvas, 'canvas is not specified');
     // Zeroing the width and height cause Firefox to release graphics
     // resources immediately, which can greatly reduce memory consumption.
-    canvasAndContextPair.canvas.width = 0;
+    canvasAndContext.canvas.width = 0;
-    canvasAndContextPair.canvas.height = 0;
+    canvasAndContext.canvas.height = 0;
-    canvasAndContextPair.canvas = null;
+    canvasAndContext.canvas = null;
-    canvasAndContextPair.context = null;
+    canvasAndContext.context = null;
   }
-};
+}
 
 class DOMCMapReaderFactory {
   constructor({ baseUrl = null, isCompressed = false, }) {