pixel-data-js 0.35.0 → 0.37.0

package/dist/index.prod.js

@@ -13,43 +13,7 @@ __export(errors_exports, {
 var OFFSCREEN_CANVAS_CTX_FAILED = "Failed to create OffscreenCanvas context";
 var CANVAS_CTX_FAILED = "Failed to create Canvas context";
 
-// src/color.ts
-function packColor(r, g, b, a) {
-  return (a << 24 | b << 16 | g << 8 | r) >>> 0;
-}
-function packRGBA({
-  r,
-  g,
-  b,
-  a
-}) {
-  return (a << 24 | b << 16 | g << 8 | r) >>> 0;
-}
-var unpackRed = (packed) => packed >>> 0 & 255;
-var unpackGreen = (packed) => packed >>> 8 & 255;
-var unpackBlue = (packed) => packed >>> 16 & 255;
-var unpackAlpha = (packed) => packed >>> 24 & 255;
-function unpackColor(packed) {
-  return {
-    r: packed >>> 0 & 255,
-    g: packed >>> 8 & 255,
-    b: packed >>> 16 & 255,
-    a: packed >>> 24 & 255
-  };
-}
-var SCRATCH_RGBA = {
-  r: 0,
-  g: 0,
-  b: 0,
-  a: 0
-};
-function unpackColorTo(packed, scratch = SCRATCH_RGBA) {
-  scratch.r = packed >>> 0 & 255;
-  scratch.g = packed >>> 8 & 255;
-  scratch.b = packed >>> 16 & 255;
-  scratch.a = packed >>> 24 & 255;
-  return scratch;
-}
+// src/Color/colorDistance.ts
 function colorDistance(a, b) {
   const dr = (a & 255) - (b & 255);
   const dg = (a >>> 8 & 255) - (b >>> 8 & 255);
@@ -57,34 +21,6 @@ function colorDistance(a, b) {
   const da = (a >>> 24 & 255) - (b >>> 24 & 255);
   return dr * dr + dg * dg + db * db + da * da;
 }
-function lerpColor32(a, b, t) {
-  const r = (a & 255) + t * ((b & 255) - (a & 255));
-  const g = (a >>> 8 & 255) + t * ((b >>> 8 & 255) - (a >>> 8 & 255));
-  const b_ = (a >>> 16 & 255) + t * ((b >>> 16 & 255) - (a >>> 16 & 255));
-  const a_ = (a >>> 24 & 255) + t * ((b >>> 24 & 255) - (a >>> 24 & 255));
-  return (a_ << 24 | b_ << 16 | g << 8 | r) >>> 0;
-}
-function lerpColor32Fast(src, dst, w) {
-  const invA = 255 - w;
-  const rb = (src & 16711935) * w + (dst & 16711935) * invA >>> 8 & 16711935;
-  const ga = (src >>> 8 & 16711935) * w + (dst >>> 8 & 16711935) * invA >>> 8 & 16711935;
-  return (rb | ga << 8) >>> 0;
-}
-function color32ToHex(color) {
-  const r = (color & 255).toString(16).padStart(2, "0");
-  const g = (color >>> 8 & 255).toString(16).padStart(2, "0");
-  const b = (color >>> 16 & 255).toString(16).padStart(2, "0");
-  const a = (color >>> 24 & 255).toString(16).padStart(2, "0");
-  return `#${r}${g}${b}${a}`;
-}
-function color32ToCssRGBA(color) {
-  const r = color & 255;
-  const g = color >>> 8 & 255;
-  const b = color >>> 16 & 255;
-  const a = color >>> 24 & 255;
-  const alpha = Number((a / 255).toFixed(3));
-  return `rgba(${r},${g},${b},${alpha})`;
-}
 
 // src/ImageData/extractImageDataBuffer.ts
 function extractImageDataBuffer(imageData, _x, _y, _w, _h) {
@@ -1845,9 +1781,6 @@ function makeReusableCanvasMeta(factory) {
       canvas.width = width;
       canvas.height = height;
       ctx.imageSmoothingEnabled = false;
-    } else {
-      ctx.setTransform(1, 0, 0, 1, 0, 0);
-      ctx.clearRect(0, 0, width, height);
     }
     return result;
   }
@@ -1968,6 +1901,96 @@ async function writeImageDataToClipboard(imageData) {
   return writeImgBlobToClipboard(blob);
 }
 
+// src/Color/lerpColor32.ts
+function lerpColor32(a, b, t) {
+  const r = (a & 255) + t * ((b & 255) - (a & 255));
+  const g = (a >>> 8 & 255) + t * ((b >>> 8 & 255) - (a >>> 8 & 255));
+  const b_ = (a >>> 16 & 255) + t * ((b >>> 16 & 255) - (a >>> 16 & 255));
+  const a_ = (a >>> 24 & 255) + t * ((b >>> 24 & 255) - (a >>> 24 & 255));
+  return (a_ << 24 | b_ << 16 | g << 8 | r) >>> 0;
+}
+function lerpColor32Fast(src, dst, w) {
+  const invA = 255 - w;
+  const rb = (src & 16711935) * w + (dst & 16711935) * invA >>> 8 & 16711935;
+  const ga = (src >>> 8 & 16711935) * w + (dst >>> 8 & 16711935) * invA >>> 8 & 16711935;
+  return (rb | ga << 8) >>> 0;
+}
+
+// src/Color/convert-color.ts
+function color32ToHex(color) {
+  const r = (color & 255).toString(16).padStart(2, "0");
+  const g = (color >>> 8 & 255).toString(16).padStart(2, "0");
+  const b = (color >>> 16 & 255).toString(16).padStart(2, "0");
+  const a = (color >>> 24 & 255).toString(16).padStart(2, "0");
+  return `#${r}${g}${b}${a}`;
+}
+function color32ToCssRGBAString(color) {
+  const r = color & 255;
+  const g = color >>> 8 & 255;
+  const b = color >>> 16 & 255;
+  const a = color >>> 24 & 255;
+  const alpha = Number((a / 255).toFixed(3));
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function color32ToCssRGBA(color) {
+  const r = color & 255;
+  const g = color >>> 8 & 255;
+  const b = color >>> 16 & 255;
+  const a = color >>> 24 & 255;
+  return {
+    r,
+    g,
+    b,
+    a: a / 255
+  };
+}
+function cssRGBAToColor32({
+  r,
+  g,
+  b,
+  a
+}) {
+  return (a * 255 << 24 | b << 16 | g << 8 | r) >>> 0;
+}
+
+// src/Color/pack-color.ts
+function packColor(r, g, b, a) {
+  return (a << 24 | b << 16 | g << 8 | r) >>> 0;
+}
+function packRGBA({
+  r,
+  g,
+  b,
+  a
+}) {
+  return (a << 24 | b << 16 | g << 8 | r) >>> 0;
+}
+var unpackRed = (packed) => packed >>> 0 & 255;
+var unpackGreen = (packed) => packed >>> 8 & 255;
+var unpackBlue = (packed) => packed >>> 16 & 255;
+var unpackAlpha = (packed) => packed >>> 24 & 255;
+function unpackColor(packed) {
+  return {
+    r: packed >>> 0 & 255,
+    g: packed >>> 8 & 255,
+    b: packed >>> 16 & 255,
+    a: packed >>> 24 & 255
+  };
+}
+var SCRATCH_RGBA = {
+  r: 0,
+  g: 0,
+  b: 0,
+  a: 0
+};
+function unpackColorTo(packed, scratch = SCRATCH_RGBA) {
+  scratch.r = packed >>> 0 & 255;
+  scratch.g = packed >>> 8 & 255;
+  scratch.b = packed >>> 16 & 255;
+  scratch.a = packed >>> 24 & 255;
+  return scratch;
+}
+
 // src/Control/BatchedQueue.ts
 function makeBatchedQueue(processor, queue) {
   let activeSet = /* @__PURE__ */ new Set();
@@ -2147,10 +2170,14 @@ var PixelAccumulator = class {
    * @param y pixel y coordinate
    */
   storePixelBeforeState(x, y) {
-    const shift = this.config.tileShift;
     const columns = this.config.targetColumns;
-    const tx = x >> shift;
-    const ty = y >> shift;
+    const targetWidth = this.config.targetWidth;
+    const targetHeight = this.config.targetHeight;
+    if (x < 0 || x >= targetWidth || y < 0 || y >= targetHeight) {
+      return null;
+    }
+    const tx = x * this.config.invTileSize | 0;
+    const ty = y * this.config.invTileSize | 0;
     const id = ty * columns + tx;
     let tile = this.lookup[id];
     let added = false;
@@ -2177,12 +2204,21 @@ var PixelAccumulator = class {
    * @param h pixel height
    */
   storeRegionBeforeState(x, y, w, h) {
-    const shift = this.config.tileShift;
     const columns = this.config.targetColumns;
-    const startX = x >> shift;
-    const startY = y >> shift;
-    const endX = x + w - 1 >> shift;
-    const endY = y + h - 1 >> shift;
+    const targetWidth = this.config.targetWidth;
+    const targetHeight = this.config.targetHeight;
+    const invTileSize = this.config.invTileSize;
+    const clipX1 = Math.max(0, x);
+    const clipY1 = Math.max(0, y);
+    const clipX2 = Math.min(targetWidth - 1, x + w - 1);
+    const clipY2 = Math.min(targetHeight - 1, y + h - 1);
+    if (clipX2 < clipX1 || clipY2 < clipY1) {
+      return null;
+    }
+    const startX = clipX1 * invTileSize | 0;
+    const startY = clipY1 * invTileSize | 0;
+    const endX = clipX2 * invTileSize | 0;
+    const endY = clipY2 * invTileSize | 0;
     const startIndex = this.beforeTiles.length;
     for (let ty = startY; ty <= endY; ty++) {
       for (let tx = startX; tx <= endX; tx++) {
@@ -2299,31 +2335,6 @@ var PixelAccumulator = class {
   }
 };
 
-// src/History/PixelEngineConfig.ts
-var PixelEngineConfig = class {
-  tileSize;
-  // pixelX = tileX << tileShift
-  // pixelY = tileY << tileShift
-  tileShift;
-  tileMask;
-  tileArea;
-  target;
-  targetColumns = 0;
-  targetRows = 0;
-  constructor(tileSize, target) {
-    if ((tileSize & tileSize - 1) !== 0) {
-      throw new Error("tileSize must be a power of 2");
-    }
-    this.tileSize = tileSize;
-    this.tileShift = 31 - Math.clz32(tileSize);
-    this.tileMask = tileSize - 1;
-    this.tileArea = tileSize * tileSize;
-    this.target = target;
-    this.targetColumns = target.w + this.tileMask >> this.tileShift;
-    this.targetRows = target.h + this.tileMask >> this.tileShift;
-  }
-};
-
 // src/PixelData/applyAlphaMaskToPixelData.ts
 function applyAlphaMaskToPixelData(target, mask, opts) {
   const targetX = opts?.x ?? 0;
@@ -2517,6 +2528,8 @@ function makePixelTile(id, tx, ty, tileSize, tileArea) {
     id,
     tx,
     ty,
+    x: tx * tileSize,
+    y: ty * tileSize,
     w: tileSize,
     h: tileSize,
     data: data32,
@@ -2526,25 +2539,28 @@ function makePixelTile(id, tx, ty, tileSize, tileArea) {
 
 // src/Tile/TilePool.ts
 var TilePool = class {
-  constructor(config, tileFactory) {
+  constructor(tileSize, tileFactory) {
+    this.tileSize = tileSize;
     this.tileFactory = tileFactory;
     this.pool = [];
-    this.tileSize = config.tileSize;
-    this.tileArea = config.tileArea;
+    this.tileSize = tileSize;
+    this.tileArea = tileSize * tileSize;
   }
   pool;
-  tileSize;
   tileArea;
   getTile(id, tx, ty) {
     let tile = this.pool.pop();
+    const tileSize = this.tileSize;
     if (tile) {
       tile.id = id;
       tile.tx = tx;
       tile.ty = ty;
+      tile.x = tx * tileSize;
+      tile.y = ty * tileSize;
       tile.data.fill(0);
       return tile;
     }
-    return this.tileFactory(id, tx, ty, this.tileSize, this.tileArea);
+    return this.tileFactory(id, tx, ty, tileSize, this.tileArea);
   }
   releaseTile(tile) {
     this.pool.push(tile);
@@ -2561,6 +2577,25 @@ var TilePool = class {
   }
 };
 
+// src/Tile/TileTargetConfig.ts
+function makeTileTargetConfig(tileSize, target) {
+  return {
+    target,
+    ...makeTileTargetMeta(tileSize, target)
+  };
+}
+function makeTileTargetMeta(tileSize, target) {
+  return {
+    targetWidth: target.w,
+    targetHeight: target.h,
+    tileSize,
+    invTileSize: 1 / tileSize,
+    tileArea: tileSize * tileSize,
+    targetColumns: Math.ceil(target.w / tileSize),
+    targetRows: Math.ceil(target.h / tileSize)
+  };
+}
+
 // src/History/PixelWriter.ts
 var PixelWriter = class {
   historyManager;
@@ -2573,10 +2608,10 @@ var PixelWriter = class {
   constructor(target, mutatorFactory, options) {
     const tileSize = options?.tileSize ?? 256;
     const maxHistorySteps = options?.maxHistorySteps ?? 50;
-    this.config = new PixelEngineConfig(tileSize, target);
+    this.config = makeTileTargetConfig(tileSize, target);
     this.historyManager = options?.historyManager ?? new HistoryManager(maxHistorySteps);
     this.historyActionFactory = options?.historyActionFactory ?? makeHistoryAction;
-    this.pixelTilePool = options?.pixelTilePool ?? new TilePool(this.config, makePixelTile);
+    this.pixelTilePool = options?.pixelTilePool ?? new TilePool(this.config.tileSize, makePixelTile);
     this.accumulator = options?.accumulator ?? new PixelAccumulator(this.config, this.pixelTilePool);
     this.mutator = mutatorFactory(this);
   }
@@ -2653,6 +2688,7 @@ var mutatorApplyAlphaMask = ((writer, deps = defaults) => {
       const w = opts?.w ?? target.w;
       const h = opts?.h ?? target.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+      if (!didChange) return false;
       return didChange(applyAlphaMaskToPixelData2(target, mask, opts));
     }
   };
@@ -2755,7 +2791,12 @@ var mutatorApplyBinaryMask = ((writer, deps = defaults2) => {
       const w = opts?.w ?? target.w;
       const h = opts?.h ?? target.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
-      return didChange(applyBinaryMaskToPixelData2(target, mask, opts));
+      if (!didChange) return false;
+      const b = applyBinaryMaskToPixelData2(target, mask, opts);
+      console.log({
+        b
+      });
+      return didChange(b);
     }
   };
 });
@@ -2778,6 +2819,7 @@ var mutatorApplyMask = ((writer, deps = defaults3) => {
       const w = opts?.w ?? target.w;
       const h = opts?.h ?? target.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+      if (!didChange) return false;
       if (mask.type === 1 /* BINARY */) {
         return didChange(applyBinaryMaskToPixelData2(target, mask, opts));
       } else {
@@ -2922,6 +2964,7 @@ var mutatorBlendAlphaMask = ((writer, deps = defaults4) => {
       const w = opts?.w ?? src.w;
       const h = opts?.h ?? src.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+      if (!didChange) return false;
       return didChange(blendPixelDataAlphaMask2(writer.config.target, src, mask, opts));
     }
   };
@@ -3049,6 +3092,7 @@ var mutatorBlendBinaryMask = ((writer, deps = defaults5) => {
       const w = opts?.w ?? src.w;
       const h = opts?.h ?? src.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+      if (!didChange) return false;
       return didChange(blendPixelDataBinaryMask2(writer.config.target, src, mask, opts));
     }
   };
@@ -3123,6 +3167,7 @@ var mutatorBlendColor = ((writer, deps = defaults6) => {
       const w = opts?.w ?? target.w;
       const h = opts?.h ?? target.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+      if (!didChange) return false;
       return didChange(blendColorPixelData2(target, color, opts));
     }
   };
@@ -3235,6 +3280,7 @@ var mutatorBlendColorPaintAlphaMask = ((writer, deps = defaults7) => {
       const tx = x + mask.centerOffsetX;
       const ty = y + mask.centerOffsetY;
       const didChange = writer.accumulator.storeRegionBeforeState(tx, ty, mask.w, mask.h);
+      if (!didChange) return false;
       OPTS.x = tx;
       OPTS.y = ty;
       OPTS.alpha = alpha;
@@ -3331,6 +3377,7 @@ var mutatorBlendColorPaintBinaryMask = ((writer, deps = defaults8) => {
       const tx = x + mask.centerOffsetX;
       const ty = y + mask.centerOffsetY;
       const didChange = writer.accumulator.storeRegionBeforeState(tx, ty, mask.w, mask.h);
+      if (!didChange) return false;
       OPTS.x = tx;
       OPTS.y = ty;
       OPTS.alpha = alpha;
@@ -3343,33 +3390,44 @@ var mutatorBlendColorPaintBinaryMask = ((writer, deps = defaults8) => {
 // src/History/PixelMutator/mutatorBlendColorPaintMask.ts
 var defaults9 = {
   blendColorPixelDataAlphaMask,
-  blendColorPixelDataBinaryMask
+  blendColorPixelDataBinaryMask,
+  blendColorPixelData
 };
 var mutatorBlendColorPaintMask = ((writer, deps = defaults9) => {
   const {
     blendColorPixelDataBinaryMask: blendColorPixelDataBinaryMask2 = defaults9.blendColorPixelDataBinaryMask,
-    blendColorPixelDataAlphaMask: blendColorPixelDataAlphaMask2 = defaults9.blendColorPixelDataAlphaMask
+    blendColorPixelDataAlphaMask: blendColorPixelDataAlphaMask2 = defaults9.blendColorPixelDataAlphaMask,
+    blendColorPixelData: blendColorPixelData2 = defaults9.blendColorPixelData
   } = deps;
   const OPTS = {
     x: 0,
     y: 0,
     blendFn: sourceOverPerfect,
-    alpha: 255
+    alpha: 255,
+    w: void 0,
+    h: void 0
   };
   return {
     blendColorPaintMask(color, mask, x, y, alpha = 255, blendFn = sourceOverPerfect) {
       const tx = x + mask.centerOffsetX;
       const ty = y + mask.centerOffsetY;
       const didChange = writer.accumulator.storeRegionBeforeState(tx, ty, mask.w, mask.h);
+      if (!didChange) return false;
       OPTS.x = tx;
       OPTS.y = ty;
       OPTS.alpha = alpha;
       OPTS.blendFn = blendFn;
-      if (mask.type === 1 /* BINARY */) {
-        return didChange(blendColorPixelDataBinaryMask2(writer.config.target, color, mask, OPTS));
-      } else {
+      OPTS.w = void 0;
+      OPTS.h = void 0;
+      if (mask.data) {
+        if (mask.type === 1 /* BINARY */) {
+          return didChange(blendColorPixelDataBinaryMask2(writer.config.target, color, mask, OPTS));
+        }
         return didChange(blendColorPixelDataAlphaMask2(writer.config.target, color, mask, OPTS));
       }
+      OPTS.w = mask.w;
+      OPTS.h = mask.h;
+      return didChange(blendColorPixelData2(writer.config.target, color, OPTS));
     }
   };
 });
@@ -3402,6 +3460,7 @@ var mutatorBlendColorPaintRect = ((writer, deps = defaults10) => {
       OPTS.blendFn = blendFn;
       OPTS.alpha = alpha;
       const didChange = writer.accumulator.storeRegionBeforeState(topLeftX, topLeftY, brushWidth, brushHeight);
+      if (!didChange) return false;
       return didChange(blendColorPixelData2(target, color, OPTS));
     }
   };
@@ -3424,6 +3483,7 @@ var mutatorBlendMask = ((writer, deps = defaults11) => {
       const w = opts?.w ?? src.w;
       const h = opts?.h ?? src.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+      if (!didChange) return false;
       if (mask.type === 1 /* BINARY */) {
         return didChange(blendPixelDataBinaryMask2(writer.config.target, src, mask, opts));
       } else {
@@ -3470,6 +3530,7 @@ var mutatorBlendPixel = ((writer, deps = defaults12) => {
   return {
     blendPixel(x, y, color, alpha, blendFn) {
       const didChange = writer.accumulator.storePixelBeforeState(x, y);
+      if (!didChange) return false;
       return didChange(blendPixel2(writer.config.target, x, y, color, alpha, blendFn));
     }
   };
@@ -3577,6 +3638,7 @@ var mutatorBlendPixelData = ((writer, deps = defaults13) => {
       const w = opts?.w ?? src.w;
       const h = opts?.h ?? src.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+      if (!didChange) return false;
       return didChange(blendPixelData2(writer.config.target, src, opts));
     }
   };
@@ -3590,16 +3652,16 @@ function fillPixelData(dst, color, _x, _y, _w, _h) {
   let y;
   let w;
   let h;
-  if (typeof _x === "object") {
-    x = _x.x ?? 0;
-    y = _x.y ?? 0;
-    w = _x.w ?? dstW;
-    h = _x.h ?? dstH;
-  } else if (typeof _x === "number") {
+  if (typeof _x === "number") {
     x = _x;
     y = _y;
     w = _w;
     h = _h;
+  } else if (typeof _x === "object") {
+    x = _x.x ?? 0;
+    y = _x.y ?? 0;
+    w = _x.w ?? dstW;
+    h = _x.h ?? dstH;
   } else {
     x = 0;
     y = 0;
@@ -3664,6 +3726,7 @@ var mutatorClear = ((writer, deps = defaults14) => {
       const w = rect?.w ?? target.w;
       const h = rect?.h ?? target.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+      if (!didChange) return false;
       return didChange(fillPixelData2(target, 0, x, y, w, h));
     }
   };
@@ -3677,24 +3740,37 @@ var mutatorFill = ((writer, deps = defaults15) => {
   const {
     fillPixelData: fillPixelData2 = defaults15.fillPixelData
   } = deps;
-  return {
-    fill(color, x = 0, y = 0, w = writer.config.target.w, h = writer.config.target.h) {
-      const target = writer.config.target;
-      const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
-      return didChange(fillPixelData2(target, color, x, y, w, h));
+  const config = writer.config;
+  function fill(color, _x, _y, _w, _h) {
+    const target = config.target;
+    const dstW = target.w;
+    const dstH = target.h;
+    let x;
+    let y;
+    let w;
+    let h;
+    if (typeof _x === "number") {
+      x = _x;
+      y = _y;
+      w = _w;
+      h = _h;
+    } else if (typeof _x === "object") {
+      x = _x.x ?? 0;
+      y = _x.y ?? 0;
+      w = _x.w ?? dstW;
+      h = _x.h ?? dstH;
+    } else {
+      x = 0;
+      y = 0;
+      w = dstW;
+      h = dstH;
     }
-  };
-});
-var mutatorFillRect = ((writer, deps = defaults15) => {
-  const {
-    fillPixelData: fillPixelData2 = defaults15.fillPixelData
-  } = deps;
+    const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
+    if (!didChange) return false;
+    return didChange(fillPixelData2(target, color, x, y, w, h));
+  }
   return {
-    fillRect(color, rect) {
-      const target = writer.config.target;
-      const didChange = writer.accumulator.storeRegionBeforeState(rect.x, rect.y, rect.w, rect.h);
-      return didChange(fillPixelData2(target, color, rect.x, rect.y, rect.w, rect.h));
-    }
+    fill
   };
 });
 
@@ -3756,6 +3832,7 @@ var mutatorFillBinaryMask = ((writer, deps = defaults16) => {
   return {
     fillBinaryMask(color, mask, x = 0, y = 0) {
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, mask.w, mask.h);
+      if (!didChange) return false;
       return didChange(fillPixelDataBinaryMask2(writer.config.target, color, mask, x, y));
     }
   };
@@ -3840,7 +3917,8 @@ var mutatorInvert = ((writer, deps = defaults17) => {
       const w = opts?.w ?? target.w;
       const h = opts?.h ?? target.h;
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h);
-      return didChange(invertPixelData2(target, opts));
+      if (!didChange) return false;
+      return didChange?.(invertPixelData2(target, opts));
     }
   };
 });
@@ -3865,7 +3943,6 @@ function makeFullPixelMutator(writer) {
     ...mutatorClear(writer),
     ...mutatorFill(writer),
     ...mutatorFillBinaryMask(writer),
-    ...mutatorFillRect(writer),
     ...mutatorInvert(writer)
   };
 }
@@ -5039,26 +5116,55 @@ function trimRectBounds(x, y, w, h, targetWidth, targetHeight, out) {
   return res;
 }
 
+// src/Tile/MaskTile.ts
+var makeAlphaMaskTile = (id, tx, ty, tileSize, tileArea) => {
+  return {
+    tileType: 1 /* MASK */,
+    type: 0 /* ALPHA */,
+    data: new Uint8Array(tileArea),
+    w: tileSize,
+    h: tileSize,
+    x: tx * tileSize,
+    y: ty * tileSize,
+    id,
+    tx,
+    ty
+  };
+};
+var makeBinaryMaskTile = (id, tx, ty, tileSize, tileArea) => {
+  return {
+    tileType: 1 /* MASK */,
+    type: 1 /* BINARY */,
+    data: new Uint8Array(tileArea),
+    w: tileSize,
+    h: tileSize,
+    x: tx * tileSize,
+    y: ty * tileSize,
+    id,
+    tx,
+    ty
+  };
+};
+
 // src/Paint/eachTileInBounds.ts
 function eachTileInBounds(config, lookup, tilePool, bounds, callback) {
   const {
-    tileShift,
-    targetColumns,
     targetRows,
+    targetColumns,
     tileSize
   } = config;
-  const x1 = Math.max(0, bounds.x >> tileShift);
-  const y1 = Math.max(0, bounds.y >> tileShift);
-  const x2 = Math.min(targetColumns - 1, bounds.x + bounds.w - 1 >> tileShift);
-  const y2 = Math.min(targetRows - 1, bounds.y + bounds.h - 1 >> tileShift);
+  const x1 = Math.max(0, Math.floor(bounds.x / tileSize));
+  const y1 = Math.max(0, Math.floor(bounds.y / tileSize));
+  const x2 = Math.min(targetColumns - 1, Math.floor((bounds.x + bounds.w - 1) / tileSize));
+  const y2 = Math.min(targetRows - 1, Math.floor((bounds.y + bounds.h - 1) / tileSize));
   if (x1 > x2 || y1 > y2) return;
   for (let ty = y1; ty <= y2; ty++) {
     const rowOffset = ty * targetColumns;
-    const tileTop = ty << tileShift;
+    const tileTop = ty * tileSize;
     for (let tx = x1; tx <= x2; tx++) {
       const id = rowOffset + tx;
       const tile = lookup[id] ?? (lookup[id] = tilePool.getTile(id, tx, ty));
-      const tileLeft = tx << tileShift;
+      const tileLeft = tx * tileSize;
       const startX = bounds.x > tileLeft ? bounds.x : tileLeft;
       const startY = bounds.y > tileTop ? bounds.y : tileTop;
       const maskEndX = bounds.x + bounds.w;
@@ -5074,7 +5180,7 @@ function eachTileInBounds(config, lookup, tilePool, bounds, callback) {
 
 // src/Paint/AlphaMaskPaintBuffer.ts
 var AlphaMaskPaintBuffer = class {
-  constructor(config, tilePool) {
+  constructor(config, tilePool = new TilePool(config.tileSize, makeAlphaMaskTile)) {
     this.config = config;
     this.tilePool = tilePool;
     this.lookup = [];
@@ -5094,9 +5200,9 @@ var AlphaMaskPaintBuffer = class {
     const lookup = this.lookup;
     const tilePool = this.tilePool;
     const config = this.config;
-    const tileShift = config.tileShift;
-    const tileMask = config.tileMask;
-    const target = config.target;
+    const targetW = config.targetWidth;
+    const targetH = config.targetHeight;
+    const tileSize = config.tileSize;
     const {
       w: bW,
       h: bH,
@@ -5110,7 +5216,7 @@ var AlphaMaskPaintBuffer = class {
     this.forEachLinePointFn(x0, y0, x1, y1, (px, py) => {
       const topLeftX = Math.floor(px + centerOffsetX);
       const topLeftY = Math.floor(py + centerOffsetY);
-      trimRectBoundsFn(topLeftX, topLeftY, bW, bH, target.w, target.h, scratch);
+      trimRectBoundsFn(topLeftX, topLeftY, bW, bH, targetW, targetH, scratch);
       if (scratch.w <= 0 || scratch.h <= 0) return;
       eachTileInBoundsFn(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
         const data = tile.data;
@@ -5118,8 +5224,8 @@ var AlphaMaskPaintBuffer = class {
         for (let i = 0; i < bH_t; i++) {
           const canvasY = bY + i;
           const bOff = (canvasY - topLeftY) * bW;
-          const tOff = (canvasY & tileMask) << tileShift;
-          const dS = tOff + (bX & tileMask);
+          const tOff = (canvasY - tile.y) * tileSize;
+          const dS = tOff + (bX - tile.x);
           for (let j = 0; j < bW_t; j++) {
             const canvasX = bX + j;
             const brushA = bD[bOff + (canvasX - topLeftX)];
@@ -5142,9 +5248,9 @@ var AlphaMaskPaintBuffer = class {
     const lookup = this.lookup;
     const tilePool = this.tilePool;
     const config = this.config;
-    const tileShift = config.tileShift;
-    const tileMask = config.tileMask;
-    const target = config.target;
+    const targetW = config.targetWidth;
+    const targetH = config.targetHeight;
+    const tileSize = config.tileSize;
     const {
       w: bW,
       h: bH,
@@ -5158,7 +5264,7 @@ var AlphaMaskPaintBuffer = class {
     this.forEachLinePointFn(x0, y0, x1, y1, (px, py) => {
       const topLeftX = Math.floor(px + centerOffsetX);
       const topLeftY = Math.floor(py + centerOffsetY);
-      trimRectBoundsFn(topLeftX, topLeftY, bW, bH, target.w, target.h, scratch);
+      trimRectBoundsFn(topLeftX, topLeftY, bW, bH, targetW, targetH, scratch);
       if (scratch.w <= 0 || scratch.h <= 0) return;
       eachTileInBoundsFn(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
         const data = tile.data;
@@ -5166,8 +5272,8 @@ var AlphaMaskPaintBuffer = class {
         for (let i = 0; i < bH_t; i++) {
           const canvasY = bY + i;
           const bOff = (canvasY - topLeftY) * bW;
-          const tOff = (canvasY & tileMask) << tileShift;
-          const dS = tOff + (bX & tileMask);
+          const tOff = (canvasY - tile.y) * tileSize;
+          const dS = tOff + (bX - tile.x);
           for (let j = 0; j < bW_t; j++) {
             const canvasX = bX + j;
             if (bD[bOff + (canvasX - topLeftX)]) {
@@ -5189,9 +5295,9 @@ var AlphaMaskPaintBuffer = class {
     const lookup = this.lookup;
     const tilePool = this.tilePool;
     const config = this.config;
-    const tileShift = config.tileShift;
-    const tileMask = config.tileMask;
-    const target = config.target;
+    const targetW = config.targetWidth;
+    const targetH = config.targetHeight;
+    const tileSize = config.tileSize;
     const brushWidth = brush.w;
     const brushHeight = brush.h;
     const centerOffsetX = brush.centerOffsetX;
@@ -5202,15 +5308,15 @@ var AlphaMaskPaintBuffer = class {
     this.forEachLinePointFn(x0, y0, x1, y1, (px, py) => {
       const topLeftX = Math.floor(px + centerOffsetX);
       const topLeftY = Math.floor(py + centerOffsetY);
-      trimRectBoundsFn(topLeftX, topLeftY, brushWidth, brushHeight, target.w, target.h, scratch);
+      trimRectBoundsFn(topLeftX, topLeftY, brushWidth, brushHeight, targetW, targetH, scratch);
       if (scratch.w <= 0 || scratch.h <= 0) return;
       eachTileInBoundsFn(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
         const data = tile.data;
         let tileChanged = false;
         for (let i = 0; i < bH_t; i++) {
           const canvasY = bY + i;
-          const tOff = (canvasY & tileMask) << tileShift;
-          const dS = tOff + (bX & tileMask);
+          const tOff = (canvasY - tile.y) * tileSize;
+          const dS = tOff + (bX - tile.x);
           for (let j = 0; j < bW_t; j++) {
             const idx = dS + j;
             if (alpha > data[idx]) {
@@ -5233,7 +5339,7 @@ var AlphaMaskPaintBuffer = class {
 
 // src/Paint/BinaryMaskPaintBuffer.ts
 var BinaryMaskPaintBuffer = class {
-  constructor(config, tilePool) {
+  constructor(config, tilePool = new TilePool(config.tileSize, makeBinaryMaskTile)) {
     this.config = config;
     this.tilePool = tilePool;
     this.lookup = [];
@@ -5253,9 +5359,9 @@ var BinaryMaskPaintBuffer = class {
     const lookup = this.lookup;
     const tilePool = this.tilePool;
     const config = this.config;
-    const tileShift = config.tileShift;
-    const tileMask = config.tileMask;
-    const target = config.target;
+    const targetW = config.targetWidth;
+    const targetH = config.targetHeight;
+    const tileSize = config.tileSize;
     const {
       w: bW,
       h: bH,
@@ -5269,7 +5375,7 @@ var BinaryMaskPaintBuffer = class {
     this.forEachLinePointFn(x0, y0, x1, y1, (px, py) => {
       const topLeftX = Math.floor(px + centerOffsetX);
       const topLeftY = Math.floor(py + centerOffsetY);
-      trimRectBoundsFn(topLeftX, topLeftY, bW, bH, target.w, target.h, scratch);
+      trimRectBoundsFn(topLeftX, topLeftY, bW, bH, targetW, targetH, scratch);
       if (scratch.w <= 0 || scratch.h <= 0) return;
       eachTileInBoundsFn(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
         const data = tile.data;
@@ -5277,8 +5383,8 @@ var BinaryMaskPaintBuffer = class {
         for (let i = 0; i < bH_t; i++) {
           const canvasY = bY + i;
           const bOff = (canvasY - topLeftY) * bW;
-          const tOff = (canvasY & tileMask) << tileShift;
-          const dS = tOff + (bX & tileMask);
+          const tOff = (canvasY - tile.y) * tileSize;
+          const dS = tOff + (bX - tile.x);
           for (let j = 0; j < bW_t; j++) {
             const canvasX = bX + j;
             if (bD[bOff + (canvasX - topLeftX)]) {
@@ -5300,9 +5406,9 @@ var BinaryMaskPaintBuffer = class {
     const lookup = this.lookup;
     const tilePool = this.tilePool;
     const config = this.config;
-    const tileShift = config.tileShift;
-    const tileMask = config.tileMask;
-    const target = config.target;
+    const targetW = config.targetWidth;
+    const targetH = config.targetHeight;
+    const tileSize = config.tileSize;
     const brushWidth = brush.w;
     const brushHeight = brush.h;
     const centerOffsetX = brush.centerOffsetX;
@@ -5313,15 +5419,15 @@ var BinaryMaskPaintBuffer = class {
     this.forEachLinePointFn(x0, y0, x1, y1, (px, py) => {
       const topLeftX = Math.floor(px + centerOffsetX);
       const topLeftY = Math.floor(py + centerOffsetY);
-      trimRectBoundsFn(topLeftX, topLeftY, brushWidth, brushHeight, target.w, target.h, scratch);
+      trimRectBoundsFn(topLeftX, topLeftY, brushWidth, brushHeight, targetW, targetH, scratch);
       if (scratch.w <= 0 || scratch.h <= 0) return;
       eachTileInBoundsFn(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
         const data = tile.data;
         let tileChanged = false;
         for (let i = 0; i < bH_t; i++) {
           const canvasY = bY + i;
-          const tOff = (canvasY & tileMask) << tileShift;
-          const dS = tOff + (bX & tileMask);
+          const tOff = (canvasY - tile.y) * tileSize;
+          const dS = tOff + (bX - tile.x);
           for (let j = 0; j < bW_t; j++) {
             const idx = dS + j;
             if (data[idx] === 0) {
@@ -5363,9 +5469,9 @@ var ColorPaintBuffer = class {
     const lookup = this.lookup;
     const tilePool = this.tilePool;
     const config = this.config;
-    const tileShift = config.tileShift;
-    const tileMask = config.tileMask;
-    const target = config.target;
+    const tileSize = config.tileSize;
+    const targetW = config.targetWidth;
+    const targetH = config.targetHeight;
     const {
       w: bW,
       h: bH,
@@ -5378,7 +5484,7 @@ var ColorPaintBuffer = class {
     forEachLinePoint(x0, y0, x1, y1, (px, py) => {
       const topLeftX = Math.floor(px + centerOffsetX);
       const topLeftY = Math.floor(py + centerOffsetY);
-      trimRectBounds(topLeftX, topLeftY, bW, bH, target.w, target.h, scratch);
+      trimRectBounds(topLeftX, topLeftY, bW, bH, targetW, targetH, scratch);
       if (scratch.w <= 0 || scratch.h <= 0) return;
       eachTileInBounds(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
         const d32 = tile.data;
@@ -5386,8 +5492,8 @@ var ColorPaintBuffer = class {
         for (let i = 0; i < bH_t; i++) {
           const canvasY = bY + i;
           const bOff = (canvasY - topLeftY) * bW;
-          const tOff = (canvasY & tileMask) << tileShift;
-          const dS = tOff + (bX & tileMask);
+          const tOff = (canvasY - tile.y) * tileSize;
+          const dS = tOff + (bX - tile.x);
           for (let j = 0; j < bW_t; j++) {
             const canvasX = bX + j;
             const brushA = bD[bOff + (canvasX - topLeftX)];
@@ -5417,9 +5523,9 @@ var ColorPaintBuffer = class {
     const lookup = this.lookup;
     const tilePool = this.tilePool;
     const config = this.config;
-    const tileShift = config.tileShift;
-    const tileMask = config.tileMask;
-    const target = config.target;
+    const tileSize = config.tileSize;
+    const targetW = config.targetWidth;
+    const targetH = config.targetHeight;
     const {
       w: bW,
       h: bH,
@@ -5431,7 +5537,7 @@ var ColorPaintBuffer = class {
     forEachLinePoint(x0, y0, x1, y1, (px, py) => {
       const topLeftX = Math.floor(px + centerOffsetX);
       const topLeftY = Math.floor(py + centerOffsetY);
-      trimRectBounds(topLeftX, topLeftY, bW, bH, target.w, target.h, scratch);
+      trimRectBounds(topLeftX, topLeftY, bW, bH, targetW, targetH, scratch);
       if (scratch.w <= 0 || scratch.h <= 0) return;
       eachTileInBounds(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
         const d32 = tile.data;
@@ -5439,8 +5545,8 @@ var ColorPaintBuffer = class {
         for (let i = 0; i < bH_t; i++) {
           const canvasY = bY + i;
           const bOff = (canvasY - topLeftY) * bW;
-          const tOff = (canvasY & tileMask) << tileShift;
-          const dS = tOff + (bX & tileMask);
+          const tOff = (canvasY - tile.y) * tileSize;
+          const dS = tOff + (bX - tile.x);
           for (let j = 0; j < bW_t; j++) {
             const canvasX = bX + j;
             if (bD[bOff + (canvasX - topLeftX)]) {
@@ -5464,9 +5570,9 @@ var ColorPaintBuffer = class {
     const lookup = this.lookup;
     const tilePool = this.tilePool;
     const config = this.config;
-    const tileShift = config.tileShift;
-    const tileMask = config.tileMask;
-    const target = config.target;
+    const targetW = config.targetWidth;
+    const targetH = config.targetHeight;
+    const tileSize = config.tileSize;
     const brushWidth = brush.w;
     const brushHeight = brush.h;
     const centerOffsetX = brush.centerOffsetX;
@@ -5475,15 +5581,15 @@ var ColorPaintBuffer = class {
     forEachLinePoint(x0, y0, x1, y1, (px, py) => {
       const topLeftX = Math.floor(px + centerOffsetX);
       const topLeftY = Math.floor(py + centerOffsetY);
-      trimRectBounds(topLeftX, topLeftY, brushWidth, brushHeight, target.w, target.h, scratch);
+      trimRectBounds(topLeftX, topLeftY, brushWidth, brushHeight, targetW, targetH, scratch);
       if (scratch.w <= 0 || scratch.h <= 0) return;
       eachTileInBounds(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
         const d32 = tile.data;
         let tileChanged = false;
         for (let i = 0; i < bH_t; i++) {
           const canvasY = bY + i;
-          const tOff = (canvasY & tileMask) << tileShift;
-          const dS = tOff + (bX & tileMask);
+          const tOff = (canvasY - tile.y) * tileSize;
+          const dS = tOff + (bX - tile.x);
           for (let j = 0; j < bW_t; j++) {
             const idx = dS + j;
             if (d32[idx] !== color) {
@@ -5515,7 +5621,6 @@ var SCRATCH_OPTS = {
 };
 function commitMaskPaintBuffer(accumulator, paintBuffer, color, alpha = 255, blendFn = sourceOverPerfect, blendColorPixelDataMaskFn) {
   const config = accumulator.config;
-  const tileShift = config.tileShift;
   const lookup = paintBuffer.lookup;
   SCRATCH_OPTS.alpha = alpha;
   SCRATCH_OPTS.blendFn = blendFn;
@@ -5523,10 +5628,8 @@ function commitMaskPaintBuffer(accumulator, paintBuffer, color, alpha = 255, ble
     const tile = lookup[i];
     if (tile) {
       const didChange = accumulator.storeTileBeforeState(tile.id, tile.tx, tile.ty);
-      const dx = tile.tx << tileShift;
-      const dy = tile.ty << tileShift;
-      SCRATCH_OPTS.x = dx;
-      SCRATCH_OPTS.y = dy;
+      SCRATCH_OPTS.x = tile.x;
+      SCRATCH_OPTS.y = tile.y;
       SCRATCH_OPTS.w = tile.w;
       SCRATCH_OPTS.h = tile.h;
       didChange(blendColorPixelDataMaskFn(config.target, color, tile, SCRATCH_OPTS));
@@ -5542,49 +5645,51 @@ function makeAlphaMaskPaintBufferCommitter(accumulator, paintBuffer) {
   };
 }
 
-// src/Internal/_constants.ts
-var DEFAULT_CANVAS_FACTORY = (w, h) => new OffscreenCanvas(w, h);
-
-// src/Tile/MaskTile.ts
-var makeAlphaMaskTile = (id, tx, ty, tileSize, tileArea) => {
-  return {
-    tileType: 1 /* MASK */,
-    type: 0 /* ALPHA */,
-    data: new Uint8Array(tileArea),
-    w: tileSize,
-    h: tileSize,
-    id,
-    tx,
-    ty
+// src/PixelData/ReusablePixelData.ts
+function makeReusablePixelData() {
+  const pixelData = {
+    w: 0,
+    h: 0,
+    data: null,
+    imageData: null
   };
-};
-var makeBinaryMaskTile = (id, tx, ty, tileSize, tileArea) => {
-  return {
-    tileType: 1 /* MASK */,
-    type: 1 /* BINARY */,
-    data: new Uint8Array(tileArea),
-    w: tileSize,
-    h: tileSize,
-    id,
-    tx,
-    ty
+  return function getReusablePixelData(width, height) {
+    if (pixelData.w !== width || pixelData.h !== height) {
+      setPixelData(pixelData, new ImageData(width, height));
+    } else {
+      pixelData.data.fill(0);
+    }
+    return pixelData;
   };
-};
+}
 
 // src/Paint/Render/AlphaMaskPaintBufferCanvasRenderer.ts
-function makeAlphaMaskPaintBufferCanvasRenderer(paintBuffer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
-  const config = paintBuffer.config;
-  const tileSize = config.tileSize;
-  const tileShift = config.tileShift;
-  const tileArea = config.tileArea;
-  const lookup = paintBuffer.lookup;
-  const canvas = canvasFactory(tileSize, tileSize);
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error(CANVAS_CTX_FAILED);
-  ctx.imageSmoothingEnabled = false;
-  const bridge = makePixelData(new ImageData(tileSize, tileSize));
-  const view32 = bridge.data;
-  return function drawPaintBuffer(targetCtx, color, alpha = 255, compOperation = "source-over") {
+function makeAlphaMaskPaintBufferCanvasRenderer(paintBuffer, reusableCanvasFactory) {
+  const factory = reusableCanvasFactory ?? makeReusableOffscreenCanvas;
+  const getBuffer = factory();
+  const getBridge = makeReusablePixelData();
+  let config;
+  let tileSize;
+  let tileArea;
+  let lookup;
+  let view32;
+  let bridge;
+  let canvas;
+  let ctx;
+  setBuffer(paintBuffer);
+  function setBuffer(value) {
+    paintBuffer = value;
+    config = paintBuffer.config;
+    tileSize = config.tileSize;
+    tileArea = config.tileArea;
+    lookup = paintBuffer.lookup;
+    bridge = getBridge(tileSize, tileSize);
+    view32 = bridge.data;
+    const buff = getBuffer(tileSize, tileSize);
+    canvas = buff.canvas;
+    ctx = buff.ctx;
+  }
+  function draw(targetCtx, color, alpha = 255, compOperation = "source-over") {
     if (alpha === 0) return;
     const baseSrcAlpha = color >>> 24;
     const colorRGB = color & 16777215;
@@ -5607,29 +5712,31 @@ function makeAlphaMaskPaintBufferCanvasRenderer(paintBuffer, canvasFactory = DEF
             view32[p] = (colorRGB | finalA << 24) >>> 0;
           }
         }
-        const dx = tile.tx << tileShift;
-        const dy = tile.ty << tileShift;
         ctx.putImageData(bridge.imageData, 0, 0);
-        targetCtx.drawImage(canvas, dx, dy);
+        targetCtx.drawImage(canvas, tile.x, tile.y);
       }
     }
     targetCtx.globalAlpha = 1;
     targetCtx.globalCompositeOperation = "source-over";
+  }
+  return {
+    draw,
+    setBuffer
   };
 }
 
 // src/Paint/Commit/AlphaMaskPaintBufferManager.ts
-function makeAlphaMaskPaintBufferManager(writer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
-  const pool = new TilePool(writer.config, makeAlphaMaskTile);
+function makeAlphaMaskPaintBufferManager(writer, reusableCanvasFactory) {
+  const pool = new TilePool(writer.config.tileSize, makeAlphaMaskTile);
   const buffer = new AlphaMaskPaintBuffer(writer.config, pool);
-  const draw = makeAlphaMaskPaintBufferCanvasRenderer(buffer, canvasFactory);
+  const renderer = makeAlphaMaskPaintBufferCanvasRenderer(buffer, reusableCanvasFactory);
   return {
     clear: buffer.clear.bind(buffer),
     paintRect: buffer.paintRect.bind(buffer),
     paintAlphaMask: buffer.paintAlphaMask.bind(buffer),
     paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
     commit: makeAlphaMaskPaintBufferCommitter(writer.accumulator, buffer),
-    draw
+    renderer
   };
 }
 
@@ -5641,19 +5748,32 @@ function makeBinaryMaskPaintBufferCommitter(accumulator, paintBuffer) {
 }
 
 // src/Paint/Render/BinaryMaskPaintBufferCanvasRenderer.ts
-function makeBinaryMaskPaintBufferCanvasRenderer(paintBuffer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
-  const config = paintBuffer.config;
-  const tileSize = config.tileSize;
-  const tileShift = config.tileShift;
-  const tileArea = config.tileArea;
-  const lookup = paintBuffer.lookup;
-  const canvas = canvasFactory(tileSize, tileSize);
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error(CANVAS_CTX_FAILED);
-  ctx.imageSmoothingEnabled = false;
-  const bridge = makePixelData(new ImageData(tileSize, tileSize));
-  const view32 = bridge.data;
-  return function drawPaintBuffer(targetCtx, color, alpha = 255, compOperation = "source-over") {
+function makeBinaryMaskPaintBufferCanvasRenderer(paintBuffer, reusableCanvasFactory) {
+  const factory = reusableCanvasFactory ?? makeReusableOffscreenCanvas;
+  const getBuffer = factory();
+  const getBridge = makeReusablePixelData();
+  let config;
+  let tileSize;
+  let tileArea;
+  let lookup;
+  let view32;
+  let bridge;
+  let canvas;
+  let ctx;
+  setBuffer(paintBuffer);
+  function setBuffer(value) {
+    paintBuffer = value;
+    config = paintBuffer.config;
+    tileSize = config.tileSize;
+    tileArea = config.tileArea;
+    lookup = paintBuffer.lookup;
+    bridge = getBridge(tileSize, tileSize);
+    view32 = bridge.data;
+    const buff = getBuffer(tileSize, tileSize);
+    canvas = buff.canvas;
+    ctx = buff.ctx;
+  }
+  function draw(targetCtx, color, alpha = 255, compOperation = "source-over") {
     if (alpha === 0) return;
     const baseSrcAlpha = color >>> 24;
     if (baseSrcAlpha === 0) return;
@@ -5669,28 +5789,30 @@ function makeBinaryMaskPaintBufferCanvasRenderer(paintBuffer, canvasFactory = DE
             view32[p] = color;
           }
         }
-        const dx = tile.tx << tileShift;
-        const dy = tile.ty << tileShift;
         ctx.putImageData(bridge.imageData, 0, 0);
-        targetCtx.drawImage(canvas, dx, dy);
+        targetCtx.drawImage(canvas, tile.x, tile.y);
       }
     }
     targetCtx.globalAlpha = 1;
     targetCtx.globalCompositeOperation = "source-over";
+  }
+  return {
+    draw,
+    setBuffer
   };
 }
 
 // src/Paint/Commit/BinaryMaskPaintBufferManager.ts
-function makeBinaryMaskPaintBufferManager(writer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
-  const pool = new TilePool(writer.config, makeBinaryMaskTile);
+function makeBinaryMaskPaintBufferManager(writer, reusableCanvasFactory) {
+  const pool = new TilePool(writer.config.tileSize, makeBinaryMaskTile);
   const buffer = new BinaryMaskPaintBuffer(writer.config, pool);
-  const draw = makeBinaryMaskPaintBufferCanvasRenderer(buffer, canvasFactory);
+  const renderer = makeBinaryMaskPaintBufferCanvasRenderer(buffer, reusableCanvasFactory);
   return {
     clear: buffer.clear.bind(buffer),
     paintRect: buffer.paintRect.bind(buffer),
     paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
     commit: makeBinaryMaskPaintBufferCommitter(writer.accumulator, buffer),
-    draw
+    renderer
   };
 }
 
@@ -5705,7 +5827,6 @@ var SCRATCH_OPTS2 = {
 };
 function commitColorPaintBuffer(accumulator, paintBuffer, alpha = 255, blendFn = sourceOverPerfect, blendPixelDataFn = blendPixelData) {
   const config = accumulator.config;
-  const tileShift = config.tileShift;
   const lookup = paintBuffer.lookup;
   SCRATCH_OPTS2.alpha = alpha;
   SCRATCH_OPTS2.blendFn = blendFn;
@@ -5713,10 +5834,8 @@ function commitColorPaintBuffer(accumulator, paintBuffer, alpha = 255, blendFn =
     const tile = lookup[i];
     if (tile) {
       const didChange = accumulator.storeTileBeforeState(tile.id, tile.tx, tile.ty);
-      const dx = tile.tx << tileShift;
-      const dy = tile.ty << tileShift;
-      SCRATCH_OPTS2.x = dx;
-      SCRATCH_OPTS2.y = dy;
+      SCRATCH_OPTS2.x = tile.x;
+      SCRATCH_OPTS2.y = tile.y;
       SCRATCH_OPTS2.w = tile.w;
       SCRATCH_OPTS2.h = tile.h;
       didChange(blendPixelDataFn(config.target, tile, SCRATCH_OPTS2));
@@ -5733,44 +5852,47 @@ function makeColorPaintBufferCommitter(accumulator, paintBuffer) {
 }
 
 // src/Paint/Render/ColorPaintBufferCanvasRenderer.ts
-function makeColorPaintBufferCanvasRenderer(paintBuffer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
-  const config = paintBuffer.config;
-  const tileSize = config.tileSize;
-  const tileShift = config.tileShift;
-  const lookup = paintBuffer.lookup;
-  const canvas = canvasFactory(tileSize, tileSize);
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error(CANVAS_CTX_FAILED);
-  ctx.imageSmoothingEnabled = false;
-  return function drawPaintBuffer(targetCtx, alpha = 255, compOperation = "source-over") {
+function makeColorPaintBufferCanvasRenderer(paintBuffer, reusableCanvasFactory) {
+  const factory = reusableCanvasFactory ?? makeReusableOffscreenCanvas;
+  const getBuffer = factory();
+  function draw(targetCtx, alpha = 255, compOperation = "source-over") {
+    const buff = getBuffer(paintBuffer.config.tileSize, paintBuffer.config.tileSize);
+    const lookup = paintBuffer.lookup;
+    const length = lookup.length;
+    const ctx = buff.ctx;
+    const canvas = buff.canvas;
     targetCtx.globalAlpha = alpha / 255;
     targetCtx.globalCompositeOperation = compOperation;
-    for (let i = 0; i < lookup.length; i++) {
+    for (let i = 0; i < length; i++) {
       const tile = lookup[i];
       if (tile) {
-        const dx = tile.tx << tileShift;
-        const dy = tile.ty << tileShift;
         ctx.putImageData(tile.imageData, 0, 0);
-        targetCtx.drawImage(canvas, dx, dy);
+        targetCtx.drawImage(canvas, tile.x, tile.y);
       }
     }
     targetCtx.globalAlpha = 1;
     targetCtx.globalCompositeOperation = "source-over";
+  }
+  return {
+    draw,
+    setBuffer(value) {
+      paintBuffer = value;
+    }
   };
 }
 
 // src/Paint/Commit/ColorPaintBufferManager.ts
-function makeColorPaintBufferManager(writer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
-  const pool = new TilePool(writer.config, makePixelTile);
+function makeColorPaintBufferManager(writer, reusableCanvasFactory) {
+  const pool = new TilePool(writer.config.tileSize, makePixelTile);
   const buffer = new ColorPaintBuffer(writer.config, pool);
-  const draw = makeColorPaintBufferCanvasRenderer(buffer, canvasFactory);
+  const renderer = makeColorPaintBufferCanvasRenderer(buffer, reusableCanvasFactory);
   return {
     clear: buffer.clear.bind(buffer),
     paintRect: buffer.paintRect.bind(buffer),
     paintAlphaMask: buffer.paintAlphaMask.bind(buffer),
     paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
     commit: makeColorPaintBufferCommitter(writer.accumulator, buffer),
-    draw
+    renderer
   };
 }
 
@@ -5906,24 +6028,6 @@ function makePaintRect(w, h) {
   };
 }
 
-// src/PixelData/ReusablePixelData.ts
-function makeReusablePixelData() {
-  const pixelData = {
-    w: 0,
-    h: 0,
-    data: null,
-    imageData: null
-  };
-  return function getReusablePixelData(width, height) {
-    if (pixelData.w !== width || pixelData.h !== height) {
-      setPixelData(pixelData, new ImageData(width, height));
-    } else {
-      pixelData.data.fill(0);
-    }
-    return pixelData;
-  };
-}
-
 // src/Paint/Render/PaintCursorRenderer.ts
 function makePaintCursorRenderer(reusableCanvasFactory) {
   const factory = reusableCanvasFactory ?? makeReusableOffscreenCanvas;
@@ -5999,6 +6103,9 @@ function makePaintCursorRenderer(reusableCanvasFactory) {
     const dy = centerY * _scale + currentBrush.centerOffsetY * _scale - 1;
     drawCtx.drawImage(canvas, Math.floor(dx), Math.floor(dy));
   }
+  function drawRaw(drawCtx, x, y) {
+    drawCtx.drawImage(canvas, Math.floor(x * _scale), Math.floor(y * _scale));
+  }
   function getSettings() {
     return {
       color: _color,
@@ -6011,6 +6118,7 @@ function makePaintCursorRenderer(reusableCanvasFactory) {
     getBounds,
     getBoundsScaled: getOutlineBoundsScaled,
     draw,
+    drawRaw,
     getSettings
   };
 }
@@ -6072,20 +6180,29 @@ var SCRATCH_OPTS5 = {
   x: 0,
   y: 0,
   alpha: 255,
-  blendFn: sourceOverPerfect
+  blendFn: sourceOverPerfect,
+  w: void 0,
+  h: void 0
 };
-function blendColorPixelDataPaintMask(dst, color, mask, x, y, alpha = 255, blendFn = sourceOverPerfect) {
+function blendColorPixelDataPaintMask(target, color, mask, x, y, alpha = 255, blendFn = sourceOverPerfect) {
   const tx = x + mask.centerOffsetX;
   const ty = y + mask.centerOffsetY;
   SCRATCH_OPTS5.x = tx;
   SCRATCH_OPTS5.y = ty;
   SCRATCH_OPTS5.alpha = alpha;
   SCRATCH_OPTS5.blendFn = blendFn;
-  if (mask.type === 1 /* BINARY */) {
-    return blendColorPixelDataBinaryMask(dst, color, mask, SCRATCH_OPTS5);
-  } else {
-    return blendColorPixelDataAlphaMask(dst, color, mask, SCRATCH_OPTS5);
+  SCRATCH_OPTS5.w = void 0;
+  SCRATCH_OPTS5.h = void 0;
+  if (mask.data) {
+    if (mask.type === 1 /* BINARY */) {
+      return blendColorPixelDataBinaryMask(target, color, mask, SCRATCH_OPTS5);
+    } else {
+      return blendColorPixelDataAlphaMask(target, color, mask, SCRATCH_OPTS5);
+    }
   }
+  SCRATCH_OPTS5.w = mask.w;
+  SCRATCH_OPTS5.h = mask.h;
+  return blendColorPixelData(target, color, SCRATCH_OPTS5);
 }
 
 // src/PixelData/blendPixelDataMask.ts
@@ -6105,13 +6222,12 @@ var SCRATCH_OPTS6 = {
   blendFn: void 0
 };
 function blendPixelDataPaintBuffer(target, paintBuffer, alpha = 255, blendFn, blendPixelDataFn = blendPixelData) {
-  const tileShift = paintBuffer.config.tileShift;
   const lookup = paintBuffer.lookup;
   for (let i = 0; i < lookup.length; i++) {
     const tile = lookup[i];
     if (tile) {
-      const x = tile.tx << tileShift;
-      const y = tile.ty << tileShift;
+      const x = tile.x;
+      const y = tile.y;
       SCRATCH_OPTS6.x = x;
       SCRATCH_OPTS6.y = y;
       SCRATCH_OPTS6.alpha = alpha;
@@ -6185,6 +6301,36 @@ function copyPixelData(target) {
   return makePixelData(new ImageData(buffer, target.w, target.h));
 }
 
+// src/PixelData/cropPixelData.ts
+function cropPixelData(src, x, y, w, h, out) {
+  const cx = Math.max(x, 0);
+  const cy = Math.max(y, 0);
+  const cw = Math.min(x + w, src.w) - cx;
+  const ch = Math.min(y + h, src.h) - cy;
+  if (cw <= 0 || ch <= 0) {
+    throw new Error(`Crop [${x},${y} ${w}x${h}] does not overlap PixelData [${src.w}x${src.h}]`);
+  }
+  const cropped = new ImageData(cw, ch);
+  let dst32;
+  if (out) {
+    setPixelData(out, cropped);
+    dst32 = out.data;
+  } else {
+    dst32 = new Uint32Array(cropped.data.buffer);
+  }
+  for (let row = 0; row < ch; row++) {
+    const srcOffset = (cy + row) * src.w + cx;
+    const dstOffset = row * cw;
+    dst32.set(src.data.subarray(srcOffset, srcOffset + cw), dstOffset);
+  }
+  return out ?? {
+    data: dst32,
+    imageData: cropped,
+    w: cw,
+    h: ch
+  };
+}
+
 // src/PixelData/extractPixelDataBuffer.ts
 function extractPixelDataBuffer(source, _x, _y, _w, _h) {
   let x;
@@ -6400,6 +6546,46 @@ function rotateSquareInPlace(pixelData) {
   }
 }
 
+// src/PixelData/trimPixelData.ts
+function getPixelDataTransparentTrimmedBounds(target) {
+  let minX = target.w;
+  let minY = target.h;
+  let maxX = -1;
+  let maxY = -1;
+  for (let y = 0; y < target.h; y++) {
+    for (let x = 0; x < target.w; x++) {
+      const alpha = target.data[y * target.w + x] >>> 24;
+      if (alpha !== 0) {
+        if (x < minX) minX = x;
+        if (x > maxX) maxX = x;
+        if (y < minY) minY = y;
+        if (y > maxY) maxY = y;
+      }
+    }
+  }
+  if (maxX === -1) return null;
+  return {
+    x: minX,
+    y: minY,
+    w: maxX - minX + 1,
+    h: maxY - minY + 1
+  };
+}
+function trimTransparentPixelData(target) {
+  const r = getPixelDataTransparentTrimmedBounds(target);
+  if (!r) {
+    throw new Error("PixelData is fully transparent \u2014 no crop bounds found");
+  }
+  return cropPixelData(target, r.x, r.y, r.w, r.h);
+}
+function trimTransparentPixelDataInPlace(target) {
+  const r = getPixelDataTransparentTrimmedBounds(target);
+  if (!r) {
+    throw new Error("PixelData is fully transparent \u2014 no crop bounds found");
+  }
+  cropPixelData(target, r.x, r.y, r.w, r.h, target);
+}
+
 // src/PixelData/uInt32ArrayToPixelData.ts
 function uInt32ArrayToPixelData(data, width, height) {
   const buffer = data.buffer;
@@ -6460,14 +6646,11 @@ function writePixelDataBuffer(target, data, _x, _y, _w, _h) {
 
 // src/PixelData/writePaintBufferToPixelData.ts
 function writePaintBufferToPixelData(target, paintBuffer, writePixelDataBufferFn = writePixelDataBuffer) {
-  const tileShift = paintBuffer.config.tileShift;
   const lookup = paintBuffer.lookup;
   for (let i = 0; i < lookup.length; i++) {
     const tile = lookup[i];
     if (tile) {
-      const dx = tile.tx << tileShift;
-      const dy = tile.ty << tileShift;
-      writePixelDataBufferFn(target, tile.data, dx, dy, tile.w, tile.h);
+      writePixelDataBufferFn(target, tile.data, tile.x, tile.y, tile.w, tile.h);
     }
   }
 }
@@ -6519,7 +6702,6 @@ export {
   MaskType,
   PaintMaskOutline,
   PixelAccumulator,
-  PixelEngineConfig,
   PixelWriter,
   TilePool,
   TileType,
@@ -6546,6 +6728,7 @@ export {
   blendPixelDataPaintBuffer,
   clearPixelDataFast,
   color32ToCssRGBA,
+  color32ToCssRGBAString,
   color32ToHex,
   colorBurnFast,
   colorBurnPerfect,
@@ -6558,6 +6741,8 @@ export {
   copyImageDataLike,
   copyMask,
   copyPixelData,
+  cropPixelData,
+  cssRGBAToColor32,
   darkenFast,
   darkenPerfect,
   darkerFast,
@@ -6596,6 +6781,7 @@ export {
   getImageDataFromClipboard,
   getIndexedImageColor,
   getIndexedImageColorCounts,
+  getPixelDataTransparentTrimmedBounds,
   getRectsBounds,
   getSupportedPixelFormats,
   hardLightFast,
@@ -6669,6 +6855,8 @@ export {
   makeReusableImageData,
   makeReusableOffscreenCanvas,
   makeReusablePixelData,
+  makeTileTargetConfig,
+  makeTileTargetMeta,
   merge2BinaryMaskRects,
   mergeAlphaMasks,
   mergeBinaryMaskRects,
@@ -6691,7 +6879,6 @@ export {
   mutatorClear,
   mutatorFill,
   mutatorFillBinaryMask,
-  mutatorFillRect,
   mutatorInvert,
   overlayFast,
   overlayPerfect,
@@ -6735,6 +6922,8 @@ export {
   toBlendModeIndexAndName,
   trimMaskRectBounds,
   trimRectBounds,
+  trimTransparentPixelData,
+  trimTransparentPixelDataInPlace,
   uInt32ArrayToImageData,
   uInt32ArrayToImageDataLike,
   uInt32ArrayToPixelData,