pixel-data-js 0.35.0 → 0.37.0

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'
@@ -20,8 +20,9 @@ export const mutatorFillBinaryMask = ((writer: PixelWriter<any>, deps: Deps = de
       mask: BinaryMask,
       x = 0,
       y = 0,
-    ) {
+    ): boolean {
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, mask.w, mask.h)
+      if (!didChange) return false
       return didChange(
         fillPixelDataBinaryMask(writer.config.target, color, mask, x, y),
       )

package/src/History/PixelMutator/mutatorInvert.ts

@@ -14,7 +14,7 @@ export const mutatorInvert = ((writer: PixelWriter<any>, deps: Deps = defaults)
   } = deps
 
   return {
-    invert(opts?: PixelMutateOptions) {
+    invert(opts?: PixelMutateOptions): boolean {
       const target = writer.config.target
       const x = opts?.x ?? 0
       const y = opts?.y ?? 0
@@ -22,8 +22,9 @@ export const mutatorInvert = ((writer: PixelWriter<any>, deps: Deps = defaults)
       const h = opts?.h ?? target.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
 
-      return didChange(
+      return didChange?.(
         invertPixelData(target, opts),
       )
     },

package/src/History/PixelMutator.ts

@@ -12,7 +12,7 @@ import { mutatorBlendMask } from './PixelMutator/mutatorBlendMask'
 import { mutatorBlendPixel } from './PixelMutator/mutatorBlendPixel'
 import { mutatorBlendPixelData } from './PixelMutator/mutatorBlendPixelData'
 import { mutatorClear } from './PixelMutator/mutatorClear'
-import { mutatorFill, mutatorFillRect } from './PixelMutator/mutatorFill'
+import { mutatorFill } from './PixelMutator/mutatorFill'
 import { mutatorFillBinaryMask } from './PixelMutator/mutatorFillBinaryMask'
 import { mutatorInvert } from './PixelMutator/mutatorInvert'
 import type { PixelWriter } from './PixelWriter'
@@ -36,7 +36,6 @@ export function makeFullPixelMutator(writer: PixelWriter<any>) {
     ...mutatorClear(writer),
     ...mutatorFill(writer),
     ...mutatorFillBinaryMask(writer),
-    ...mutatorFillRect(writer),
     ...mutatorInvert(writer),
   }
 }

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/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

package/src/Paint/BinaryMaskPaintBuffer.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 { BinaryMaskTile } from '../Tile/_tile-types'
-import type { TilePool } from '../Tile/TilePool'
+import type { BinaryMaskTile, TileTargetMeta } from '../Tile/_tile-types'
+import { makeBinaryMaskTile } from '../Tile/MaskTile'
+import { TilePool } from '../Tile/TilePool'
 import type { PaintBinaryMask, PaintRect } from './_paint-types'
 import { eachTileInBounds } from './eachTileInBounds'
 
@@ -16,8 +16,8 @@ export class BinaryMaskPaintBuffer {
   private eachTileInBoundsFn = eachTileInBounds
 
   constructor(
-    readonly config: PixelEngineConfig,
-    readonly tilePool: TilePool<BinaryMaskTile>,
+    readonly config: TileTargetMeta,
+    readonly tilePool: TilePool<BinaryMaskTile> = new TilePool(config.tileSize, makeBinaryMaskTile),
   ) {
     this.lookup = []
   }
@@ -45,9 +45,9 @@ export class BinaryMaskPaintBuffer {
     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
@@ -64,8 +64,8 @@ export class BinaryMaskPaintBuffer {
         topLeftY,
         bW,
         bH,
-        target.w,
-        target.h,
+        targetW,
+        targetH,
         scratch,
       )
 
@@ -78,8 +78,8 @@ export class BinaryMaskPaintBuffer {
         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
@@ -125,9 +125,9 @@ export class BinaryMaskPaintBuffer {
     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
@@ -152,8 +152,8 @@ export class BinaryMaskPaintBuffer {
           topLeftY,
           brushWidth,
           brushHeight,
-          target.w,
-          target.h,
+          targetW,
+          targetH,
           scratch,
         )
 
@@ -165,8 +165,8 @@ export class BinaryMaskPaintBuffer {
 
             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

package/src/Paint/ColorPaintBuffer.ts

@@ -1,9 +1,8 @@
-import type { Color32 } from '../_types'
 import { forEachLinePoint } from '../Algorithm/forEachLinePoint'
-import type { PixelEngineConfig } from '../History/PixelEngineConfig'
+import type { Color32 } from '../Color/_color-types'
 import type { Rect } from '../Rect/_rect-types'
 import { trimRectBounds } from '../Rect/trimRectBounds'
-import type { PixelTile } from '../Tile/_tile-types'
+import type { PixelTile, TileTargetMeta } from '../Tile/_tile-types'
 import type { TilePool } from '../Tile/TilePool'
 import type { PaintAlphaMask, PaintBinaryMask, PaintRect } from './_paint-types'
 import { eachTileInBounds } from './eachTileInBounds'
@@ -13,7 +12,7 @@ export class ColorPaintBuffer {
   private readonly scratchBounds: Rect = { x: 0, y: 0, w: 0, h: 0 }
 
   constructor(
-    readonly config: PixelEngineConfig,
+    readonly config: TileTargetMeta,
     readonly tilePool: TilePool<PixelTile>,
   ) {
     this.lookup = []
@@ -48,9 +47,9 @@ export class ColorPaintBuffer {
     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, data: bD, centerOffsetX, centerOffsetY } = brush
     const cRGB = color & 0x00ffffff
@@ -66,8 +65,8 @@ export class ColorPaintBuffer {
         topLeftY,
         bW,
         bH,
-        target.w,
-        target.h,
+        targetW,
+        targetH,
         scratch,
       )
 
@@ -80,8 +79,8 @@ export class ColorPaintBuffer {
         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
@@ -137,9 +136,9 @@ export class ColorPaintBuffer {
     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, data: bD, centerOffsetX, centerOffsetY } = brush
     let changed = false
@@ -153,8 +152,8 @@ export class ColorPaintBuffer {
         topLeftY,
         bW,
         bH,
-        target.w,
-        target.h,
+        targetW,
+        targetH,
         scratch,
       )
 
@@ -167,8 +166,9 @@ export class ColorPaintBuffer {
         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
@@ -217,9 +217,9 @@ export class ColorPaintBuffer {
     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
@@ -242,39 +242,37 @@ export class ColorPaintBuffer {
           topLeftY,
           brushWidth,
           brushHeight,
-          target.w,
-          target.h,
+          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
+          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)
+          for (let i = 0; i < bH_t; i++) {
+            const canvasY = bY + i
+            const tOff = (canvasY - tile.y) * tileSize
+            const dS = tOff + (bX - tile.x)
 
-              for (let j = 0; j < bW_t; j++) {
-                const idx = dS + j
+            for (let j = 0; j < bW_t; j++) {
+              const idx = dS + j
 
-                if (d32[idx] !== color) {
-                  d32[idx] = color
-                  tileChanged = true
-                }
+              if (d32[idx] !== color) {
+                d32[idx] = color
+                tileChanged = true
               }
             }
+          }
 
-            if (tileChanged) {
-              changed = true
-            }
-          },
-        )
-      },
-    )
+          if (tileChanged) {
+            changed = true
+          }
+        })
+      })
 
     return changed
   }

package/src/Paint/Commit/AlphaMaskPaintBufferCommitter.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 { PixelAccumulator } from '../../History/PixelAccumulator'
 import { blendColorPixelDataAlphaMask } from '../../PixelData/blendColorPixelDataAlphaMask'
 import type { AlphaMaskPaintBuffer } from '../AlphaMaskPaintBuffer'

package/src/Paint/Commit/AlphaMaskPaintBufferManager.ts

@@ -1,6 +1,5 @@
-import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
+import type { ReusableCanvasFactory } from '../../Canvas/_canvas-types'
 import type { PixelWriter } from '../../History/PixelWriter'
-import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
 import { makeAlphaMaskTile } from '../../Tile/MaskTile'
 import { TilePool } from '../../Tile/TilePool'
 import { AlphaMaskPaintBuffer } from '../AlphaMaskPaintBuffer'
@@ -11,17 +10,17 @@ export type AlphaMaskPaintBufferManager =
   Pick<AlphaMaskPaintBuffer, 'paintAlphaMask' | 'paintBinaryMask' | 'paintRect'>
   & {
   commit: ReturnType<typeof makeAlphaMaskPaintBufferCommitter>
-  draw: ReturnType<typeof makeAlphaMaskPaintBufferCanvasRenderer>
+  renderer: ReturnType<typeof makeAlphaMaskPaintBufferCanvasRenderer>
   clear: () => void
 }
 
 export function makeAlphaMaskPaintBufferManager(
   writer: Pick<PixelWriter<any>, 'accumulator' | 'config'>,
-  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+  reusableCanvasFactory?: () => ReusableCanvasFactory<any>,
 ): AlphaMaskPaintBufferManager {
-  const pool = new TilePool(writer.config, makeAlphaMaskTile)
+  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),
@@ -29,6 +28,6 @@ export function makeAlphaMaskPaintBufferManager(
     paintAlphaMask: buffer.paintAlphaMask.bind(buffer),
     paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
     commit: makeAlphaMaskPaintBufferCommitter(writer.accumulator, buffer),
-    draw,
+    renderer,
   }
 }

package/src/Paint/Commit/BinaryMaskPaintBufferCommitter.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 { PixelAccumulator } from '../../History/PixelAccumulator'
 import { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
 import type { BinaryMaskPaintBuffer } from '../BinaryMaskPaintBuffer'

package/src/Paint/Commit/BinaryMaskPaintBufferManager.ts

@@ -1,6 +1,5 @@
-import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
+import type { ReusableCanvasFactory } from '../../Canvas/_canvas-types'
 import type { PixelWriter } from '../../History/PixelWriter'
-import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
 import { makeBinaryMaskTile } from '../../Tile/MaskTile'
 import { TilePool } from '../../Tile/TilePool'
 import { BinaryMaskPaintBuffer } from '../BinaryMaskPaintBuffer'
@@ -9,23 +8,23 @@ import { makeBinaryMaskPaintBufferCommitter } from './BinaryMaskPaintBufferCommi
 
 export type BinaryMaskPaintBufferManager = Pick<BinaryMaskPaintBuffer, 'paintBinaryMask' | 'paintRect'> & {
   commit: ReturnType<typeof makeBinaryMaskPaintBufferCommitter>
-  draw: ReturnType<typeof makeBinaryMaskPaintBufferCanvasRenderer>
+  renderer: ReturnType<typeof makeBinaryMaskPaintBufferCanvasRenderer>
   clear: () => void
 }
 
 export function makeBinaryMaskPaintBufferManager(
   writer: Pick<PixelWriter<any>, 'accumulator' | 'config'>,
-  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+  reusableCanvasFactory?: () => ReusableCanvasFactory<any>,
 ): BinaryMaskPaintBufferManager {
-  const pool = new TilePool(writer.config, makeBinaryMaskTile)
+  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,
   }
 }

package/src/Paint/Commit/ColorPaintBufferManager.ts

@@ -1,6 +1,5 @@
-import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
+import type { ReusableCanvasFactory } from '../../Canvas/_canvas-types'
 import type { PixelWriter } from '../../History/PixelWriter'
-import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
 import { makePixelTile } from '../../Tile/PixelTile'
 import { TilePool } from '../../Tile/TilePool'
 import { ColorPaintBuffer } from '../ColorPaintBuffer'
@@ -11,17 +10,17 @@ export type ColorPaintBufferManager =
   Pick<ColorPaintBuffer, 'paintAlphaMask' | 'paintBinaryMask' | 'paintRect'>
   & {
   commit: ReturnType<typeof makeColorPaintBufferCommitter>
-  draw: ReturnType<typeof makeColorPaintBufferCanvasRenderer>
+  renderer: ReturnType<typeof makeColorPaintBufferCanvasRenderer>
   clear: () => void
 }
 
 export function makeColorPaintBufferManager(
   writer: Pick<PixelWriter<any>, 'accumulator' | 'config'>,
-  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+  reusableCanvasFactory?: () => ReusableCanvasFactory<any>,
 ): ColorPaintBufferManager {
-  const pool = new TilePool(writer.config, makePixelTile)
+  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),
@@ -29,6 +28,6 @@ export function makeColorPaintBufferManager(
     paintAlphaMask: buffer.paintAlphaMask.bind(buffer),
     paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
     commit: makeColorPaintBufferCommitter(writer.accumulator, buffer),
-    draw,
+    renderer,
   }
 }

package/src/Paint/Commit/commitColorPaintBuffer.ts

@@ -20,7 +20,6 @@ export function commitColorPaintBuffer(
   blendPixelDataFn = blendPixelData,
 ) {
   const config = accumulator.config
-  const tileShift = config.tileShift
   const lookup = paintBuffer.lookup
 
   SCRATCH_OPTS.alpha = alpha
@@ -32,11 +31,8 @@ export function commitColorPaintBuffer(
     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