refactor(pixel): remove canvas2d() & related types

BREAKING CHANGE: migrate canvas2d() & related types to new pkg @thi.ng/canvas

- add canvas opts arg for imageCanvas()

packages/pixel/package.json

@@ -37,6 +37,7 @@
 	"dependencies": {
 		"@thi.ng/api": "^8.9.13",
 		"@thi.ng/binary": "^3.4.1",
+		"@thi.ng/canvas": "^0.0.1",
 		"@thi.ng/checks": "^3.4.13",
 		"@thi.ng/distance": "^2.4.36",
 		"@thi.ng/errors": "^2.4.7",

packages/pixel/src/api.ts

@@ -12,6 +12,7 @@ import type {
 	TypedArray,
 	UintType,
 } from "@thi.ng/api";
+import type { CanvasContext } from "@thi.ng/canvas";
 
 /**
  * ABGR 8bit lane/channel IDs
@@ -204,11 +205,6 @@ export interface FloatFormat extends IABGRConvert<NumericArray> {
 	getNormalized(val: number): number;
 }
 
-export interface CanvasContext {
-	canvas: HTMLCanvasElement;
-	ctx: CanvasRenderingContext2D;
-}
-
 export interface RawPixelBuffer extends CanvasContext {
 	img: ImageData;
 	data: Uint32Array;
@@ -518,15 +514,3 @@ export interface NormalMapOpts {
 export type IntSampler = FnU2<number>;
 
 export type FloatSampler = FnU2<number, NumericArray>;
-
-export interface Canvas2DOpts {
-	/**
-	 * (Native) options passed to `canvas.getContext("2d")`
-	 */
-	ctx: CanvasRenderingContext2DSettings;
-	/**
-	 * If true, adds CSS rule to force canvas being displayed properly pixelated
-	 * (no smoothing)
-	 */
-	pixelated: boolean;
-}

packages/pixel/src/canvas.ts

@@ -1,32 +1,6 @@
 import { isNumber } from "@thi.ng/checks/is-number";
-import type { Canvas2DOpts, CanvasContext, RawPixelBuffer } from "./api.js";
-
-/**
- * Creates a canvas element of given size, obtains its 2D drawing
- * context and returns object of both. If `parent` is given, the canvas
- * is appended to it as child.
- *
- * @param width -
- * @param height -
- * @param parent -
- * @param opts -
- */
-export const canvas2d = (
-	width: number,
-	height = width,
-	parent?: HTMLElement,
-	opts: Partial<Canvas2DOpts> = {}
-): CanvasContext => {
-	const canvas = document.createElement("canvas");
-	canvas.width = width;
-	canvas.height = height;
-	parent && parent.appendChild(canvas);
-	opts.pixelated && (canvas.style.imageRendering = "pixelated");
-	return {
-		canvas,
-		ctx: canvas.getContext("2d", opts.ctx)!,
-	};
-};
+import type { RawPixelBuffer } from "./api.js";
+import { canvas2d } from "@thi.ng/canvas";
 
 /**
  * Accepts either an existing canvas or creates a new one of given size.

packages/pixel/src/image.ts

@@ -1,6 +1,9 @@
+import {
+	canvas2d,
+	type Canvas2DOpts,
+	type CanvasContext,
+} from "@thi.ng/canvas";
 import { isNumber } from "@thi.ng/checks/is-number";
-import { canvas2d } from "./canvas.js";
-import type { CanvasContext } from "./api.js";
 
 /**
  * Creates canvas for given image and draws image, optionally with given
@@ -17,11 +20,13 @@ export const imageCanvas = (
 	img: HTMLImageElement,
 	width?: number,
 	height = width,
-	parent?: HTMLElement
+	parent?: HTMLElement,
+	opts?: Partial<Canvas2DOpts>
 ): CanvasContext => {
-	const ctx = isNumber(width)
-		? canvas2d(width, height, parent)
-		: canvas2d(img.width, img.height, parent);
+	const ctx =
+		isNumber(width) && isNumber(height)
+			? canvas2d(width, height, parent, opts)
+			: canvas2d(img.width, img.height, parent, opts);
 	ctx.ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
 	return ctx;
 };