[api-minor] Move getContext call to InternalRenderTask

This is a precursor to moving the call into a
worker thread to let us use `OffscreenCanvas`. The
current position wouldn't work since we make
transformations to the canvas object after the
getContext call, which isn't allowed for
OffscreenCanvas. Also it isn't allowed to clone or
`transferControlToOffscreen` the canvas after the
`getContext` call.

Author: ryzokuken

src/display/api.js

@@ -501,7 +501,8 @@ function getDocument(src = {}) {
           task,
           networkStream,
           transportParams,
-          transportFactory
+          transportFactory,
+          enableHWA
         );
         task._transport = transport;
         messageHandler.send("Ready", null);
@@ -1181,8 +1182,12 @@ class PDFDocumentProxy {
  * Page render parameters.
  *
  * @typedef {Object} RenderParameters
- * @property {CanvasRenderingContext2D} canvasContext - A 2D context of a DOM
- *   Canvas object.
+ * @property {CanvasRenderingContext2D} canvasContext - Deprecated 2D context of
+ *   a DOM Canvas object for backwards compatibility; it is recommended to use
+ *   the `canvas` parameter instead.
+ * @property {HTMLCanvasElement} canvas - A DOM Canvas object. The default value
+ *   is the canvas associated with the `canvasContext` parameter if no value is
+ *   provided explicitly.
  * @property {PageViewport} viewport - Rendering viewport obtained by calling
  *   the `PDFPageProxy.getViewport` method.
  * @property {string} [intent] - Rendering intent, can be 'display', 'print',
@@ -1405,6 +1410,7 @@ class PDFPageProxy {
    */
   render({
     canvasContext,
+    canvas = canvasContext.canvas,
     viewport,
     intent = "display",
     annotationMode = AnnotationMode.ENABLE,
@@ -1496,7 +1502,7 @@ class PDFPageProxy {
       callback: complete,
       // Only include the required properties, and *not* the entire object.
       params: {
-        canvasContext,
+        canvas,
         viewport,
         transform,
         background,
@@ -1511,6 +1517,7 @@ class PDFPageProxy {
       useRequestAnimationFrame: !intentPrint,
       pdfBug: this._pdfBug,
       pageColors,
+      enableHWA: this._transport.enableHWA,
     });
 
     (intentState.renderTasks ||= new Set()).add(internalRenderTask);
@@ -2305,7 +2312,14 @@ class WorkerTransport {
 
   #passwordCapability = null;
 
-  constructor(messageHandler, loadingTask, networkStream, params, factory) {
+  constructor(
+    messageHandler,
+    loadingTask,
+    networkStream,
+    params,
+    factory,
+    enableHWA
+  ) {
     this.messageHandler = messageHandler;
     this.loadingTask = loadingTask;
     this.commonObjs = new PDFObjects();
@@ -2329,6 +2343,7 @@ class WorkerTransport {
     this._fullReader = null;
     this._lastProgress = null;
     this.downloadInfoCapability = Promise.withResolvers();
+    this.enableHWA = enableHWA;
 
     this.setupMessageHandler();
 
@@ -3104,6 +3119,7 @@ class InternalRenderTask {
     useRequestAnimationFrame = false,
     pdfBug = false,
     pageColors = null,
+    enableHWA = false,
   }) {
     this.callback = callback;
     this.params = params;
@@ -3131,7 +3147,8 @@ class InternalRenderTask {
     this._continueBound = this._continue.bind(this);
     this._scheduleNextBound = this._scheduleNext.bind(this);
     this._nextBound = this._next.bind(this);
-    this._canvas = params.canvasContext.canvas;
+    this._canvas = params.canvas;
+    this._enableHWA = enableHWA;
   }
 
   get completed() {
@@ -3161,7 +3178,12 @@ class InternalRenderTask {
       this.stepper.init(this.operatorList);
       this.stepper.nextBreakPoint = this.stepper.getNextBreakPoint();
     }
-    const { canvasContext, viewport, transform, background } = this.params;
+    const { viewport, transform, background } = this.params;
+
+    const canvasContext = this._canvas.getContext("2d", {
+      alpha: false,
+      willReadFrequently: !this._enableHWA,
+    });
 
     this.gfx = new CanvasGraphics(
       canvasContext,

test/driver.js

@@ -1016,7 +1016,7 @@ class Driver {
               }
             }
             const renderContext = {
-              canvasContext: ctx,
+              canvas: this.canvas,
               viewport,
               optionalContentConfigPromise: task.optionalContentConfigPromise,
               annotationCanvasMap,

test/integration/jasmine-boot.js

@@ -41,6 +41,7 @@ async function runTests(results) {
       "stamp_editor_spec.mjs",
       "text_field_spec.mjs",
       "text_layer_spec.mjs",
+      "thumbnail_view_spec.mjs",
       "viewer_spec.mjs",
     ],
   });

test/integration/thumbnail_view_spec.mjs

@@ -0,0 +1,36 @@
+import { closePages, loadAndWait, waitForTimeout } from "./test_utils.mjs";
+
+describe("PDF Thumbnail View", () => {
+  describe("Works without errors", () => {
+    let pages;
+
+    beforeEach(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", "#sidebarToggleButton");
+    });
+
+    afterEach(async () => {
+      await closePages(pages);
+    });
+
+    it("should render thumbnails without errors", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("#sidebarToggleButton");
+
+          const thumbSelector = "#thumbnailView .thumbnailImage";
+          await page.waitForSelector(thumbSelector, { visible: true });
+
+          await page.evaluate(() => {
+            window.PDFViewerApplication.pdfViewer.currentScaleValue = "50";
+          });
+          await waitForTimeout(500); // Give time for rendering.
+
+          const src = await page.$eval(thumbSelector, el => el.src);
+          expect(src)
+            .withContext(`In ${browserName}`)
+            .toMatch(/^data:image\//);
+        })
+      );
+    });
+  });
+});

test/unit/api_spec.js

@@ -4410,7 +4410,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         viewport.height
       );
       const renderTask = pdfPage.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
       });
       expect(renderTask instanceof RenderTask).toEqual(true);
@@ -4446,7 +4446,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         viewport.height
       );
       const renderTask = page.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
       });
       expect(renderTask instanceof RenderTask).toEqual(true);
