pixel-data-js 0.36.0 → 0.37.0

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
 

package/src/Paint/Commit/commitMaskPaintBuffer.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 { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
@@ -42,7 +42,6 @@ export function commitMaskPaintBuffer(
   blendColorPixelDataMaskFn: any,
 ) {
   const config = accumulator.config
-  const tileShift = config.tileShift
   const lookup = paintBuffer.lookup
 
   SCRATCH_OPTS.alpha = alpha
@@ -54,11 +53,8 @@ export function commitMaskPaintBuffer(
     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
 

package/src/Paint/Render/AlphaMaskPaintBufferCanvasRenderer.ts

@@ -1,31 +1,46 @@
-import type { Color32 } from '../../_types'
-import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
-import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
-import { CANVAS_CTX_FAILED } from '../../Internal/_errors'
-import { makePixelData } from '../../PixelData/PixelData'
+import type { ReusableCanvasFactory } from '../../Canvas/_canvas-types'
+import { makeReusableOffscreenCanvas } from '../../Canvas/ReusableCanvas'
+import type { Color32 } from '../../Color/_color-types'
+import type { PixelData } from '../../PixelData/_pixelData-types'
+import { makeReusablePixelData } from '../../PixelData/ReusablePixelData'
+import type { AlphaMaskTile, TileTargetMeta } from '../../Tile/_tile-types'
 import type { AlphaMaskPaintBuffer } from '../AlphaMaskPaintBuffer'
 
 export type AlphaMaskPaintBufferCanvasRenderer = ReturnType<typeof makeAlphaMaskPaintBufferCanvasRenderer>
 
-export function makeAlphaMaskPaintBufferCanvasRenderer(
+export function makeAlphaMaskPaintBufferCanvasRenderer<T extends HTMLCanvasElement | OffscreenCanvas>(
   paintBuffer: AlphaMaskPaintBuffer,
-  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+  reusableCanvasFactory?: () => ReusableCanvasFactory<T>,
 ) {
-  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
+  const factory = (reusableCanvasFactory ?? makeReusableOffscreenCanvas) as unknown as () => ReusableCanvasFactory<T>
+  const getBuffer = factory()
+  const getBridge = makeReusablePixelData()
+
+  let config: TileTargetMeta
+  let tileSize: number
+  let tileArea: number
+  let lookup: (AlphaMaskTile | undefined)[]
+  let view32: Uint32Array
+  let bridge: PixelData
+  let canvas: HTMLCanvasElement | OffscreenCanvas
+  let ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+
+  setBuffer(paintBuffer)
+
+  function setBuffer(value: AlphaMaskPaintBuffer) {
+    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
+  }
 
-  return function drawPaintBuffer(
+  function draw(
     targetCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
     color: Color32,
     alpha = 255,
@@ -64,15 +79,17 @@ export function makeAlphaMaskPaintBufferCanvasRenderer(
           }
         }
 
-        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,
+  }
 }

package/src/Paint/Render/BinaryMaskPaintBufferCanvasRenderer.ts

@@ -1,31 +1,46 @@
-import type { Color32 } from '../../_types'
-import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
-import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
-import { CANVAS_CTX_FAILED } from '../../Internal/_errors'
-import { makePixelData } from '../../PixelData/PixelData'
+import type { ReusableCanvasFactory } from '../../Canvas/_canvas-types'
+import { makeReusableOffscreenCanvas } from '../../Canvas/ReusableCanvas'
+import type { Color32 } from '../../Color/_color-types'
+import type { PixelData } from '../../PixelData/_pixelData-types'
+import { makeReusablePixelData } from '../../PixelData/ReusablePixelData'
+import type { BinaryMaskTile, TileTargetMeta } from '../../Tile/_tile-types'
 import type { BinaryMaskPaintBuffer } from '../BinaryMaskPaintBuffer'
 
 export type BinaryMaskPaintBufferCanvasRenderer = ReturnType<typeof makeBinaryMaskPaintBufferCanvasRenderer>
 
-export function makeBinaryMaskPaintBufferCanvasRenderer(
+export function makeBinaryMaskPaintBufferCanvasRenderer<T extends HTMLCanvasElement | OffscreenCanvas>(
   paintBuffer: BinaryMaskPaintBuffer,
-  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+  reusableCanvasFactory?: () => ReusableCanvasFactory<T>,
 ) {
-  const config = paintBuffer.config
-  const tileSize = config.tileSize
-  const tileShift = config.tileShift
-  const tileArea = config.tileArea
-  const lookup = paintBuffer.lookup
+  const factory = (reusableCanvasFactory ?? makeReusableOffscreenCanvas) as unknown as () => ReusableCanvasFactory<T>
+  const getBuffer = factory()
+  const getBridge = makeReusablePixelData()
 
-  const canvas = canvasFactory(tileSize, tileSize)
-  const ctx = canvas.getContext('2d')
-  if (!ctx) throw new Error(CANVAS_CTX_FAILED)
-  ctx.imageSmoothingEnabled = false
+  let config: TileTargetMeta
+  let tileSize: number
+  let tileArea: number
+  let lookup: (BinaryMaskTile | undefined)[]
+  let view32: Uint32Array
+  let bridge: PixelData
+  let canvas: HTMLCanvasElement | OffscreenCanvas
+  let ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
 
-  const bridge = makePixelData(new ImageData(tileSize, tileSize))
-  const view32 = bridge.data
+  setBuffer(paintBuffer)
 
-  return function drawPaintBuffer(
+  function setBuffer(value: BinaryMaskPaintBuffer) {
+    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: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
     color: Color32,
     alpha = 255,
@@ -47,21 +62,22 @@ export function makeBinaryMaskPaintBufferCanvasRenderer(
         view32.fill(0)
 
         for (let p = 0; p < tileArea; p++) {
-          // If mask is solid, the final pixel is just the unmodified color
           if (data8[p] === 1) {
             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,
+  }
 }