pixel-data-js 0.36.0 → 0.38.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-data-js",
   "type": "module",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "packageManager": "pnpm@10.33.0",
   "description": "JS Pixel and ImageData operations",
   "author": {
@@ -88,7 +88,7 @@
     "typedoc-plugin-mdn-links": "^5.1.1",
     "typedoc-rhineai-theme": "^1.2.0",
     "typescript": "^5.9.3",
-    "unplugin-inline": "^1.15.0",
+    "unplugin-inline": "^1.16.0",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "3.2.4"
   },

package/src/Algorithm/floodFillSelection.ts

@@ -1,5 +1,6 @@
-import { type Color32 } from '../_types'
-import { colorDistance } from '../color'
+import type { Color32 } from '../Color/_color-types'
+
+import { colorDistance } from '../Color/colorDistance'
 import { extractImageDataBuffer } from '../ImageData/extractImageDataBuffer'
 import { type BinaryMaskRect, MaskType } from '../Mask/_mask-types'
 import type { PixelData } from '../PixelData/_pixelData-types'

package/src/BlendModes/blend-modes-fast.ts

@@ -1,4 +1,5 @@
-import type { BlendColor32, Color32 } from '../_types'
+import type { BlendColor32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import { BaseBlendMode, overwriteBase } from './blend-modes'
 import { makeBlendModeRegistry } from './BlendModeRegistry'
 

package/src/BlendModes/blend-modes-perfect.ts

@@ -1,4 +1,5 @@
-import type { BlendColor32, Color32 } from '../_types'
+import type { BlendColor32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import { BaseBlendMode, overwriteBase } from './blend-modes'
 import { makeBlendModeRegistry } from './BlendModeRegistry'
 

package/src/Canvas/ReusableCanvas.ts

@@ -63,11 +63,6 @@ function makeReusableCanvasMeta<T extends HTMLCanvasElement | OffscreenCanvas>(
       canvas.width = width
       canvas.height = height
       ctx!.imageSmoothingEnabled = false
-    } else {
-      // Always reset transform before clearing to ensure the whole buffer is wiped
-      ctx!.setTransform(1, 0, 0, 1, 0, 0)
-      // Same size → manually clear
-      ctx!.clearRect(0, 0, width, height)
     }
 
     return result

package/src/Color/_color-types.ts

@@ -0,0 +1,8 @@
+/** Represents a 32-bit color in 0xAABBGGRR (Little endian) */
+export type Color32 = number & { readonly __brandColor32: unique symbol }
+
+/** ALL values are 0-255 */
+export type RGBA = { r: number, g: number, b: number, a: number }
+
+/** r, g, b are 0-255. a is 0-1 for css use */
+export type CssRGBA = { r: number, g: number, b: number, a: number } & { readonly __brandCssRGBA: unique symbol }

package/src/Color/colorDistance.ts

@@ -0,0 +1,9 @@
+import type { Color32 } from './_color-types'
+
+export function colorDistance(a: Color32, b: Color32): number {
+  const dr = (a & 0xFF) - (b & 0xFF)
+  const dg = ((a >>> 8) & 0xFF) - ((b >>> 8) & 0xFF)
+  const db = ((a >>> 16) & 0xFF) - ((b >>> 16) & 0xFF)
+  const da = ((a >>> 24) & 0xFF) - ((b >>> 24) & 0xFF)
+  return dr * dr + dg * dg + db * db + da * da
+}

package/src/Color/convert-color.ts

@@ -0,0 +1,43 @@
+// Convert 0xAABBGGRR to #RRGGBBAA
+import type { Color32, CssRGBA } from './_color-types'
+
+export function color32ToHex(color: Color32): string {
+  const r = (color & 0xFF).toString(16).padStart(2, '0')
+  const g = ((color >>> 8) & 0xFF).toString(16).padStart(2, '0')
+  const b = ((color >>> 16) & 0xFF).toString(16).padStart(2, '0')
+  const a = ((color >>> 24) & 0xFF).toString(16).padStart(2, '0')
+  return `#${r}${g}${b}${a}`
+}
+
+/**
+ * Converts a 32-bit integer (0xAABBGGRR) to a CSS rgba() string.
+ * Example: 0xFF0000FF -> "rgba(255,0,0,1)"
+ */
+export function color32ToCssRGBAString(color: Color32): string {
+  const r = color & 0xFF
+  const g = (color >>> 8) & 0xFF
+  const b = (color >>> 16) & 0xFF
+  const a = (color >>> 24) & 0xFF
+
+  const alpha = Number((a / 255).toFixed(3))
+
+  return `rgba(${r},${g},${b},${alpha})`
+}
+
+export function color32ToCssRGBA(color: Color32): CssRGBA {
+  const r = color & 0xFF
+  const g = (color >>> 8) & 0xFF
+  const b = (color >>> 16) & 0xFF
+  const a = (color >>> 24) & 0xFF
+
+  return {
+    r,
+    g,
+    b,
+    a: a / 255,
+  } as CssRGBA
+}
+
+export function cssRGBAToColor32({ r, g, b, a }: CssRGBA): Color32 {
+  return (((a * 255) << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}

package/src/Color/lerpColor32.ts

@@ -0,0 +1,44 @@
+import type { Color32 } from './_color-types'
+
+/**
+ * Linearly interpolates between two 32-bit colors using a floating-point weight.
+ * * This is the preferred method for UI animations or scenarios where high
+ * precision is required. It uses the standard `a + t * (b - a)` formula
+ * for each channel.
+ * @param a - The starting color as a 32-bit integer (AABBGGRR).
+ * @param b - The target color as a 32-bit integer (AABBGGRR).
+ * @param t - The interpolation factor between 0.0 and 1.0.
+ * @returns The interpolated 32-bit color.
+ */
+export function lerpColor32(a: Color32, b: Color32, t: number): Color32 {
+  const r = (a & 0xFF) + t * ((b & 0xFF) - (a & 0xFF))
+  const g = ((a >>> 8) & 0xFF) + t * (((b >>> 8) & 0xFF) - ((a >>> 8) & 0xFF))
+  const b_ = ((a >>> 16) & 0xFF) + t * (((b >>> 16) & 0xFF) - ((a >>> 16) & 0xFF))
+  const a_ = ((a >>> 24) & 0xFF) + t * (((b >>> 24) & 0xFF) - ((a >>> 24) & 0xFF))
+
+  return ((a_ << 24) | (b_ << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+/**
+ * Linearly interpolates between two 32-bit colors using integer fixed-point math.
+ * Highly optimized for image processing and real-time blitting. It processes
+ * channels in parallel using bitmasks (RB and GA pairs).
+ * **Note:** Subject to a 1-bit drift (rounding down) due to fast bit-shift division.
+ * @param src - The source (foreground) color as a 32-bit integer.
+ * @param dst - The destination (background) color as a 32-bit integer.
+ * @param w - The blend weight as a byte value from 0 to 255. Where 0 is 100% dst and 255 is 100% src
+ * @returns The blended 32-bit color.
+ */
+export function lerpColor32Fast(src: Color32, dst: Color32, w: number): Color32 {
+  const invA = 255 - w
+
+  // Masking Red and Blue: 0x00FF00FF
+  // We process R and B in one go, then shift back down
+  const rb = (((src & 0x00FF00FF) * w + (dst & 0x00FF00FF) * invA) >>> 8) & 0x00FF00FF
+
+  // Masking Green and Alpha: 0xFF00FF00
+  // We shift down first to avoid overflow, then shift back up
+  const ga = ((((src >>> 8) & 0x00FF00FF) * w + ((dst >>> 8) & 0x00FF00FF) * invA) >>> 8) & 0x00FF00FF
+
+  return (rb | (ga << 8)) >>> 0 as Color32
+}

package/src/Color/pack-color.ts

@@ -0,0 +1,38 @@
+import type { Color32, RGBA } from './_color-types'
+
+/**
+ * Packs RGBA into a 32-bit integer compatible with
+ * Little-Endian Uint32Array views on ImageData.
+ */
+export function packColor(r: number, g: number, b: number, a: number): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export function packRGBA({ r, g, b, a }: RGBA): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const unpackRed = (packed: Color32): number => (packed >>> 0) & 0xFF
+export const unpackGreen = (packed: Color32): number => (packed >>> 8) & 0xFF
+export const unpackBlue = (packed: Color32): number => (packed >>> 16) & 0xFF
+export const unpackAlpha = (packed: Color32): number => (packed >>> 24) & 0xFF
+
+export function unpackColor(packed: Color32): RGBA {
+  return {
+    r: (packed >>> 0) & 0xFF,
+    g: (packed >>> 8) & 0xFF,
+    b: (packed >>> 16) & 0xFF,
+    a: (packed >>> 24) & 0xFF,
+  }
+}
+
+const SCRATCH_RGBA: RGBA = { r: 0, g: 0, b: 0, a: 0 }
+
+// uses a scratch arg for memory perf. be careful about re-use.
+export function unpackColorTo(packed: Color32, scratch = SCRATCH_RGBA): RGBA {
+  scratch.r = (packed >>> 0) & 0xFF
+  scratch.g = (packed >>> 8) & 0xFF
+  scratch.b = (packed >>> 16) & 0xFF
+  scratch.a = (packed >>> 24) & 0xFF
+  return scratch
+}

package/src/History/HistoryAction.ts

@@ -1,5 +1,5 @@
+import type { TileTargetConfig } from '../Tile/_tile-types'
 import type { PixelAccumulator } from './PixelAccumulator'
-import type { PixelEngineConfig } from './PixelEngineConfig'
 import { applyPatchTiles, type PixelPatchTiles } from './PixelPatchTiles'
 
 export interface HistoryAction {
@@ -11,7 +11,7 @@ export interface HistoryAction {
 export type HistoryActionFactory = typeof makeHistoryAction
 
 export function makeHistoryAction(
-  config: PixelEngineConfig,
+  config: TileTargetConfig,
   accumulator: PixelAccumulator,
   patch: PixelPatchTiles,
   afterUndo?: (patch: PixelPatchTiles) => void,

package/src/History/PixelAccumulator.ts

@@ -1,6 +1,5 @@
-import type { PixelTile } from '../Tile/_tile-types'
+import type { PixelTile, TileTargetConfig } from '../Tile/_tile-types'
 import type { TilePool } from '../Tile/TilePool'
-import type { PixelEngineConfig } from './PixelEngineConfig'
 import { applyPatchTiles, type PixelPatchTiles } from './PixelPatchTiles'
 
 export type DidChangeFn = (didChange: boolean) => boolean
@@ -10,7 +9,7 @@ export class PixelAccumulator {
   public beforeTiles: PixelTile[]
 
   constructor(
-    readonly config: PixelEngineConfig,
+    readonly config: TileTargetConfig,
     readonly pixelTilePool: TilePool<PixelTile>,
   ) {
     this.lookup = []
@@ -27,18 +26,17 @@ export class PixelAccumulator {
    * @param y pixel y coordinate
    */
   storePixelBeforeState(x: number, y: number): DidChangeFn | null {
-    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
 
     // Return a no-op if the pixel is outside the target boundaries
     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]
@@ -75,10 +73,10 @@ export class PixelAccumulator {
     w: number,
     h: number,
   ): DidChangeFn | null {
-    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
 
     // Clamp the bounding box to the actual canvas dimensions
     const clipX1 = Math.max(0, x)
@@ -91,10 +89,10 @@ export class PixelAccumulator {
       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
 

package/src/History/PixelMutator/mutatorBlendColor.ts

@@ -1,4 +1,5 @@
-import type { Color32, ColorBlendOptions } from '../../_types'
+import type { ColorBlendOptions } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import { blendColorPixelData } from '../../PixelData/blendColorPixelData'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
 

package/src/History/PixelMutator/mutatorBlendColorPaintAlphaMask.ts

@@ -1,5 +1,5 @@
-import { type Color32 } from '../../_types'
 import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../../Color/_color-types'
 import type { PaintAlphaMask } from '../../Paint/_paint-types'
 import { blendColorPixelDataAlphaMask } from '../../PixelData/blendColorPixelDataAlphaMask'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'

package/src/History/PixelMutator/mutatorBlendColorPaintBinaryMask.ts

@@ -1,5 +1,5 @@
-import { type Color32 } from '../../_types'
 import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../../Color/_color-types'
 import type { PaintBinaryMask } from '../../Paint/_paint-types'
 import { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'

package/src/History/PixelMutator/mutatorBlendColorPaintMask.ts

@@ -1,7 +1,8 @@
-import { type Color32 } from '../../_types'
 import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../../Color/_color-types'
 import { MaskType } from '../../Mask/_mask-types'
-import type { PaintMask } from '../../Paint/_paint-types'
+import type { PaintMask, PaintRect } from '../../Paint/_paint-types'
+import { blendColorPixelData } from '../../PixelData/blendColorPixelData'
 import { blendColorPixelDataAlphaMask } from '../../PixelData/blendColorPixelDataAlphaMask'
 import { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
@@ -9,6 +10,7 @@ import { type HistoryMutator, PixelWriter } from '../PixelWriter'
 const defaults = {
   blendColorPixelDataAlphaMask,
   blendColorPixelDataBinaryMask,
+  blendColorPixelData,
 }
 type Deps = Partial<typeof defaults>
 
@@ -19,6 +21,7 @@ export const mutatorBlendColorPaintMask = ((writer: PixelWriter<any>, deps: Part
   const {
     blendColorPixelDataBinaryMask = defaults.blendColorPixelDataBinaryMask,
     blendColorPixelDataAlphaMask = defaults.blendColorPixelDataAlphaMask,
+    blendColorPixelData = defaults.blendColorPixelData,
   } = deps
 
   const OPTS = {
@@ -26,12 +29,14 @@ export const mutatorBlendColorPaintMask = ((writer: PixelWriter<any>, deps: Part
     y: 0,
     blendFn: sourceOverPerfect,
     alpha: 255,
+    w: undefined as number | undefined,
+    h: undefined as number | undefined,
   }
 
   return {
     blendColorPaintMask(
       color: Color32,
-      mask: PaintMask,
+      mask: PaintMask | PaintRect,
       x: number,
       y: number,
       alpha = 255,
@@ -47,16 +52,26 @@ export const mutatorBlendColorPaintMask = ((writer: PixelWriter<any>, deps: Part
       OPTS.y = ty
       OPTS.alpha = alpha
       OPTS.blendFn = blendFn
+      OPTS.w = undefined
+      OPTS.h = undefined
 
-      if (mask.type === MaskType.BINARY) {
-        return didChange(
-          blendColorPixelDataBinaryMask(writer.config.target, color, mask, OPTS),
-        )
-      } else {
+      if (mask.data) {
+        if (mask.type === MaskType.BINARY) {
+          return didChange(
+            blendColorPixelDataBinaryMask(writer.config.target, color, mask, OPTS),
+          )
+        }
         return didChange(
           blendColorPixelDataAlphaMask(writer.config.target, color, mask, OPTS),
         )
       }
+
+      OPTS.w = mask.w
+      OPTS.h = mask.h
+
+      return didChange(
+        blendColorPixelData(writer.config.target, color, OPTS),
+      )
     },
   }
 }) satisfies HistoryMutator<any, Deps>

package/src/History/PixelMutator/mutatorBlendColorPaintRect.ts

@@ -1,5 +1,6 @@
-import type { BlendColor32, Color32 } from '../../_types'
+import type { BlendColor32 } from '../../_types'
 import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../../Color/_color-types'
 import { _macro_paintRectCenterOffset } from '../../Internal/macros'
 import { blendColorPixelData } from '../../PixelData/blendColorPixelData'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'

package/src/History/PixelMutator/mutatorBlendPixel.ts

@@ -1,4 +1,5 @@
-import type { BlendColor32, Color32 } from '../../_types'
+import type { BlendColor32 } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import { blendPixel } from '../../PixelData/blendPixel'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
 

package/src/History/PixelMutator/mutatorClear.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import { fillPixelData } from '../../PixelData/fillPixelData'
 import type { Rect } from '../../Rect/_rect-types'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'

package/src/History/PixelMutator/mutatorFill.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import { fillPixelData } from '../../PixelData/fillPixelData'
 import type { Rect } from '../../Rect/_rect-types'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'

package/src/History/PixelMutator/mutatorFillBinaryMask.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import type { BinaryMask } from '../../Mask/_mask-types'
 import { fillPixelDataBinaryMask } from '../../PixelData/fillPixelDataBinaryMask'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'

package/src/History/PixelWriter.ts

@@ -1,13 +1,13 @@
 import { resizeImageData } from '../ImageData/resizeImageData'
 import type { PixelData } from '../PixelData/_pixelData-types'
 import { setPixelData } from '../PixelData/PixelData'
-import type { PixelTile } from '../Tile/_tile-types'
+import type { PixelTile, TileTargetConfig } from '../Tile/_tile-types'
 import { makePixelTile } from '../Tile/PixelTile'
 import { TilePool } from '../Tile/TilePool'
+import { makeTileTargetConfig } from '../Tile/TileTargetConfig'
 import { type HistoryActionFactory, makeHistoryAction } from './HistoryAction'
 import { HistoryManager } from './HistoryManager'
 import { PixelAccumulator } from './PixelAccumulator'
-import { PixelEngineConfig } from './PixelEngineConfig'
 import type { PixelPatchTiles } from './PixelPatchTiles'
 
 export interface PixelWriterOptions {
@@ -44,7 +44,7 @@ export class PixelWriter<M> {
   readonly historyManager: HistoryManager
   readonly accumulator: PixelAccumulator
   readonly historyActionFactory: HistoryActionFactory
-  readonly config: PixelEngineConfig
+  readonly config: TileTargetConfig
   readonly pixelTilePool: TilePool<PixelTile>
   readonly mutator: M
 
@@ -54,10 +54,10 @@ export class PixelWriter<M> {
     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)
   }

package/src/ImageData/serialization.ts

@@ -2,8 +2,11 @@ import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from
 
 export function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {
   const uint8 = new Uint8Array(buffer)
-  const decoder = new TextDecoder('latin1')
-  const binary = decoder.decode(uint8)
+  let binary = ''
+
+  for (let i = 0; i < uint8.length; i++) {
+    binary += String.fromCharCode(uint8[i])
+  }
 
   return btoa(binary) as Base64EncodedUInt8Array
 }
@@ -11,9 +14,11 @@ export function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedU
 export function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray<ArrayBuffer> {
   const binary = atob(encoded)
   const bytes = new Uint8ClampedArray(binary.length)
+
   for (let i = 0; i < binary.length; i++) {
     bytes[i] = binary.charCodeAt(i)
   }
+
   return bytes
 }
 

package/src/IndexedImage/IndexedImage.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import type { IndexedImage } from './_indexedImage-types'
 
 export function makeIndexedImage(

package/src/IndexedImage/indexedImageToAverageColor.ts

@@ -1,5 +1,6 @@
-import type { Color32 } from '../_types'
-import { packColor } from '../color'
+import type { Color32 } from '../Color/_color-types'
+
+import { packColor } from '../Color/pack-color'
 import type { IndexedImage } from './_indexedImage-types'
 
 /**

package/src/Mask/_mask-types.ts

@@ -64,6 +64,15 @@ export type NullableBinaryMaskRect = Rect & ({
   type?: null
   data?: null
 })
+
+export type NullableAlphaMaskRect = Rect & ({
+  type: MaskType.ALPHA
+  data: Uint8Array
+} | {
+  type?: null
+  data?: null
+})
+
 export type NullableMaskRect = Rect & ({
   type: MaskType
   data: Uint8Array

package/src/Paint/AlphaMaskPaintBuffer.ts

@@ -1,9 +1,9 @@
 import { forEachLinePoint } from '../Algorithm/forEachLinePoint'
-import type { PixelEngineConfig } from '../History/PixelEngineConfig'
 import type { Rect } from '../Rect/_rect-types'
 import { trimRectBounds } from '../Rect/trimRectBounds'
-import type { AlphaMaskTile } from '../Tile/_tile-types'
-import type { TilePool } from '../Tile/TilePool'
+import type { AlphaMaskTile, TileTargetMeta } from '../Tile/_tile-types'
+import { makeAlphaMaskTile } from '../Tile/MaskTile'
+import { TilePool } from '../Tile/TilePool'
 import type { PaintAlphaMask, PaintBinaryMask, PaintRect } from './_paint-types'
 import { eachTileInBounds } from './eachTileInBounds'
 
@@ -16,8 +16,8 @@ export class AlphaMaskPaintBuffer {
   private eachTileInBoundsFn = eachTileInBounds
 
   constructor(
-    readonly config: PixelEngineConfig,
-    readonly tilePool: TilePool<AlphaMaskTile>,
+    readonly config: TileTargetMeta,
+    readonly tilePool: TilePool<AlphaMaskTile> = new TilePool(config.tileSize, makeAlphaMaskTile),
   ) {
     this.lookup = []
   }
@@ -46,9 +46,9 @@ export class AlphaMaskPaintBuffer {
     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, data: bD, centerOffsetX, centerOffsetY } = brush
 
@@ -66,8 +66,8 @@ export class AlphaMaskPaintBuffer {
         topLeftY,
         bW,
         bH,
-        target.w,
-        target.h,
+        targetW,
+        targetH,
         scratch,
       )
 
@@ -80,8 +80,8 @@ export class AlphaMaskPaintBuffer {
         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
@@ -130,9 +130,9 @@ export class AlphaMaskPaintBuffer {
     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, data: bD, centerOffsetX, centerOffsetY } = brush
     let changed = false
@@ -149,8 +149,8 @@ export class AlphaMaskPaintBuffer {
         topLeftY,
         bW,
         bH,
-        target.w,
-        target.h,
+        targetW,
+        targetH,
         scratch,
       )
 
@@ -163,8 +163,8 @@ export class AlphaMaskPaintBuffer {
         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
@@ -210,9 +210,9 @@ export class AlphaMaskPaintBuffer {
     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
@@ -237,8 +237,8 @@ export class AlphaMaskPaintBuffer {
           topLeftY,
           brushWidth,
           brushHeight,
-          target.w,
-          target.h,
+          targetW,
+          targetH,
           scratch,
         )
 
@@ -250,8 +250,8 @@ export class AlphaMaskPaintBuffer {
 
             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