pixel-data-js 0.36.0 → 0.37.0

package/dist/index.prod.cjs

@@ -32,7 +32,6 @@ __export(src_exports, {
   MaskType: () => MaskType,
   PaintMaskOutline: () => PaintMaskOutline,
   PixelAccumulator: () => PixelAccumulator,
-  PixelEngineConfig: () => PixelEngineConfig,
   PixelWriter: () => PixelWriter,
   TilePool: () => TilePool,
   TileType: () => TileType,
@@ -59,6 +58,7 @@ __export(src_exports, {
   blendPixelDataPaintBuffer: () => blendPixelDataPaintBuffer,
   clearPixelDataFast: () => clearPixelDataFast,
   color32ToCssRGBA: () => color32ToCssRGBA,
+  color32ToCssRGBAString: () => color32ToCssRGBAString,
   color32ToHex: () => color32ToHex,
   colorBurnFast: () => colorBurnFast,
   colorBurnPerfect: () => colorBurnPerfect,
@@ -72,6 +72,7 @@ __export(src_exports, {
   copyMask: () => copyMask,
   copyPixelData: () => copyPixelData,
   cropPixelData: () => cropPixelData,
+  cssRGBAToColor32: () => cssRGBAToColor32,
   darkenFast: () => darkenFast,
   darkenPerfect: () => darkenPerfect,
   darkerFast: () => darkerFast,
@@ -184,6 +185,8 @@ __export(src_exports, {
   makeReusableImageData: () => makeReusableImageData,
   makeReusableOffscreenCanvas: () => makeReusableOffscreenCanvas,
   makeReusablePixelData: () => makeReusablePixelData,
+  makeTileTargetConfig: () => makeTileTargetConfig,
+  makeTileTargetMeta: () => makeTileTargetMeta,
   merge2BinaryMaskRects: () => merge2BinaryMaskRects,
   mergeAlphaMasks: () => mergeAlphaMasks,
   mergeBinaryMaskRects: () => mergeBinaryMaskRects,
@@ -283,43 +286,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);
@@ -327,34 +294,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) {
@@ -2115,9 +2054,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;
   }
@@ -2238,6 +2174,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();
@@ -2417,15 +2443,14 @@ var PixelAccumulator = class {
    * @param y pixel y coordinate
    */
   storePixelBeforeState(x, y) {
-    const shift = this.config.tileShift;
     const columns = this.config.targetColumns;
-    const targetWidth = this.config.target.w;
-    const targetHeight = this.config.target.h;
+    const targetWidth = this.config.targetWidth;
+    const targetHeight = this.config.targetHeight;
     if (x < 0 || x >= targetWidth || y < 0 || y >= targetHeight) {
       return null;
     }
-    const tx = x >> shift;
-    const ty = y >> shift;
+    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;
@@ -2452,10 +2477,10 @@ var PixelAccumulator = class {
    * @param h pixel height
    */
   storeRegionBeforeState(x, y, w, h) {
-    const shift = this.config.tileShift;
     const columns = this.config.targetColumns;
-    const targetWidth = this.config.target.w;
-    const targetHeight = this.config.target.h;
+    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);
@@ -2463,10 +2488,10 @@ var PixelAccumulator = class {
     if (clipX2 < clipX1 || clipY2 < clipY1) {
       return null;
     }
-    const startX = clipX1 >> shift;
-    const startY = clipY1 >> shift;
-    const endX = clipX2 >> shift;
-    const endY = clipY2 >> shift;
+    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++) {
@@ -2583,31 +2608,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;
@@ -2801,6 +2801,8 @@ function makePixelTile(id, tx, ty, tileSize, tileArea) {
     id,
     tx,
     ty,
+    x: tx * tileSize,
+    y: ty * tileSize,
     w: tileSize,
     h: tileSize,
     data: data32,
@@ -2810,25 +2812,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);
@@ -2845,6 +2850,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;
@@ -2857,10 +2881,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);
   }
@@ -3639,18 +3663,22 @@ 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) {
@@ -3662,11 +3690,17 @@ var mutatorBlendColorPaintMask = ((writer, deps = defaults9) => {
       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));
     }
   };
 });
@@ -5355,26 +5389,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;
@@ -5390,7 +5453,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 = [];
@@ -5410,9 +5473,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,
@@ -5426,7 +5489,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;
@@ -5434,8 +5497,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)];
@@ -5458,9 +5521,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,
@@ -5474,7 +5537,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;
@@ -5482,8 +5545,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)]) {
@@ -5505,9 +5568,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;
@@ -5518,15 +5581,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]) {
@@ -5549,7 +5612,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 = [];
@@ -5569,9 +5632,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,
@@ -5585,7 +5648,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;
@@ -5593,8 +5656,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)]) {
@@ -5616,9 +5679,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;
@@ -5629,15 +5692,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) {
@@ -5679,9 +5742,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,
@@ -5694,7 +5757,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;
@@ -5702,8 +5765,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)];
@@ -5733,9 +5796,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,
@@ -5747,7 +5810,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;
@@ -5755,8 +5818,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)]) {
@@ -5780,9 +5843,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;
@@ -5791,15 +5854,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) {
@@ -5831,7 +5894,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;
@@ -5839,10 +5901,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));
@@ -5858,49 +5918,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;
@@ -5923,29 +5985,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
   };
 }
 
@@ -5957,19 +6021,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;
@@ -5985,28 +6062,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
   };
 }
 
@@ -6021,7 +6100,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;
@@ -6029,10 +6107,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));
@@ -6049,44 +6125,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
   };
 }
 
@@ -6222,24 +6301,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;
@@ -6392,20 +6453,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
@@ -6425,13 +6495,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;
@@ -6850,14 +6919,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);
     }
   }
 }
@@ -6910,7 +6976,6 @@ function writePixelData(target, source, x = 0, y = 0) {
   MaskType,
   PaintMaskOutline,
   PixelAccumulator,
-  PixelEngineConfig,
   PixelWriter,
   TilePool,
   TileType,
@@ -6937,6 +7002,7 @@ function writePixelData(target, source, x = 0, y = 0) {
   blendPixelDataPaintBuffer,
   clearPixelDataFast,
   color32ToCssRGBA,
+  color32ToCssRGBAString,
   color32ToHex,
   colorBurnFast,
   colorBurnPerfect,
@@ -6950,6 +7016,7 @@ function writePixelData(target, source, x = 0, y = 0) {
   copyMask,
   copyPixelData,
   cropPixelData,
+  cssRGBAToColor32,
   darkenFast,
   darkenPerfect,
   darkerFast,
@@ -7062,6 +7129,8 @@ function writePixelData(target, source, x = 0, y = 0) {
   makeReusableImageData,
   makeReusableOffscreenCanvas,
   makeReusablePixelData,
+  makeTileTargetConfig,
+  makeTileTargetMeta,
   merge2BinaryMaskRects,
   mergeAlphaMasks,
   mergeBinaryMaskRects,