feat(pixel): add OffscreenCanvas support

- update IBlit.blitCanvas() signature to accept
  `OffscreenCanvas` & `OffscreenCanvasRenderingContext2D`
- update blitCanvas() impls for Float/IntBuffer (extract shared internals)
- update canvasPixels()
- minor cleanup after #488

packages/pixel/src/api.ts

@@ -250,7 +250,11 @@ export interface IBlit<T extends IPixelBuffer> {
 	 * buffer, only the top-left region will be written.
 	 */
 	blitCanvas(
-		canvas: HTMLCanvasElement | CanvasRenderingContext2D,
+		canvas:
+			| HTMLCanvasElement
+			| CanvasRenderingContext2D
+			| OffscreenCanvas
+			| OffscreenCanvasRenderingContext2D,
 		opts?: Partial<BlitCanvasOpts>
 	): void;
 }

packages/pixel/src/canvas.ts

@@ -32,7 +32,7 @@ export function canvasPixels(
 		ctx = c.ctx;
 	} else {
 		canvas = width;
-		ctx = canvas.getContext("2d")! as typeof ctx;
+		ctx = canvas.getContext("2d")!;
 	}
 	if (parent && canvas instanceof HTMLCanvasElement)
 		parent.appendChild(canvas);

packages/pixel/src/float.ts

@@ -39,7 +39,11 @@ import { defFloatFormat } from "./format/float-format.js";
 import { FLOAT_GRAY } from "./format/float-gray.js";
 import { FLOAT_RGBA, ROT_IDS } from "./index.js";
 import { IntBuffer, intBufferFromCanvas, intBufferFromImage } from "./int.js";
-import { __clampRegion, __prepRegions } from "./internal/utils.js";
+import {
+	__blitCanvas,
+	__clampRegion,
+	__prepRegions,
+} from "./internal/utils.js";
 import { defSampler } from "./sample.js";
 
 /**
@@ -358,14 +362,7 @@ export class FloatBuffer
 			| OffscreenCanvasRenderingContext2D,
 		opts: Partial<BlitCanvasOpts> = {}
 	) {
-		const ctx =
-			canvas instanceof HTMLCanvasElement ||
-			canvas instanceof OffscreenCanvas
-				? (canvas.getContext("2d")! as
-						| CanvasRenderingContext2D
-						| OffscreenCanvasRenderingContext2D)
-				: canvas;
-		ctx.putImageData(this.toImageData(opts.data), opts.x || 0, opts.y || 0);
+		__blitCanvas(this, canvas, opts);
 	}
 
 	toImageData(idata?: ImageData) {

packages/pixel/src/int.ts

@@ -47,6 +47,7 @@ import {
 	__compileGrayToABGR,
 } from "./internal/codegen.js";
 import {
+	__blitCanvas,
 	__clampRegion,
 	__prepRegions,
 	__setChannelConvert,
@@ -301,12 +302,7 @@ export class IntBuffer
 			| OffscreenCanvasRenderingContext2D,
 		opts: Partial<BlitCanvasOpts> = {}
 	) {
-		const ctx =
-			canvas instanceof HTMLCanvasElement ||
-			canvas instanceof OffscreenCanvas
-				? canvas.getContext("2d")!
-				: canvas;
-		ctx.putImageData(this.toImageData(opts.data), opts.x || 0, opts.y || 0);
+		__blitCanvas(this, canvas, opts);
 	}
 
 	toImageData(idata?: ImageData) {

packages/pixel/src/internal/utils.ts

@@ -2,7 +2,13 @@
 import type { Fn, Fn2, FnN, UIntArray } from "@thi.ng/api";
 import { isNumber } from "@thi.ng/checks/is-number";
 import { clamp } from "@thi.ng/math/interval";
-import type { BlitOpts, IntFormat } from "../api.js";
+import type {
+	BlitCanvasOpts,
+	BlitOpts,
+	IntFormat,
+	IPixelBuffer,
+	IToImageData,
+} from "../api.js";
 
 export const __luminanceABGR: FnN = (c) =>
 	(((c >>> 16) & 0xff) * 29 + ((c >>> 8) & 0xff) * 150 + (c & 0xff) * 76) /
@@ -131,3 +137,22 @@ export const __asIntVec = (x: number | [number, number]) => {
  */
 export const __swapLane13: FnN = (x) =>
 	((x & 0xff) << 16) | ((x >> 16) & 0xff) | (x & 0xff00ff00);
+
+/**
+ * Shared implementation for {@link IBlit.blitCanvas}.
+ *
+ * @internal
+ */
+export const __blitCanvas = (
+	buf: IPixelBuffer & IToImageData,
+	canvas:
+		| HTMLCanvasElement
+		| CanvasRenderingContext2D
+		| OffscreenCanvas
+		| OffscreenCanvasRenderingContext2D,
+	opts: Partial<BlitCanvasOpts> = {}
+) =>
+	(canvas instanceof HTMLCanvasElement || canvas instanceof OffscreenCanvas
+		? canvas.getContext("2d")!
+		: canvas
+	).putImageData(buf.toImageData(opts.data), opts.x || 0, opts.y || 0);