perf(): optimize perPixelTargetFind

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- perf(): optimize `perPixelTargetFind` [#8770](https://github.com/fabricjs/fabric.js/pull/8770)
 - ci(): disallow circular deps [#8759](https://github.com/fabricjs/fabric.js/pull/8759)
 - fix(): env WebGL import cycle [#8758](https://github.com/fabricjs/fabric.js/pull/8758)
 - chore(TS): remove controls from prototype. BREAKING: controls aren't shared anymore [#8753](https://github.com/fabricjs/fabric.js/pull/8753)

src/canvas/SelectableCanvas.ts

@@ -524,7 +524,7 @@ export class SelectableCanvas<
   declare upperCanvasEl: HTMLCanvasElement;
   declare contextTop: CanvasRenderingContext2D;
   declare wrapperEl: HTMLDivElement;
-  declare cacheCanvasEl: HTMLCanvasElement;
+  declare pixelFindCanvasEl: HTMLCanvasElement;
   protected declare _isCurrentlyDrawing: boolean;
   declare freeDrawingBrush?: BaseBrush;
   declare _activeObject?: FabricObject;
@@ -667,10 +667,23 @@ export class SelectableCanvas<
    * @return {Boolean}
    */
   isTargetTransparent(target: FabricObject, x: number, y: number): boolean {
+    const ctx = this.contextCache;
+    const retina = this.getRetinaScaling();
+    const size = Math.max(2 * this.targetFindTolerance * retina, 10);
+    if (this.pixelFindCanvasEl.width < size) {
+      // TODO: handle in set
+      this.pixelFindCanvasEl.width = this.pixelFindCanvasEl.height = size;
+    } else {
+      this.clearContext(ctx);
+    }
     // in case the target is the activeObject, we cannot execute this optimization
     // because we need to draw controls too.
-    if (isFabricObjectCached(target) && target !== this._activeObject) {
-      // optimizatio: we can reuse the cache
+    if (
+      isFabricObjectCached(target) &&
+      target !== this._activeObject &&
+      !target.dirty
+    ) {
+      // optimization: we can reuse the cache
       const normalizedPointer = this._normalizePointer(target, new Point(x, y)),
         targetRelativeX = Math.max(
           target.cacheTranslationX + normalizedPointer.x * target.zoomX,
@@ -680,31 +693,46 @@ export class SelectableCanvas<
           target.cacheTranslationY + normalizedPointer.y * target.zoomY,
           0
         );
+      // transform tolerance according to vpt
+      // TODO: use sendVectorToPlane
+      const tolerance = new Point()
+        .scalarAdd(this.targetFindTolerance)
+        .transform(invertTransform(this.viewportTransform), true);
+      const size = tolerance.scalarMultiply(2).max(new Point(1, 1));
+      // performance optimization:
+      // we draw the hit area to the dedicated canvas instead of using `getImageData` on the target's cache canvas
+      // since `size` is transformed according to vpt the image is drawn as if transformed as well so `targetFindTolerance` can be used as the tolerance value
+      ctx.drawImage(
+        target._cacheCanvas,
+        Math.floor(targetRelativeX - tolerance.x),
+        Math.floor(targetRelativeY - tolerance.y),
+        Math.ceil(size.x),
+        Math.ceil(size.y),
+        0,
+        0,
+        Math.ceil(size.x * retina),
+        Math.ceil(size.y * retina)
+      );
 
       return isTransparent(
-        target._cacheContext,
-        Math.round(targetRelativeX),
-        Math.round(targetRelativeY),
+        ctx,
+        tolerance.x,
+        tolerance.y,
         this.targetFindTolerance
       );
     }
 
-    const ctx = this.contextCache,
-      originalColor = target.selectionBackgroundColor,
-      v = this.viewportTransform;
-
-    target.selectionBackgroundColor = '';
-
-    this.clearContext(ctx);
-
     ctx.save();
-    ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
+    ctx.translate(-x + this.targetFindTolerance, -y + this.targetFindTolerance);
+    ctx.transform(...this.viewportTransform);
     target.render(ctx);
     ctx.restore();
-
-    target.selectionBackgroundColor = originalColor;
-
-    return isTransparent(ctx, x, y, this.targetFindTolerance);
+    return isTransparent(
+      ctx,
+      this.targetFindTolerance,
+      this.targetFindTolerance,
+      this.targetFindTolerance
+    );
   }
 
   /**
@@ -1195,7 +1223,6 @@ export class SelectableCanvas<
   _setBackstoreDimension(prop: keyof TSize, value: number) {
     super._setBackstoreDimension(prop, value);
     this.upperCanvasEl[prop] = value;
-    this.cacheCanvasEl[prop] = value;
   }
 
   /**
@@ -1237,8 +1264,15 @@ export class SelectableCanvas<
   }
 
   protected _createCacheCanvas() {
-    this.cacheCanvasEl = this._createCanvasElement();
-    this.contextCache = this.cacheCanvasEl.getContext('2d')!;
+    this.pixelFindCanvasEl = this._createCanvasElement();
+    this.contextCache = this.pixelFindCanvasEl.getContext('2d', {
+      willReadFrequently: true,
+    })!;
+    const retina = this.getRetinaScaling();
+    this.contextCache.scale(retina, retina);
+    this.pixelFindCanvasEl.width = this.pixelFindCanvasEl.height = Math.ceil(
+      Math.max(2 * this.targetFindTolerance * retina, retina)
+    );
   }
 
   protected _initWrapperElement() {

src/util/misc/isTransparent.ts

@@ -1,3 +1,5 @@
+import { capValue } from './capValue';
+
 /**
  * Returns true if context has transparent pixel
  * at specified location (taking tolerance into account)
@@ -13,39 +15,21 @@ export const isTransparent = (
   y: number,
   tolerance: number
 ): boolean => {
-  // If tolerance is > 0 adjust start coords to take into account.
-  // If moves off Canvas fix to 0
-  if (tolerance > 0) {
-    if (x > tolerance) {
-      x -= tolerance;
-    } else {
-      x = 0;
-    }
-    if (y > tolerance) {
-      y -= tolerance;
-    } else {
-      y = 0;
-    }
-  }
-
-  let _isTransparent = true;
+  tolerance = Math.round(Math.max(tolerance, 0));
+  const sx = Math.floor(Math.max(x - tolerance, 0));
+  const sy = Math.floor(Math.max(y - tolerance, 0));
   const { data } = ctx.getImageData(
-    x,
-    y,
-    tolerance * 2 || 1,
-    tolerance * 2 || 1
+    sx,
+    sy,
+    capValue(1, tolerance * 2, ctx.canvas.width - sx),
+    capValue(1, tolerance * 2, ctx.canvas.height - sy)
   );
-  const l = data.length;
-
-  // Split image data - for tolerance > 1, pixelDataSize = 4;
-  for (let i = 3; i < l; i += 4) {
+  for (let i = 3; i < data.length; i += 4) {
     const alphaChannel = data[i];
     if (alphaChannel > 0) {
-      // Stop if colour found
-      _isTransparent = false;
-      break;
+      return false;
     }
   }
 
-  return _isTransparent;
+  return true;
 };