Modify 'extractCanvases' and 'isCanvasMonochrome' to support OffScreenCanvas

Author: Aditi-1400

src/core/evaluator.js

@@ -472,6 +472,8 @@ class PartialEvaluator {
   }
 
   hasCanvasFilters(resources) {
+    // TODO(Aditi): Investigate font resources for potential
+    // filters
     if (!(resources instanceof Dict)) {
       return false;
     }

src/display/api.js

@@ -3691,8 +3691,6 @@ class InternalRenderTask {
 
     const { viewport, transform, background, dependencyTracker } = this.params;
 
-    // TODO(Aditi): Should we disable worker rendering when pdfBug is enabled?
-
     // Worker Rendering is disabled when canvas filters are present because
     // OffscreenCanvas's OffscreenCanvasRenderingContext2D completely ignores
     // the value of .filter defined with a data url.
@@ -3704,7 +3702,6 @@ class InternalRenderTask {
       !hasCanvasFilters &&
       !this.pageColors;
 
-    // TODO(Aditi): Should we disable worker rendering when pdfBug is enabled?
     if (!useWorkerRendering) {
       this._rendererHandler = null;
     }
@@ -3738,8 +3735,6 @@ class InternalRenderTask {
           },
           configurable: true,
         });
-        // TODO(Aditi): Add isCanvasMonochrome and other helpers for
-        // detailCanvas tests
         const initParams = {
           canvas: offscreen,
           pageIndex: this._pageIndex,

src/display/renderer_worker.js

@@ -200,7 +200,6 @@ class RendererMessageHandler {
         transparency,
         background,
       } = data;
-      // TODO(Aditi): Verify if dependencyTracker can be used.
       const objs = this.#getPageObjs(pageIndex);
       const optionalContentConfig = new OptionalContentConfig(
         optionalContentConfigData,

test/integration/test_utils.mjs

@@ -896,8 +896,28 @@ function isCanvasMonochrome(page, pageNumber, rectangle, color) {
       const canvas = document.querySelector(
         `.page[data-page-number = "${pageN}"] .canvasWrapper canvas`
       );
+      if (!canvas) {
+        return false;
+      }
       const canvasRect = canvas.getBoundingClientRect();
-      const ctx = canvas.getContext("2d");
+      let ctx;
+      try {
+        ctx = canvas.getContext("2d", { willReadFrequently: true });
+      } catch {
+        // Happens when the canvas has been transferred to OffscreenCanvas.
+      }
+      if (!ctx) {
+        let tempCanvas;
+        if (typeof OffscreenCanvas === "function") {
+          tempCanvas = new OffscreenCanvas(canvas.width, canvas.height);
+        } else {
+          tempCanvas = document.createElement("canvas");
+          tempCanvas.width = canvas.width;
+          tempCanvas.height = canvas.height;
+        }
+        ctx = tempCanvas.getContext("2d", { willReadFrequently: true });
+        ctx.drawImage(canvas, 0, 0);
+      }
       rect ||= canvasRect;
       const { data } = ctx.getImageData(
         rect.x - canvasRect.x,

test/integration/viewer_spec.mjs

@@ -486,11 +486,56 @@ describe("PDF viewer", () => {
       const pageOne = document.querySelector(
         `.page[data-page-number='${pageNumber}']`
       );
+      function getContextFromCanvas(canvas) {
+        try {
+          return canvas.getContext("2d", { willReadFrequently: true });
+        } catch {
+          // Can happen when the canvas has been transferred to OffscreenCanvas.
+        }
+
+        let tempCanvas;
+        if (typeof OffscreenCanvas === "function") {
+          tempCanvas = new OffscreenCanvas(canvas.width, canvas.height);
+        } else {
+          tempCanvas = document.createElement("canvas");
+          tempCanvas.width = canvas.width;
+          tempCanvas.height = canvas.height;
+        }
+        const tempCtx = tempCanvas.getContext("2d", {
+          willReadFrequently: true,
+        });
+        tempCtx.drawImage(canvas, 0, 0);
+        return tempCtx;
+      }
+
+      if (!pageOne) {
+        return [];
+      }
+
       return Array.from(pageOne.querySelectorAll("canvas"), canvas => {
         const { width, height } = canvas;
-        const ctx = canvas.getContext("2d");
-        const topLeft = ctx.getImageData(2, 2, 1, 1).data;
-        const bottomRight = ctx.getImageData(width - 3, height - 3, 1, 1).data;
+        if (width === 0 || height === 0) {
+          return {
+            size: 0,
+            width,
+            height,
+            topLeft: null,
+            bottomRight: null,
+          };
+        }
+        const ctx = getContextFromCanvas(canvas);
+        const topLeft = ctx.getImageData(
+          Math.min(2, width - 1),
+          Math.min(2, height - 1),
+          1,
+          1
+        ).data;
+        const bottomRight = ctx.getImageData(
+          Math.max(0, width - 3),
+          Math.max(0, height - 3),
+          1,
+          1
+        ).data;
         return {
           size: width * height,
           width,