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,7 @@ class PDFDocumentProxy {
  * Page render parameters.
  *
  * @typedef {Object} RenderParameters
- * @property {CanvasRenderingContext2D} canvasContext - A 2D context of a DOM
- *   Canvas object.
+ * @property {HTMLCanvasElement} canvas - A DOM Canvas object.
  * @property {PageViewport} viewport - Rendering viewport obtained by calling
  *   the `PDFPageProxy.getViewport` method.
  * @property {string} [intent] - Rendering intent, can be 'display', 'print',
@@ -1404,7 +1404,7 @@ class PDFPageProxy {
    *   resolved when the page finishes rendering.
    */
   render({
-    canvasContext,
+    canvas,
     viewport,
     intent = "display",
     annotationMode = AnnotationMode.ENABLE,
@@ -1496,7 +1496,7 @@ class PDFPageProxy {
       callback: complete,
       // Only include the required properties, and *not* the entire object.
       params: {
-        canvasContext,
+        canvas,
         viewport,
         transform,
         background,
@@ -1511,6 +1511,7 @@ class PDFPageProxy {
       useRequestAnimationFrame: !intentPrint,
       pdfBug: this._pdfBug,
       pageColors,
+      enableHWA: this._transport.enableHWA,
     });
 
     (intentState.renderTasks ||= new Set()).add(internalRenderTask);
@@ -2305,7 +2306,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 +2337,7 @@ class WorkerTransport {
     this._fullReader = null;
     this._lastProgress = null;
     this.downloadInfoCapability = Promise.withResolvers();
+    this.enableHWA = enableHWA;
 
     this.setupMessageHandler();
 
@@ -3104,6 +3113,7 @@ class InternalRenderTask {
     useRequestAnimationFrame = false,
     pdfBug = false,
     pageColors = null,
+    enableHWA = false,
   }) {
     this.callback = callback;
     this.params = params;
@@ -3131,7 +3141,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 +3172,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/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,
@@ -4939,7 +4939,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/pdf_page_detail_view.js

@@ -214,7 +214,7 @@ class PDFPageDetailView extends BasePDFPageView {
 
     const canvasWrapper = this.pageView._ensureCanvasWrapper();
 
-    const { canvas, prevCanvas, ctx } = this._createCanvas(newCanvas => {
+    const { canvas, prevCanvas } = this._createCanvas(newCanvas => {
       // If there is already the background canvas, inject this new canvas
       // after it. We cannot simply use .append because all canvases must
       // be before the SVG elements used for drawings.
@@ -249,7 +249,7 @@ class PDFPageDetailView extends BasePDFPageView {
     style.left = `${(area.minX * 100) / width}%`;
 
     const renderingPromise = this._drawCanvas(
-      this.pageView._getRenderingContext(ctx, transform),
+      this.pageView._getRenderingContext(canvas, transform),
       () => {
         // If the rendering is cancelled, keep the old canvas visible.
         this.canvas?.remove();

web/pdf_page_view.js

@@ -95,8 +95,6 @@ import { XfaLayerBuilder } from "./xfa_layer_builder.js";
  * @property {IL10n} [l10n] - Localization service.
  * @property {Object} [layerProperties] - The object that is used to lookup
  *   the necessary layer-properties.
- * @property {boolean} [enableHWA] - Enables hardware acceleration for
- *   rendering. The default value is `false`.
  * @property {boolean} [enableAutoLinking] - Enable creation of hyperlinks from
  *   text that look like URLs. The default value is `true`.
  */
@@ -912,9 +910,9 @@ class PDFPageView extends BasePDFPageView {
     return canvasWrapper;
   }
 
-  _getRenderingContext(canvasContext, transform) {
+  _getRenderingContext(canvas, transform) {
     return {
-      canvasContext,
+      canvas,
       transform,
       viewport: this.viewport,
       annotationMode: this.#annotationMode,
@@ -1000,7 +998,7 @@ class PDFPageView extends BasePDFPageView {
     const { width, height } = viewport;
     this.#originalViewport = viewport;
 
-    const { canvas, prevCanvas, ctx } = this._createCanvas(newCanvas => {
+    const { canvas, prevCanvas } = this._createCanvas(newCanvas => {
       // Always inject the canvas as the first element in the wrapper.
       canvasWrapper.prepend(newCanvas);
     });
@@ -1042,7 +1040,7 @@ class PDFPageView extends BasePDFPageView {
       ? [outputScale.sx, 0, 0, outputScale.sy, 0, 0]
       : null;
     const resultPromise = this._drawCanvas(
-      this._getRenderingContext(ctx, transform),
+      this._getRenderingContext(canvas, transform),
       () => {
         prevCanvas?.remove();
         this._resetCanvas();