@@ -4477,7 +4477,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         viewport.height
       );
       const renderTask = page.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
       });
       expect(renderTask instanceof RenderTask).toEqual(true);
@@ -4494,7 +4494,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
       }
 
       const reRenderTask = page.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
       });
       expect(reRenderTask instanceof RenderTask).toEqual(true);
@@ -4518,14 +4518,14 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         viewport.height
       );
       const renderTask1 = page.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
         optionalContentConfigPromise,
       });
       expect(renderTask1 instanceof RenderTask).toEqual(true);
 
       const renderTask2 = page.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
         optionalContentConfigPromise,
       });
@@ -4562,7 +4562,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         viewport.height
       );
       const renderTask = pdfPage.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
       });
       expect(renderTask instanceof RenderTask).toEqual(true);
@@ -4591,7 +4591,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         viewport.height
       );
       const renderTask = pdfPage.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
         background: "#FF0000", // See comment below.
       });
@@ -4651,7 +4651,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
           viewport.height
         );
         const renderTask = pdfPage.render({
-          canvasContext: canvasAndCtx.context,
+          canvas: canvasAndCtx.canvas,
           viewport,
         });
 
@@ -4755,7 +4755,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
           viewport.height
         );
         const renderTask = pdfPage.render({
-          canvasContext: canvasAndCtx.context,
+          canvas: canvasAndCtx.canvas,
           viewport,
         });
 
@@ -4802,7 +4802,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
           viewport.height
         );
         const renderTask = pdfPage.render({
-          canvasContext: canvasAndCtx.context,
+          canvas: canvasAndCtx.canvas,
           viewport,
         });
 
@@ -4852,7 +4852,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
           viewport.height
         );
         const renderTask = pdfPage.render({
-          canvasContext: canvasAndCtx.context,
+          canvas: canvasAndCtx.canvas,
           viewport,
           intent: "print",
           annotationMode: AnnotationMode.ENABLE_STORAGE,
@@ -4911,6 +4911,34 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
 
       await loadingTask.destroy();
     });
