pixel-data-js 0.26.0 → 0.28.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-data-js",
   "type": "module",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "packageManager": "pnpm@10.33.0",
   "description": "JS Pixel and ImageData operations",
   "author": {
@@ -17,7 +17,9 @@
     "color",
     "blend modes",
     "color blend",
-    "canvas"
+    "canvas",
+    "draw",
+    "paint"
   ],
   "main": "./dist/index.prod.cjs",
   "module": "./dist/index.prod.js",
@@ -45,18 +47,17 @@
   "scripts": {
     "build": "tsup",
     "test": "vitest --coverage --project unit",
-    "re-index": "tsx _scripts/re-index.ts",
-    "check": "npm run check-circ && npm run re-index && npm run sort && npm run typecheck",
     "test:build": "pnpm build && vitest run --project dist",
-    "check-circ": "tsx _scripts/check-circular.ts",
     "test:mutation": "stryker run",
-    "docs": "npx typedoc",
-    "typecheck": "tsc --noEmit",
-    "check-exports": "tsx _scripts/check-exports.ts",
+    "re-index": "tsx _scripts/re-index.ts",
+    "check-circ": "tsx _scripts/check-circular.ts",
     "sort": "tsx _scripts/apply-sorting.ts",
+    "check": "pnpm run check-circ && pnpm run re-index && pnpm run sort && pnpm run typecheck && pnpm typedoc",
+    "typecheck": "tsc --noEmit",
     "bench": "tsx ./benchmark/run.ts",
     "bench:all": "tsx ./benchmark/run-all.ts",
-    "bench:compare": "tsx ./benchmark/compare.ts"
+    "bench:compare": "tsx ./benchmark/compare.ts",
+    "docs": "pnpm typedoc"
   },
   "devDependencies": {
     "@clack/prompts": "^1.1.0",
@@ -67,7 +68,6 @@
     "@stryker-mutator/vitest-runner": "^9.5.1",
     "@types/cli-progress": "^3.11.6",
     "@types/node": "^25.2.3",
-    "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
     "cli-progress": "^3.12.0",
     "cmd-ts": "^0.15.0",
@@ -88,7 +88,7 @@
     "typedoc-plugin-mdn-links": "^5.1.1",
     "typedoc-rhineai-theme": "^1.2.0",
     "typescript": "^5.9.3",
-    "unplugin-inline": "^1.14.0",
+    "unplugin-inline": "^1.15.0",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "3.2.4"
   },

package/src/Algorithm/floodFillSelection.ts

@@ -1,7 +1,9 @@
-import { type BinaryMaskRect, type Color32, MaskType, type Rect } from '../_types'
+import { type Color32 } from '../_types'
 import { colorDistance } from '../color'
 import { extractImageDataBuffer } from '../ImageData/extractImageDataBuffer'
