From da4acaad77ce53bcc10d8bac99a7d44b396b14dd Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Tue, 30 Jul 2024 16:03:33 +0200
Subject: [PATCH] [Editor] Add a checkerboard behind the image preview in the
 new alt-text dialog in order to see its potential transparency

---
 src/display/editor/stamp.js | 39 ++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/display/editor/stamp.js b/src/display/editor/stamp.js
index 597c4a65348f8e..d306b9a822b92b 100644
--- a/src/display/editor/stamp.js
+++ b/src/display/editor/stamp.js
@@ -384,12 +384,33 @@ class StampEditor extends AnnotationEditor {
 
     canvas.width = width;
     canvas.height = height;
-    const ctx = canvas.getContext("2d", {
-      willReadFrequently: true,
-    });
+    const ctx = canvas.getContext("2d");
     ctx.filter = this._uiManager.hcmFilter;
 
-    if (createImageData && this._uiManager.hcmFilter !== "none") {
+    // Add a checkerboard pattern as a background in case the image has some
+    // transparency.
+    let white = "white",
+      black = "#cfcfd8";
+    if (this._uiManager.hcmFilter !== "none") {
+      black = "black";
+    } else if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+      white = "#8f8f9d";
+      black = "#42414d";
+    }
+    const boxDim = 15;
+    ctx.fillStyle = white;
+    ctx.fillStyle = black;
+    const pattern = new OffscreenCanvas(boxDim * 2, boxDim * 2);
+    const patternCtx = pattern.getContext("2d");
+    patternCtx.fillStyle = white;
+    patternCtx.fillRect(0, 0, boxDim * 2, boxDim * 2);
+    patternCtx.fillStyle = black;
+    patternCtx.fillRect(0, 0, boxDim, boxDim);
+    patternCtx.fillRect(boxDim, boxDim, boxDim, boxDim);
+    ctx.fillStyle = ctx.createPattern(pattern, "repeat");
+    ctx.fillRect(0, 0, width, height);
+
+    if (createImageData) {
       const offscreen = new OffscreenCanvas(width, height);
       const offscreenCtx = offscreen.getContext("2d", {
         willReadFrequently: true,
@@ -422,15 +443,7 @@ class StampEditor extends AnnotationEditor {
       width,
       height
     );
-    let imageData = null;
-    if (createImageData) {
-      imageData = {
-        width,
-        height,
-        data: ctx.getImageData(0, 0, width, height).data,
-      };
-    }
-    return { canvas, imageData };
+    return { canvas, imageData: null };
   }
 
   /**