+
+    it("should work with the legacy canvasContext parameter", async function () {
+      const loadingTask = getDocument(tracemonkeyGetDocumentParams);
+      const pdfDoc = await loadingTask.promise;
+      const pdfPage = await pdfDoc.getPage(1);
+      const viewport = pdfPage.getViewport({ scale: 1 });
+
+      const { canvasFactory } = pdfDoc;
+      const canvasAndCtx = canvasFactory.create(
+        viewport.width,
+        viewport.height
+      );
+      const renderTask = pdfPage.render({
+        canvasContext: canvasAndCtx.context,
+        viewport,
+      });
+      expect(renderTask instanceof RenderTask).toEqual(true);
+
+      await renderTask.promise;
+      expect(
+        canvasAndCtx.context
+          .getImageData(0, 0, viewport.width, viewport.height)
+          .data.some(channel => channel !== 0)
+      ).toEqual(true);
+
+      canvasFactory.destroy(canvasAndCtx);
+      await loadingTask.destroy();
+    });
   });
 
   describe("Multiple `getDocument` instances", function () {
@@ -4939,7 +4967,7 @@ Caron Broadcasting, Inc., an Ohio corporation (“Lessee”).`)
         viewport.height
       );
       const renderTask = page.render({
-        canvasContext: canvasAndCtx.context,
+        canvas: canvasAndCtx.canvas,
         viewport,
       });
       await renderTask.promise;

test/unit/custom_spec.js

@@ -50,7 +50,7 @@ describe("custom canvas rendering", function () {
     const canvasAndCtx = canvasFactory.create(viewport.width, viewport.height);
 
     const renderTask = page.render({
-      canvasContext: canvasAndCtx.context,
+      canvas: canvasAndCtx.canvas,
       viewport,
     });
     await renderTask.promise;
@@ -70,7 +70,7 @@ describe("custom canvas rendering", function () {
     const canvasAndCtx = canvasFactory.create(viewport.width, viewport.height);
 
     const renderTask = page.render({
-      canvasContext: canvasAndCtx.context,
+      canvas: canvasAndCtx.canvas,
       viewport,
       background: "rgba(255,0,0,1.0)",
     });
@@ -160,7 +160,7 @@ describe("custom ownerDocument", function () {
     const canvasAndCtx = canvasFactory.create(viewport.width, viewport.height);
 
     await page.render({
-      canvasContext: canvasAndCtx.context,
+      canvas: canvasAndCtx.canvas,
       viewport,
     }).promise;
 
@@ -194,7 +194,7 @@ describe("custom ownerDocument", function () {
     const canvasAndCtx = canvasFactory.create(viewport.width, viewport.height);
 
     await page.render({
-      canvasContext: canvasAndCtx.context,
+      canvas: canvasAndCtx.canvas,
       viewport,
     }).promise;
 

web/base_pdf_page_view.js

@@ -17,8 +17,6 @@ import { RenderingCancelledException } from "pdfjs-lib";
 import { RenderingStates } from "./ui_utils.js";
 
 class BasePDFPageView {
-  #enableHWA = false;
-
   #loadingId = null;
 
   #minDurationToUpdateCanvas = 0;
@@ -51,8 +49,6 @@ class BasePDFPageView {
   resume = null;
 
   constructor(options) {
-    this.#enableHWA =
-      #enableHWA in options ? options.#enableHWA : options.enableHWA || false;
     this.eventBus = options.eventBus;
     this.id = options.id;
     this.pageColors = options.pageColors || null;
@@ -166,12 +162,7 @@ class BasePDFPageView {
       }
     };
 
-    const ctx = canvas.getContext("2d", {
-      alpha: false,
-      willReadFrequently: !this.#enableHWA,
-    });
-
-    return { canvas, prevCanvas, ctx };
+    return { canvas, prevCanvas };
   }
 
   #renderContinueCallback = cont => {

web/firefox_print_service.js

@@ -72,7 +72,7 @@ function composePage(
           currentRenderTask = null;
         }
         const renderContext = {
-          canvasContext: ctx,
+          canvas: ctx.canvas,
           transform: [PRINT_UNITS, 0, 0, PRINT_UNITS, 0, 0],
           viewport: pdfPage.getViewport({ scale: 1, rotation: size.rotation }),
           intent: "print",