-import type { PixelData } from '../PixelData/PixelData'
+import { type BinaryMaskRect, MaskType } from '../Mask/_mask-types'
+import type { PixelData } from '../PixelData/_pixelData-types'
+import type { Rect } from '../Rect/_rect-types'
 import { trimMaskRectBounds } from '../Rect/trimMaskRectBounds'
 
 export type FloodFillResult = BinaryMaskRect & {
@@ -11,7 +13,7 @@ export type FloodFillResult = BinaryMaskRect & {
 }
 
 /**
- * Performs a color-based flood fill selection on {@link ImageData} or {@link PixelData}.
+ * Performs a color-based flood fill selection {@link PixelData}.
  * This utility identifies pixels starting from a specific coordinate that fall within a
  * color tolerance. It can operate in "contiguous" mode (classic bucket fill) or
  * "non-contiguous" mode (selects all matching pixels in the buffer).
@@ -51,9 +53,9 @@ export function floodFillSelection(
   out?: FloodFillResult,
 ): FloodFillResult | null {
 
-  const data32 = target.data32
-  const width = target.width
-  const height = target.height
+  const data32 = target.data
+  const width = target.w
+  const height = target.h
 
   const lx = bounds?.x ?? 0
   const ly = bounds?.y ?? 0

package/src/Algorithm/forEachLinePoint.ts

@@ -9,18 +9,18 @@ export function forEachLinePoint(
   y1: number,
   callback: (x: number, y: number) => void,
 ): void {
+
+  if (x0 === x1 && y0 === y1) {
+    callback(x0, y0)
+    return
+  }
+
   const dx = x1 - x0
   const dy = y1 - y0
 
   // Determine the number of steps based on the longest axis
   const steps = Math.max(Math.abs(dx), Math.abs(dy))
 
-  // Handle the zero-length line (Single Stamp Case)
-  if (steps === 0) {
-    callback(x0, y0)
-    return
-  }
-
   const xInc = dx / steps
   const yInc = dy / steps
 

package/src/{Internal/resample32.ts → Algorithm/resampleUint32Array.ts}

@@ -1,26 +1,15 @@
-const resample32Scratch = {
-  data: null as null | Int32Array,
-  width: 0,
-  height: 0,
-}
-
-/**
- *  @internal
- */
-type Resample32Result = { data: Int32Array; width: number; height: number }
+import type { MutablePixelData32, PixelData32 } from '../PixelData/_pixelData-types'
 
-/**
- *  @internal
- */
-export function resample32(
-  srcData32: Uint32Array | Int32Array,
+export function resampleUint32Array<T extends PixelData32, M extends MutablePixelData32>(
+  srcData32: Uint32Array,
   srcW: number,
   srcH: number,
   factor: number,
-): Resample32Result {
+  out?: M,
+): T {
   const dstW = Math.max(1, (srcW * factor) | 0)
   const dstH = Math.max(1, (srcH * factor) | 0)
-  const dstData = new Int32Array(dstW * dstH)
+  const dstData = new Uint32Array(dstW * dstH)
 
   // Use the reciprocal to map back precisely
   const scaleX = srcW / dstW
@@ -38,9 +27,10 @@ export function resample32(
     }
   }
 
-  resample32Scratch.data = dstData
-  resample32Scratch.width = dstW
-  resample32Scratch.height = dstH
+  out = out ?? {} as M
+  out.data = dstData
+  out.w = dstW
+  out.h = dstH
 
-  return resample32Scratch as Resample32Result
+  return out as unknown as T
 }

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

@@ -4,6 +4,165 @@ import { makeBlendModeRegistry } from './BlendModeRegistry'
 
 export const overwriteFast = overwriteBase
 
+export const sourceInFast: BlendColor32 = (src, dst) => {
+  const da = (dst >>> 24) & 0xFF
+  if (da === 0) return 0 as Color32
+  if (da === 255) return src
+
+  const sa = (src >>> 24) & 0xFF
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+
+  const r = (sr * da) >> 8
+  const g = (sg * da) >> 8
+  const b = (sb * da) >> 8
+  const a = (sa * da) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const sourceOutFast: BlendColor32 = (src, dst) => {
+  const da = (dst >>> 24) & 0xFF
+  if (da === 255) return 0 as Color32
+  if (da === 0) return src
+
+  const sa = (src >>> 24) & 0xFF
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+
+  const invDa = 255 - da
+  const r = (sr * invDa) >> 8
+  const g = (sg * invDa) >> 8
+  const b = (sb * invDa) >> 8
+  const a = (sa * invDa) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const sourceAtopFast: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  const da = (dst >>> 24) & 0xFF
+  if (da === 0) return 0 as Color32
+
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invSa = 255 - sa
+  const r = (sr * da + dr * invSa) >> 8
+  const g = (sg * da + dg * invSa) >> 8
+  const b = (sb * da + db * invSa) >> 8
+
+  return ((da << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const destinationOverFast: BlendColor32 = (src, dst) => {
+  const da = (dst >>> 24) & 0xFF
+  if (da === 255) return dst
+  if (da === 0) return src
+
+  const sa = (src >>> 24) & 0xFF
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invDa = 255 - da
+  const r = (dr * 255 + sr * invDa) >> 8
+  const g = (dg * 255 + sg * invDa) >> 8
+  const b = (db * 255 + sb * invDa) >> 8
+  const a = (da * 255 + sa * invDa) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const destinationInFast: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return 0 as Color32
+  if (sa === 255) return dst
+
+  const da = (dst >>> 24) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const r = (dr * sa) >> 8
+  const g = (dg * sa) >> 8
+  const b = (db * sa) >> 8
+  const a = (da * sa) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const destinationOutFast: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 255) return 0 as Color32
+  if (sa === 0) return dst
+
+  const da = (dst >>> 24) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invSa = 255 - sa
+  const r = (dr * invSa) >> 8
+  const g = (dg * invSa) >> 8
+  const b = (db * invSa) >> 8
+  const a = (da * invSa) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const destinationAtopFast: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return 0 as Color32 // Rule: Final Alpha = Sa
+  const da = (dst >>> 24) & 0xFF
+  if (da === 0) return 0 as Color32
+
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invDa = 255 - da
+  const r = (dr * sa + sr * invDa) >> 8
+  const g = (dg * sa + sg * invDa) >> 8
+  const b = (db * sa + sb * invDa) >> 8
+
+  return ((sa << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const xorFast: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  const da = (dst >>> 24) & 0xFF
+
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invDa = 255 - da
+  const invSa = 255 - sa
+
+  const r = (sr * invDa + dr * invSa) >> 8
+  const g = (sg * invDa + dg * invSa) >> 8
+  const b = (sb * invDa + db * invSa) >> 8
+  const a = (sa * invDa + da * invSa) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
 export const sourceOverFast: BlendColor32 = (src, dst) => {
   const sa = (src >>> 24) & 0xFF
   if (sa === 255) return src
@@ -577,6 +736,16 @@ export const divideFast: BlendColor32 = (src, dst) => {
 
 export const BASE_FAST_BLEND_MODE_FUNCTIONS: Record<number, BlendColor32> = {
   [BaseBlendMode.overwrite]: overwriteFast,
+
+  [BaseBlendMode.sourceIn]: sourceInFast,
+  [BaseBlendMode.sourceOut]: sourceOutFast,
+  [BaseBlendMode.sourceAtop]: sourceAtopFast,
+  [BaseBlendMode.destinationOver]: destinationOverFast,
+  [BaseBlendMode.destinationIn]: destinationInFast,
+  [BaseBlendMode.destinationOut]: destinationOutFast,
+  [BaseBlendMode.destinationAtop]: destinationAtopFast,
+  [BaseBlendMode.xor]: xorFast,
+
   [BaseBlendMode.sourceOver]: sourceOverFast,
   [BaseBlendMode.darken]: darkenFast,
   [BaseBlendMode.multiply]: multiplyFast,

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

@@ -4,6 +4,203 @@ import { makeBlendModeRegistry } from './BlendModeRegistry'
 
 export const overwritePerfect = overwriteBase
 
+export const sourceInPerfect: BlendColor32 = (src, dst) => {
+  const da = (dst >>> 24) & 0xFF
+  if (da === 0) return 0 as Color32
+  if (da === 255) return src
+
+  const sa = (src >>> 24) & 0xFF
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+
+  // Result: [Sa * Da, Sc * Da]
+  const tR = sr * da
+  const r = (tR + 1 + (tR >> 8)) >> 8
+  const tG = sg * da
+  const g = (tG + 1 + (tG >> 8)) >> 8
+  const tB = sb * da
+  const b = (tB + 1 + (tB >> 8)) >> 8
+  const tA = sa * da
+  const a = (tA + 1 + (tA >> 8)) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const sourceOutPerfect: BlendColor32 = (src, dst) => {
+  const da = (dst >>> 24) & 0xFF
+  if (da === 255) return 0 as Color32
+  if (da === 0) return src
+
+  const sa = (src >>> 24) & 0xFF
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+
+  const invDa = 255 - da
+  // Result: [Sa * (1 - Da), Sc * (1 - Da)]
+  const tR = sr * invDa
+  const r = (tR + 1 + (tR >> 8)) >> 8
+  const tG = sg * invDa
+  const g = (tG + 1 + (tG >> 8)) >> 8
+  const tB = sb * invDa
+  const b = (tB + 1 + (tB >> 8)) >> 8
+  const tA = sa * invDa
+  const a = (tA + 1 + (tA >> 8)) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const sourceAtopPerfect: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  const da = (dst >>> 24) & 0xFF
+  if (da === 0) return 0 as Color32
+
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invSa = 255 - sa
+  // Result: [Da, Sc * Da + Dc * (1 - Sa)]
+  const tR = sr * da + dr * invSa
+  const r = (tR + 1 + (tR >> 8)) >> 8
+  const tG = sg * da + dg * invSa
+  const g = (tG + 1 + (tG >> 8)) >> 8
+  const tB = sb * da + db * invSa
+  const b = (tB + 1 + (tB >> 8)) >> 8
+
+  return ((da << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const destinationOverPerfect: BlendColor32 = (src, dst) => {
+  const da = (dst >>> 24) & 0xFF
+  if (da === 255) return dst
+  if (da === 0) return src
+
+  const sa = (src >>> 24) & 0xFF
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invDa = 255 - da
+  // Result: [Da + Sa * (1 - Da), Dc + Sc * (1 - Da)]
+  const tR = dr * 255 + sr * invDa
+  const r = (tR + 1 + (tR >> 8)) >> 8
+  const tG = dg * 255 + sg * invDa
+  const g = (tG + 1 + (tG >> 8)) >> 8
+  const tB = db * 255 + sb * invDa
+  const b = (tB + 1 + (tB >> 8)) >> 8
+  const tA = da * 255 + sa * invDa
+  const a = (tA + 1 + (tA >> 8)) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const destinationInPerfect: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return 0 as Color32
+  if (sa === 255) return dst
+
+  const da = (dst >>> 24) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  // Result: [Da * Sa, Dc * Sa]
+  const tR = dr * sa
+  const r = (tR + 1 + (tR >> 8)) >> 8
+  const tG = dg * sa
+  const g = (tG + 1 + (tG >> 8)) >> 8
+  const tB = db * sa
+  const b = (tB + 1 + (tB >> 8)) >> 8
+  const tA = da * sa
+  const a = (tA + 1 + (tA >> 8)) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const destinationOutPerfect: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 255) return 0 as Color32
+  if (sa === 0) return dst
+
+  const da = (dst >>> 24) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invSa = 255 - sa
+  // Result: [Da * (1 - Sa), Dc * (1 - Sa)]
+  const tR = dr * invSa
+  const r = (tR + 1 + (tR >> 8)) >> 8
+  const tG = dg * invSa
+  const g = (tG + 1 + (tG >> 8)) >> 8
+  const tB = db * invSa
+  const b = (tB + 1 + (tB >> 8)) >> 8
+  const tA = da * invSa
+  const a = (tA + 1 + (tA >> 8)) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const destinationAtopPerfect: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return 0 as Color32 // Rule: Final Alpha = Sa
+  const da = (dst >>> 24) & 0xFF
+  if (da === 0) return 0 as Color32
+
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invDa = 255 - da
+  // Result: [Sa, Dc * Sa + Sc * (1 - Da)]
+  const tR = dr * sa + sr * invDa
+  const r = (tR + 1 + (tR >> 8)) >> 8
+  const tG = dg * sa + sg * invDa
+  const g = (tG + 1 + (tG >> 8)) >> 8
+  const tB = db * sa + sb * invDa
+  const b = (tB + 1 + (tB >> 8)) >> 8
+
+  return ((sa << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const xorPerfect: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  const da = (dst >>> 24) & 0xFF
+
+  const sr = src & 0xFF
+  const sg = (src >>> 8) & 0xFF
+  const sb = (src >>> 16) & 0xFF
+  const dr = dst & 0xFF
+  const dg = (dst >>> 8) & 0xFF
+  const db = (dst >>> 16) & 0xFF
+
+  const invDa = 255 - da
+  const invSa = 255 - sa
+
+  // Result: [Sa * (1 - Da) + Da * (1 - Sa), Sc * (1 - Da) + Dc * (1 - Sa)]
+  const tR = sr * invDa + dr * invSa
+  const r = (tR + 1 + (tR >> 8)) >> 8
+  const tG = sg * invDa + dg * invSa
+  const g = (tG + 1 + (tG >> 8)) >> 8
+  const tB = sb * invDa + db * invSa
+  const b = (tB + 1 + (tB >> 8)) >> 8
+  const tA = sa * invDa + da * invSa
+  const a = (tA + 1 + (tA >> 8)) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
 export const sourceOverPerfect: BlendColor32 = (src, dst) => {
   const sa = (src >>> 24) & 0xFF
   if (sa === 255) return src
@@ -748,6 +945,16 @@ export const dividePerfect: BlendColor32 = (src, dst) => {
 
 export const BASE_PERFECT_BLEND_MODE_FUNCTIONS: Record<number, BlendColor32> = {
   [BaseBlendMode.overwrite]: overwritePerfect,
+
+  [BaseBlendMode.sourceIn]: sourceInPerfect,
+  [BaseBlendMode.sourceOut]: sourceOutPerfect,
+  [BaseBlendMode.sourceAtop]: sourceAtopPerfect,
+  [BaseBlendMode.destinationOver]: destinationOverPerfect,
+  [BaseBlendMode.destinationIn]: destinationInPerfect,
+  [BaseBlendMode.destinationOut]: destinationOutPerfect,
+  [BaseBlendMode.destinationAtop]: destinationAtopPerfect,
+  [BaseBlendMode.xor]: xorPerfect,
+
   [BaseBlendMode.sourceOver]: sourceOverPerfect,
   [BaseBlendMode.darken]: darkenPerfect,
   [BaseBlendMode.multiply]: multiplyPerfect,

package/src/BlendModes/blend-modes.ts

@@ -24,6 +24,15 @@ export const BaseBlendMode = {
   exclusion: 20,
   subtract: 21,
   divide: 22,
+
+  sourceIn: 23,
+  sourceOut: 24,
+  sourceAtop: 25,
+  destinationOver: 26,
+  destinationIn: 27,
+  destinationOut: 28,
+  destinationAtop: 29,
+  xor: 30,
 } as const
 
 export interface RequiredBlendModes {

package/src/Canvas/CanvasFrameRenderer.ts

@@ -1,54 +1,46 @@
-import type { PixelCanvas } from './PixelCanvas'
-import { makeReusableCanvas } from './ReusableCanvas'
+import type { DrawPixelLayer, DrawScreenLayer, PixelCanvas, ReusableCanvasFactory } from './_canvas-types'
+import { makeReusableOffscreenCanvas } from './ReusableCanvas'
 
-export type DrawPixelLayer = (ctx: CanvasRenderingContext2D) => void
-export type DrawScreenLayer = (ctx: CanvasRenderingContext2D, scale: number) => void
-export type CanvasFrameRenderer = ReturnType<typeof makeCanvasFrameRenderer>
+export type CanvasFrameRenderer<T extends HTMLCanvasElement | OffscreenCanvas = OffscreenCanvas> =
+  ReturnType<typeof makeCanvasFrameRenderer<T>>
 
-const defaults = {
-  makeReusableCanvas,
-}
-
-type Deps = Partial<typeof defaults>
-
-/**
- * @param deps - @hidden
- */
-export function makeCanvasFrameRenderer(deps: Deps = defaults) {
-  const {
-    makeReusableCanvas = defaults.makeReusableCanvas,
-  } = deps
-
-  const bufferCanvas = makeReusableCanvas()
+export function makeCanvasFrameRenderer<T extends HTMLCanvasElement | OffscreenCanvas = OffscreenCanvas>(
+  reusableCanvasFactory: () => ReusableCanvasFactory<T> = makeReusableOffscreenCanvas as unknown as () => ReusableCanvasFactory<T>,
+) {
+  const bufferCanvas = reusableCanvasFactory()
 
   return function renderCanvasFrame(
     pixelCanvas: PixelCanvas,
     scale: number,
     getImageData: () => ImageData | undefined | null,
-    drawPixelLayer?: DrawPixelLayer,
+    drawPixelLayer?: DrawPixelLayer<T>,
     drawScreenLayer?: DrawScreenLayer,
   ) {
-    const { canvas, ctx } = pixelCanvas
 
-    // 1. Clear pixel buffer (unscaled)
-    const { ctx: pxCtx, canvas: pxCanvas } = bufferCanvas(canvas.width, canvas.height)
+    const canvas = pixelCanvas.canvas
+    const ctx = pixelCanvas.ctx
+    const w = canvas.width
+    const h = canvas.height
+
+    // 1. Clear pixel buffer
+    const buffer = bufferCanvas(w, h)
 
     // 2. Draw pixel data into pixel buffer
     const img = getImageData()
     if (img) {
-      pxCtx.putImageData(img, 0, 0)
+      buffer.ctx.putImageData(img, 0, 0)
     }
 
     // draw transient pixel data
-    drawPixelLayer?.(pxCtx)
+    drawPixelLayer?.(buffer.ctx)
 
     // clear target canvas
     ctx.setTransform(1, 0, 0, 1, 0, 0)
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.clearRect(0, 0, w, h)
 
     // Draw pixel buffer scaled onto screen
     ctx.setTransform(scale, 0, 0, scale, 0, 0)
-    ctx.drawImage(pxCanvas, 0, 0)
+    ctx.drawImage(buffer.canvas, 0, 0)
 
     // Draw overlays in screen space
     ctx.setTransform(1, 0, 0, 1, 0, 0)

package/src/Canvas/CanvasPixelDataRenderer.ts

@@ -0,0 +1,23 @@
+import type { PixelData } from '../PixelData/_pixelData-types'
+import type { ReusableCanvasFactory } from './_canvas-types'
+import { makeReusableOffscreenCanvas } from './ReusableCanvas'
+
+export type CanvasPixelDataRenderer = ReturnType<typeof makeCanvasPixelDataRenderer>
+
+export function makeCanvasPixelDataRenderer<T extends HTMLCanvasElement | OffscreenCanvas = OffscreenCanvas>(
+  reusableCanvasFactory: () => ReusableCanvasFactory<T> = makeReusableOffscreenCanvas as unknown as () => ReusableCanvasFactory<T>,
+) {
+  const bufferCanvas = reusableCanvasFactory()
+
+  return function drawPixelData(
+    targetCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    pixelData: PixelData,
+    x = 0,
+    y = 0,
+  ): void {
+    const buffer = bufferCanvas(pixelData.w, pixelData.h)
+
+    buffer.ctx.putImageData(pixelData.imageData, 0, 0)
+    targetCtx.drawImage(buffer.canvas, x, y)
+  }
+}