Measure text bbox independently from the rendering canvas

Author: nicolo-ribaudo

src/display/canvas.js

@@ -1816,7 +1816,9 @@ class CanvasGraphics {
     }
     this.current.fontSizeScale = size / browserFontSize;
 
-    this.ctx.font = `${italic} ${bold} ${browserFontSize}px ${typeface}`;
+    const fontString = `${italic} ${bold} ${browserFontSize}px ${typeface}`;
+    this.ctx.font = fontString;
+    this.dependencyTracker?.setFont(fontString);
   }
 
   setTextRenderingMode(opIdx, mode) {
@@ -1916,7 +1918,7 @@ class CanvasGraphics {
         dt
           .translate(x, y)
           .scale(fontSize, -fontSize)
-          .recordCharacterBBox(opIdx, font)
+          .recordCharacterBBox(opIdx, null, font)
       );
 
       let currentTransform;
@@ -1975,11 +1977,11 @@ class CanvasGraphics {
         ctx.fillText(character, x, y);
         this.dependencyTracker?.recordCharacterBBox(
           opIdx,
+          character,
           font,
           fontSize,
           x,
-          y,
-          () => ctx.measureText(character)
+          y
         );
       }
       if (
@@ -1988,9 +1990,7 @@ class CanvasGraphics {
       ) {
         if (this.dependencyTracker) {
           this.dependencyTracker
-            ?.recordCharacterBBox(opIdx, font, fontSize, x, y, () =>
-              ctx.measureText(character)
-            )
+            ?.recordCharacterBBox(opIdx, character, font, fontSize, x, y)
             .recordDependencies(opIdx, Dependencies.stroke);
         }
         ctx.strokeText(character, x, y);
@@ -2006,7 +2006,14 @@ class CanvasGraphics {
         fontSize,
         path,
       });
-      this.dependencyTracker?.recordCharacterBBox(opIdx, font, fontSize, x, y);
+      this.dependencyTracker?.recordCharacterBBox(
+        opIdx,
+        null,
+        font,
+        fontSize,
+        x,
+        y
+      );
     }
   }
 
@@ -2161,7 +2168,7 @@ class CanvasGraphics {
       const joinedChars = chars.join("");
       ctx.fillText(joinedChars, 0, 0);
       if (dependencyTracker !== null) {
-        const measure = ctx.measureText(joinedChars);
+        const measure = dependencyTracker.measureText(joinedChars);
         dependencyTracker
           .recordBBox(
             opIdx,
@@ -2239,12 +2246,12 @@ class CanvasGraphics {
 
           this.dependencyTracker?.recordCharacterBBox(
             opIdx,
+            character,
             // If we already measured the character, force usage of that
             measure ? { bbox: null } : font,
             fontSize / fontSizeScale,
             scaledX,
-            scaledY,
-            () => measure ?? ctx.measureText(character)
+            scaledY
           );
         } else {
           this.paintChar(

src/display/canvas_dependency_tracker.js

@@ -370,7 +370,15 @@ class CanvasBBoxTracker {
     return this;
   }
 
-  recordCharacterBBox(idx, font, scale = 1, x = 0, y = 0, getMeasure) {
+  setFont(fontString) {
+    return this;
+  }
+
+  measureText(text) {
+    return null;
+  }
+
+  recordCharacterBBox(idx, character, font, scale = 1, x = 0, y = 0) {
     return this;
   }
 
@@ -461,6 +469,12 @@ class CanvasDependencyTracker {
 
   #fontBBoxTrustworthy = new Map();
 
+  // TODO: No tests are failing, but we should set the lang here as it can
+  // affect the used fallback fonts. Probably no tests are failing because we
+  // round bboxes anyway, so it's extremely unlikely that after rounding the
+  // two fonts still have different bboxes.
+  #fontMeasureCtx = new OffscreenCanvas(0, 0).getContext("2d");
+
   #debugMetadata;
 
   #recordDebugMetadataDepenencyAfterRestore;
@@ -676,7 +690,16 @@ class CanvasDependencyTracker {
     return this;
   }
 
-  recordCharacterBBox(idx, font, scale = 1, x = 0, y = 0, getMeasure) {
+  setFont(fontString) {
+    this.#fontMeasureCtx.font = fontString;
+    return this;
+  }
+
+  measureText(text) {
+    return this.#fontMeasureCtx.measureText(text);
+  }
+
+  recordCharacterBBox(idx, character, font, scale = 1, x = 0, y = 0) {
     const fontBBox = font.bbox;
     let isBBoxTrustworthy;
     let computedBBox;
@@ -708,13 +731,13 @@ class CanvasDependencyTracker {
       }
     }
 
-    if (!getMeasure) {
+    if (!character) {
       // We have no way of telling how big this character actually is, record
       // a full page bounding box.
       return this.recordFullPageBBox(idx);
     }
 
-    const measure = getMeasure();
+    const measure = this.#fontMeasureCtx.measureText(character);
 
     if (fontBBox && computedBBox && isBBoxTrustworthy === undefined) {
       // If it's the first time we can compare the font bbox with the actual
@@ -937,6 +960,15 @@ class CanvasNestedDependencyTracker {
     return this;
   }
 
+  setFont(fontString) {
+    this.#dependencyTracker.setFont(fontString);
+    return this;
+  }
+
+  measureText(text) {
+    return this.#dependencyTracker.measureText(text);
+  }
+
   getTransform() {
     return this.#dependencyTracker.getTransform();
   }
@@ -1057,15 +1089,15 @@ class CanvasNestedDependencyTracker {
     return this;
   }
 
-  recordCharacterBBox(idx, font, scale, x, y, getMeasure) {
+  recordCharacterBBox(idx, character, font, scale, x, y) {
     if (!this.#ignoreBBoxes) {
       this.#dependencyTracker.recordCharacterBBox(
         this.#opIdx,
+        character,
         font,
         scale,
         x,
-        y,
-        getMeasure
+        y
       );
     }
     return this;