diff --git a/examples/canvas-recorder/package.json b/examples/canvas-recorder/package.json
index 758ef4aaa4..5840611722 100644
--- a/examples/canvas-recorder/package.json
+++ b/examples/canvas-recorder/package.json
@@ -16,7 +16,7 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "workspace:^",
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/dl-asset": "workspace:^",
 		"@thi.ng/geom": "workspace:^",
 		"@thi.ng/hiccup-canvas": "workspace:^",
diff --git a/examples/canvas-recorder/src/index.ts b/examples/canvas-recorder/src/index.ts
index 176a6b96f0..9c208c5ade 100644
--- a/examples/canvas-recorder/src/index.ts
+++ b/examples/canvas-recorder/src/index.ts
@@ -1,9 +1,9 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { adaptDPI } from "@thi.ng/canvas";
 import { canvasRecorder } from "@thi.ng/dl-asset";
 import { group, text } from "@thi.ng/geom";
 import { draw } from "@thi.ng/hiccup-canvas";
 import { button, canvas, div } from "@thi.ng/hiccup-html";
-import { SYSTEM, XsAdd, pickRandom } from "@thi.ng/random";
+import { SYSTEM, pickRandom } from "@thi.ng/random";
 import { $compile } from "@thi.ng/rdom";
 import { reactive } from "@thi.ng/rstream";
 import { consume, repeatedly2d } from "@thi.ng/transducers";
diff --git a/examples/geom-fuzz-basics/package.json b/examples/geom-fuzz-basics/package.json
index 626b88626b..eb3c7d800d 100644
--- a/examples/geom-fuzz-basics/package.json
+++ b/examples/geom-fuzz-basics/package.json
@@ -12,7 +12,7 @@
 		"preview": "vite preview --host --open"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "workspace:^",
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/geom": "workspace:^",
 		"@thi.ng/geom-fuzz": "workspace:^",
 		"@thi.ng/hiccup-canvas": "workspace:^",
@@ -25,6 +25,7 @@
 	},
 	"thi.ng": {
 		"readme": [
+			"canvas",
 			"geom",
 			"geom-fuzz",
 			"hiccup-canvas"
diff --git a/examples/geom-fuzz-basics/src/index.ts b/examples/geom-fuzz-basics/src/index.ts
index 29fe17431f..fbfbbeefd3 100644
--- a/examples/geom-fuzz-basics/src/index.ts
+++ b/examples/geom-fuzz-basics/src/index.ts
@@ -1,4 +1,4 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { adaptiveCanvas2d } from "@thi.ng/canvas";
 import { circle, group, star, vertices } from "@thi.ng/geom";
 import {
 	compFill,
@@ -38,11 +38,7 @@ const curvePos = (
 	ay: number
 ) => [Math.sin(t * fx) * ax + W / 2, Math.cos(t * fy) * ay + W / 2];
 
-const canvas: HTMLCanvasElement = document.createElement("canvas");
-document.body.appendChild(canvas);
-adaptDPI(canvas, W, W);
-
-const ctx = canvas.getContext("2d")!;
+const { canvas, ctx } = adaptiveCanvas2d(W, W, document.body);
 
 fromInterval(1000 / 30).subscribe({
 	next(t: number) {
diff --git a/examples/grid-iterators/package.json b/examples/grid-iterators/package.json
index 6f9e5fed3f..747e02c423 100644
--- a/examples/grid-iterators/package.json
+++ b/examples/grid-iterators/package.json
@@ -12,9 +12,9 @@
 		"preview": "vite preview --host --open"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/color": "workspace:^",
 		"@thi.ng/grid-iterators": "workspace:^",
-		"@thi.ng/pixel": "workspace:^",
 		"@thi.ng/transducers": "workspace:^"
 	},
 	"browser": {
@@ -24,6 +24,7 @@
 	},
 	"thi.ng": {
 		"readme": [
+			"canvas",
 			"color",
 			"grid-iterators",
 			"transducers"
diff --git a/examples/grid-iterators/src/index.ts b/examples/grid-iterators/src/index.ts
index e4f9b02b7b..ee1af7d7c1 100644
--- a/examples/grid-iterators/src/index.ts
+++ b/examples/grid-iterators/src/index.ts
@@ -1,3 +1,4 @@
+import { pixelCanvas2d } from "@thi.ng/canvas";
 import { hueRgb, srgbCss } from "@thi.ng/color";
 import {
 	diagonal2d,
@@ -13,12 +14,11 @@ import {
 	zigzagDiagonal2d,
 	zigzagRows2d,
 } from "@thi.ng/grid-iterators";
-import { canvas2d } from "@thi.ng/pixel";
 import { concat, cycle } from "@thi.ng/transducers";
 
 const W = 256;
 const H = 256;
-const { canvas, ctx } = canvas2d(W, H, document.getElementById("app")!);
+const { canvas, ctx } = pixelCanvas2d(W, H, document.getElementById("app")!);
 
 const NB: any = 16;
 const BW = Math.ceil(W / NB);
diff --git a/examples/ifs-fractal/package.json b/examples/ifs-fractal/package.json
index 547f135633..a0819b1f83 100644
--- a/examples/ifs-fractal/package.json
+++ b/examples/ifs-fractal/package.json
@@ -16,6 +16,7 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/dl-asset": "workspace:^",
 		"@thi.ng/fibers": "workspace:^",
 		"@thi.ng/math": "workspace:^",
@@ -28,6 +29,7 @@
 	},
 	"thi.ng": {
 		"readme": [
+			"canvas",
 			"dl-asset",
 			"fibers",
 			"matrices",
diff --git a/examples/ifs-fractal/src/index.ts b/examples/ifs-fractal/src/index.ts
index 74d3520e3c..08fec75883 100644
--- a/examples/ifs-fractal/src/index.ts
+++ b/examples/ifs-fractal/src/index.ts
@@ -1,8 +1,9 @@
+import { canvas2d } from "@thi.ng/canvas";
 import { downloadCanvas } from "@thi.ng/dl-asset";
 import { fiber, timeSlice } from "@thi.ng/fibers";
 import { mix } from "@thi.ng/math";
 import { mulV23 } from "@thi.ng/matrices";
-import { FLOAT_GRAY, canvas2d, floatBuffer } from "@thi.ng/pixel";
+import { FLOAT_GRAY, floatBuffer } from "@thi.ng/pixel";
 import { weightedRandom } from "@thi.ng/random";
 
 // render config
diff --git a/examples/pixel-basics/package.json b/examples/pixel-basics/package.json
index 558cf535c3..13f7c244e8 100644
--- a/examples/pixel-basics/package.json
+++ b/examples/pixel-basics/package.json
@@ -12,6 +12,7 @@
 		"preview": "vite preview --host --open"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/pixel": "workspace:^",
 		"@thi.ng/porter-duff": "workspace:^"
 	},
diff --git a/examples/pixel-basics/src/index.ts b/examples/pixel-basics/src/index.ts
index 6a5000130e..60d5aebe72 100644
--- a/examples/pixel-basics/src/index.ts
+++ b/examples/pixel-basics/src/index.ts
@@ -1,57 +1,57 @@
+import { pixelCanvas2d } from "@thi.ng/canvas";
 import {
-	canvas2d,
 	GRAY8,
 	GRAY_ALPHA8,
+	RGB565,
 	imageFromURL,
 	intBufferFromImage,
-	RGB565,
 } from "@thi.ng/pixel";
 import { SRC_OVER_I } from "@thi.ng/porter-duff";
 import IMG from "./haystack.jpg";
 import LOGO from "./logo-64.png";
 
-Promise.all([IMG, LOGO].map((x) => imageFromURL(x))).then(([img, logo]) => {
-	// init 16bit int RGB pixel buffer from image (resized to 256x256)
-	const buf = intBufferFromImage(img, RGB565, 256, 256);
-
-	// create grayscale buffer for logo and use Porter-Duff operator to
-	// composite with main image. Since the logo has transparency, we
-	// need to premultiply alpha first...
-	intBufferFromImage(logo, GRAY_ALPHA8).premultiply().blend(SRC_OVER_I, buf, {
-		dx: 10,
-		dy: 10,
-	});
-
-	// extract sub-image
-	// (method returns undefined if result region is < 1 pixel)
-	const region = buf.getRegion(32, 96, 128, 64)!;
-	// copy region back at new position
-	region.blit(buf, { dx: 96, dy: 32 });
-
-	// or alternatively blit buf into itself
-	// buf.blit(buf, { dx: 96, dy: 32, sx: 32, sy: 96, w: 128, h: 64 });
-
-	// create html canvas
-	// (returns obj of canvas & 2d context)
-	const ctx = canvas2d(buf.width, buf.height * 3);
-
-	// write pixel buffer to canvas
-	buf.blitCanvas(ctx.canvas);
-
-	// manipulate single color channel
-	const id = 0;
-	const ch = buf.getChannel(id).invert();
-	for (let y = 0; y < ch.height; y += 2) {
-		for (let x = (y >> 1) & 1; x < ch.width; x += 2) {
-			ch.setAt(x, y, 0xff);
-		}
-	}
-	// replace original channel
-	buf.setChannel(id, ch);
-	// write pixel buffer to new position
-	buf.blitCanvas(ctx.canvas, { y: buf.height });
-	// create & write grayscale version
-	buf.as(GRAY8).blitCanvas(ctx.canvas, { y: buf.height * 2 });
-
-	document.body.appendChild(ctx.canvas);
+const [img, logo] = await Promise.all([IMG, LOGO].map((x) => imageFromURL(x)));
+
+// init 16bit int RGB pixel buffer from image (resized to 256x256)
+const buf = intBufferFromImage(img, RGB565, 256, 256);
+
+// create grayscale buffer for logo and use Porter-Duff operator to
+// composite with main image. Since the logo has transparency, we
+// need to premultiply alpha first...
+intBufferFromImage(logo, GRAY_ALPHA8).premultiply().blend(SRC_OVER_I, buf, {
+	dx: 10,
+	dy: 10,
 });
+
+// extract sub-image
+// (method returns undefined if result region is < 1 pixel)
+const region = buf.getRegion(32, 96, 128, 64)!;
+// copy region back at new position
+region.blit(buf, { dx: 96, dy: 32 });
+
+// or alternatively blit buf into itself
+// buf.blit(buf, { dx: 96, dy: 32, sx: 32, sy: 96, w: 128, h: 64 });
+
+// create html canvas
+// (returns obj of canvas & 2d context)
+const ctx = pixelCanvas2d(buf.width, buf.height * 3);
+
+// write pixel buffer to canvas
+buf.blitCanvas(ctx.canvas);
+
+// manipulate single color channel
+const id = 0;
+const ch = buf.getChannel(id).invert();
+for (let y = 0; y < ch.height; y += 2) {
+	for (let x = (y >> 1) & 1; x < ch.width; x += 2) {
+		ch.setAt(x, y, 0xff);
+	}
+}
+// replace original channel
+buf.setChannel(id, ch);
+// write pixel buffer to new position
+buf.blitCanvas(ctx.canvas, { y: buf.height });
+// create & write grayscale version
+buf.as(GRAY8).blitCanvas(ctx.canvas, { y: buf.height * 2 });
+
+document.body.appendChild(ctx.canvas);
diff --git a/examples/pixel-dither/package.json b/examples/pixel-dither/package.json
index 9949456c63..db48798cc3 100644
--- a/examples/pixel-dither/package.json
+++ b/examples/pixel-dither/package.json
@@ -17,6 +17,7 @@
 	},
 	"dependencies": {
 		"@thi.ng/api": "workspace:^",
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/pixel": "workspace:^",
 		"@thi.ng/pixel-dither": "workspace:^"
 	},
@@ -27,6 +28,7 @@
 	},
 	"thi.ng": {
 		"readme": [
+			"canvas",
 			"pixel",
 			"pixel-dither"
 		],
diff --git a/examples/pixel-dither/src/index.ts b/examples/pixel-dither/src/index.ts
index 404c60867b..11cd96be2f 100644
--- a/examples/pixel-dither/src/index.ts
+++ b/examples/pixel-dither/src/index.ts
@@ -1,9 +1,9 @@
 import type { IObjectOf } from "@thi.ng/api";
+import { pixelCanvas2d } from "@thi.ng/canvas";
 import {
-	canvas2d,
 	GRAY8,
-	imageFromURL,
 	IntBuffer,
+	imageFromURL,
 	intBufferFromImage,
 } from "@thi.ng/pixel";
 import {
@@ -12,49 +12,47 @@ import {
 	DIFFUSION_2D,
 	DIFFUSION_COLUMN,
 	DIFFUSION_ROW,
-	ditherWith,
 	FLOYD_STEINBERG,
 	JARVIS_JUDICE_NINKE,
 	SIERRA2,
 	STUCKI,
 	THRESHOLD,
+	ditherWith,
 	type DitherKernel,
 } from "@thi.ng/pixel-dither";
 import IMG from "./michelangelo.png";
 
-(async () => {
-	const img = await imageFromURL(IMG);
+const img = await imageFromURL(IMG);
 
-	const root = document.getElementById("app")!;
-	root.appendChild(img);
+const root = document.getElementById("app")!;
+root.appendChild(img);
 
-	const processImage = (buf: IntBuffer, id: string, kernel: DitherKernel) => {
-		const { canvas, ctx } = canvas2d(buf.width, buf.height, root);
-		ditherWith(kernel, buf.copy()).blitCanvas(canvas);
-		ctx.fillStyle = "white";
-		ctx.fillRect(0, buf.height - 12, ctx.measureText(id).width + 8, 12);
-		ctx.fillStyle = "red";
-		ctx.fillText(id, 4, buf.height - 2);
-	};
+const processImage = (buf: IntBuffer, id: string, kernel: DitherKernel) => {
+	const { canvas, ctx } = pixelCanvas2d(buf.width, buf.height, root);
+	ditherWith(kernel, buf.copy()).blitCanvas(canvas);
+	ctx.fillStyle = "white";
+	ctx.fillRect(0, buf.height - 12, ctx.measureText(id).width + 8, 12);
+	ctx.fillStyle = "red";
+	ctx.fillText(id, 4, buf.height - 2);
+};
 
-	const buf = intBufferFromImage(img, GRAY8);
+const buf = intBufferFromImage(img, GRAY8);
 
-	Object.entries(<IObjectOf<DitherKernel>>{
-		ATKINSON: ATKINSON,
-		BURKES: BURKES,
-		DIFFUSION_ROW: DIFFUSION_ROW,
-		DIFFUSION_COLUMN: DIFFUSION_COLUMN,
-		DIFFUSION_2D: DIFFUSION_2D,
-		FLOYD_STEINBERG: FLOYD_STEINBERG,
-		JARVIS_JUDICE_NINKE: JARVIS_JUDICE_NINKE,
-		SIERRA2: SIERRA2,
-		STUCKI: STUCKI,
-		THRESHOLD: THRESHOLD,
-		CUSTOM: {
-			ox: [1],
-			oy: [1],
-			weights: [1],
-			shift: 1,
-		},
-	}).forEach(([id, k]) => processImage(buf, id, k));
-})();
+Object.entries(<IObjectOf<DitherKernel>>{
+	ATKINSON: ATKINSON,
+	BURKES: BURKES,
+	DIFFUSION_ROW: DIFFUSION_ROW,
+	DIFFUSION_COLUMN: DIFFUSION_COLUMN,
+	DIFFUSION_2D: DIFFUSION_2D,
+	FLOYD_STEINBERG: FLOYD_STEINBERG,
+	JARVIS_JUDICE_NINKE: JARVIS_JUDICE_NINKE,
+	SIERRA2: SIERRA2,
+	STUCKI: STUCKI,
+	THRESHOLD: THRESHOLD,
+	CUSTOM: {
+		ox: [1],
+		oy: [1],
+		weights: [1],
+		shift: 1,
+	},
+}).forEach(([id, k]) => processImage(buf, id, k));
diff --git a/examples/pixel-indexed/package.json b/examples/pixel-indexed/package.json
index 18fa8e7749..63e93f340d 100644
--- a/examples/pixel-indexed/package.json
+++ b/examples/pixel-indexed/package.json
@@ -16,6 +16,7 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/color-palettes": "workspace:^",
 		"@thi.ng/pixel": "workspace:^",
 		"@thi.ng/pixel-dither": "workspace:^"
@@ -27,6 +28,7 @@
 	},
 	"thi.ng": {
 		"readme": [
+			"canvas",
 			"color",
 			"color-palettes",
 			"k-means",
diff --git a/examples/pixel-indexed/src/index.ts b/examples/pixel-indexed/src/index.ts
index 675511e08a..2a5003a0f6 100644
--- a/examples/pixel-indexed/src/index.ts
+++ b/examples/pixel-indexed/src/index.ts
@@ -1,10 +1,10 @@
-import { asInt, NUM_THEMES } from "@thi.ng/color-palettes";
+import { pixelCanvas2d } from "@thi.ng/canvas";
+import { NUM_THEMES, asInt } from "@thi.ng/color-palettes";
 import {
 	ARGB8888,
-	canvas2d,
+	IntBuffer,
 	defIndexed,
 	imageFromURL,
-	IntBuffer,
 	intBufferFromImage,
 	range,
 } from "@thi.ng/pixel";
@@ -13,35 +13,33 @@ import IMG from "./test.jpg";
 
 const ORDERED = false;
 
-(async () => {
-	const img = await imageFromURL(IMG);
+const img = await imageFromURL(IMG);
 
-	const root = document.getElementById("app")!;
-	root.appendChild(img);
+const root = document.getElementById("app")!;
+root.appendChild(img);
 
-	const processImage = (buf: IntBuffer, id: number) => {
-		const { canvas, ctx } = canvas2d(buf.width, buf.height, root);
-		const theme = asInt(id);
-		const dithered = ORDERED
-			? orderedDither(buf.copy(), 8, 3)
-			: ditherWith(ATKINSON, buf.copy(), {});
-		dithered.as(defIndexed(theme)).blitCanvas(canvas);
-		ctx.font = "14px sans-serif";
-		ctx.fillText("theme: " + id, 10, 20);
-	};
+const processImage = (buf: IntBuffer, id: number) => {
+	const { canvas, ctx } = pixelCanvas2d(buf.width, buf.height, root);
+	const theme = asInt(id);
+	const dithered = ORDERED
+		? orderedDither(buf.copy(), 8, 3)
+		: ditherWith(ATKINSON, buf.copy(), {});
+	dithered.as(defIndexed(theme)).blitCanvas(canvas);
+	ctx.font = "14px sans-serif";
+	ctx.fillText("theme: " + id, 10, 20);
+};
 
-	// dither image and convert to indexed color using given palette
-	const buf = intBufferFromImage(img, ARGB8888).scale(0.5, "cubic");
+// dither image and convert to indexed color using given palette
+const buf = intBufferFromImage(img, ARGB8888).scale(0.5, "cubic");
 
-	// another version using a preset palette
-	// see https://github.com/thi-ng/umbrella/tree/develop/packages/color-palettes#all-themes
-	const themes = range(NUM_THEMES);
-	const addImage = () => {
-		const next = themes.next();
-		if (next.value !== undefined) {
-			processImage(buf, next.value);
-			setTimeout(addImage, 16);
-		}
-	};
-	addImage();
-})();
+// another version using a preset palette
+// see https://github.com/thi-ng/umbrella/tree/develop/packages/color-palettes#all-themes
+const themes = range(NUM_THEMES);
+const addImage = () => {
+	const next = themes.next();
+	if (next.value !== undefined) {
+		processImage(buf, next.value);
+		setTimeout(addImage, 16);
+	}
+};
+addImage();
diff --git a/examples/pixel-normal-map/package.json b/examples/pixel-normal-map/package.json
index e8aeab2571..1b02a69cfe 100644
--- a/examples/pixel-normal-map/package.json
+++ b/examples/pixel-normal-map/package.json
@@ -16,6 +16,7 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/pixel": "workspace:^"
 	},
 	"browser": {
diff --git a/examples/pixel-normal-map/src/index.ts b/examples/pixel-normal-map/src/index.ts
index 9ba715a87f..69396c9d1a 100644
--- a/examples/pixel-normal-map/src/index.ts
+++ b/examples/pixel-normal-map/src/index.ts
@@ -1,27 +1,25 @@
+import { pixelCanvas2d } from "@thi.ng/canvas";
 import {
 	FLOAT_GRAY,
-	canvas2d,
 	floatBufferFromImage,
 	imageFromURL,
 	normalMap,
 } from "@thi.ng/pixel";
 import TEX from "./tex.png";
 
-(async () => {
-	// load texture image
-	const img = await imageFromURL(TEX);
-	document.body.appendChild(img);
-	// convert image to grayscale float buffer
-	const buf = floatBufferFromImage(img, FLOAT_GRAY);
-	// compute normalmap w/ given options
-	const nmap = normalMap(buf, { scale: 8, step: 2 });
-	// create canvas and convert/copy normal map into it
-	nmap.blitCanvas(canvas2d(img.width, img.height, document.body).canvas);
-	// another normal map with sign of `scale` flipped to "invert" normal direction
-	const nmap2 = normalMap(buf, { scale: -8, step: 2 });
-	nmap2.blitCanvas(canvas2d(img.width, img.height, document.body).canvas);
+// load texture image
+const img = await imageFromURL(TEX);
+document.body.appendChild(img);
+// convert image to grayscale float buffer
+const buf = floatBufferFromImage(img, FLOAT_GRAY);
+// compute normalmap w/ given options
+const nmap = normalMap(buf, { scale: 8, step: 2 });
+// create canvas and convert/copy normal map into it
+nmap.blitCanvas(pixelCanvas2d(img.width, img.height, document.body).canvas);
+// another normal map with sign of `scale` flipped to "invert" normal direction
+const nmap2 = normalMap(buf, { scale: -8, step: 2 });
+nmap2.blitCanvas(pixelCanvas2d(img.width, img.height, document.body).canvas);
 
-	// if a result canvas isn't needed, converting to JS native ImageData
-	// might be sufficient (e.g. for WebGL textures):
-	// const idata = nmap.toImageData()
-})();
+// if a result canvas isn't needed, converting to JS native ImageData
+// might be sufficient (e.g. for WebGL textures):
+// const idata = nmap.toImageData()
diff --git a/examples/pixel-waveform/package.json b/examples/pixel-waveform/package.json
index 91a15f3788..c3ff35fe2f 100644
--- a/examples/pixel-waveform/package.json
+++ b/examples/pixel-waveform/package.json
@@ -16,6 +16,7 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/hiccup-html": "workspace:^",
 		"@thi.ng/mime": "workspace:^",
 		"@thi.ng/pixel": "workspace:^",
diff --git a/examples/pixel-waveform/src/index.ts b/examples/pixel-waveform/src/index.ts
index 7bf3ad4bf7..998983de4d 100644
--- a/examples/pixel-waveform/src/index.ts
+++ b/examples/pixel-waveform/src/index.ts
@@ -1,10 +1,10 @@
+import { pixelCanvas2d } from "@thi.ng/canvas";
 import { div, h3, inputFile } from "@thi.ng/hiccup-html";
 import { MIME_IMAGE_COMMON } from "@thi.ng/mime/presets";
 import {
 	FLOAT_RGB,
 	IntBuffer,
 	Lane,
-	canvas2d,
 	floatBuffer,
 	imageFromFile,
 	intBufferFromImage,
@@ -72,7 +72,7 @@ file.subscribe({
 			}
 		}
 		// create canvas and copy in waveform
-		const { canvas } = canvas2d(wav.width, wav.height);
+		const { canvas } = pixelCanvas2d(wav.width, wav.height);
 		wav.blitCanvas(canvas);
 		// update UI with new elements
 		result.next(
diff --git a/examples/porter-duff/package.json b/examples/porter-duff/package.json
index 1750d81871..fdbd582aa0 100644
--- a/examples/porter-duff/package.json
+++ b/examples/porter-duff/package.json
@@ -12,6 +12,7 @@
 		"preview": "vite preview --host --open"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/pixel": "workspace:^",
 		"@thi.ng/porter-duff": "workspace:^"
 	},
diff --git a/examples/porter-duff/src/index.ts b/examples/porter-duff/src/index.ts
index 0ad6a1f9e6..1eaa86c518 100644
--- a/examples/porter-duff/src/index.ts
+++ b/examples/porter-duff/src/index.ts
@@ -1,6 +1,6 @@
+import { pixelCanvas2d } from "@thi.ng/canvas";
 import {
 	ABGR8888,
-	canvas2d,
 	imageFromURL,
 	intBufferFromCanvas,
 	intBufferFromImage,
@@ -44,10 +44,13 @@ Promise.all([IMG, IMG2].map((x) => imageFromURL(x)))
 		const srcBuf = intBufferFromImage(circle, ABGR8888).premultiply();
 		const destBuf = intBufferFromImage(plus, ABGR8888).premultiply();
 
-		const ctx = canvas2d(destBuf.width * 4, (destBuf.height + 20) * 3);
-		document.getElementById("app")!.appendChild(ctx.canvas);
+		const { canvas, ctx } = pixelCanvas2d(
+			destBuf.width * 4,
+			(destBuf.height + 20) * 3,
+			document.getElementById("app")!
+		);
 
-		const res = intBufferFromCanvas(ctx.canvas);
+		const res = intBufferFromCanvas(canvas);
 
 		for (let y = 0, i = 0; y < 3; y++) {
 			for (let x = 0; x < 4; x++, i++) {
@@ -59,15 +62,15 @@ Promise.all([IMG, IMG2].map((x) => imageFromURL(x)))
 		}
 
 		res.postmultiply();
-		res.blitCanvas(ctx.canvas);
+		res.blitCanvas(canvas);
 
-		ctx.ctx.fillStyle = "black";
-		ctx.ctx.font = "12px Arial";
-		ctx.ctx.textAlign = "center";
+		ctx.fillStyle = "black";
+		ctx.font = "12px Arial";
+		ctx.textAlign = "center";
 
 		for (let y = 0, i = 0; y < 3; y++) {
 			for (let x = 0; x < 4; x++, i++) {
-				ctx.ctx.fillText(
+				ctx.fillText(
 					IDS[i],
 					(x + 0.5) * destBuf.width,
 					(y + 1) * (destBuf.height + 20) - 6
diff --git a/examples/rasterize-blend/package.json b/examples/rasterize-blend/package.json
index 47b2f34454..0905aa934b 100644
--- a/examples/rasterize-blend/package.json
+++ b/examples/rasterize-blend/package.json
@@ -16,8 +16,8 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "workspace:^",
 		"@thi.ng/api": "workspace:^",
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/dsp": "workspace:^",
 		"@thi.ng/pixel": "workspace:^",
 		"@thi.ng/rasterize": "workspace:^",
@@ -28,7 +28,7 @@
 	},
 	"thi.ng": {
 		"readme": [
-			"adapt-dpi",
+			"canvas",
 			"dsp",
 			"pixel",
 			"rasterize",
diff --git a/examples/rasterize-blend/src/index.ts b/examples/rasterize-blend/src/index.ts
index 8d1f9e8a99..aa46732c0f 100644
--- a/examples/rasterize-blend/src/index.ts
+++ b/examples/rasterize-blend/src/index.ts
@@ -1,7 +1,7 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
 import type { NumericArray } from "@thi.ng/api";
+import { adaptiveCanvas2d } from "@thi.ng/canvas";
 import { osc, sin } from "@thi.ng/dsp";
-import { canvas2d, floatBufferFromCanvas } from "@thi.ng/pixel";
+import { floatBufferFromCanvas } from "@thi.ng/pixel";
 import {
 	defBlendF,
 	drawCircle,
@@ -11,8 +11,7 @@ import {
 import { Agent } from "./agent.js";
 
 // create canvas and adapt to screen's DPR
-const { canvas } = canvas2d(640, 640, document.body);
-adaptDPI(canvas, canvas.width, canvas.height);
+const { canvas } = adaptiveCanvas2d(640, 640, document.body);
 // pre-create image data
 const data = new ImageData(canvas.width, canvas.height);
 // create RGBA floating point pixel buffer for drawing
diff --git a/examples/soa-ecs/package.json b/examples/soa-ecs/package.json
index f52f36fc31..dfb29eac81 100644
--- a/examples/soa-ecs/package.json
+++ b/examples/soa-ecs/package.json
@@ -12,7 +12,7 @@
 		"preview": "vite preview --host --open"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "workspace:^",
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/ecs": "workspace:^",
 		"@thi.ng/hdom": "workspace:^",
 		"@thi.ng/hdom-components": "workspace:^",
@@ -29,7 +29,7 @@
 	},
 	"thi.ng": {
 		"readme": [
-			"adapt-dpi",
+			"canvas",
 			"ecs",
 			"hdom",
 			"matrices",
diff --git a/examples/soa-ecs/src/index.ts b/examples/soa-ecs/src/index.ts
index 63fb4ad01a..1e86b68150 100644
--- a/examples/soa-ecs/src/index.ts
+++ b/examples/soa-ecs/src/index.ts
@@ -1,4 +1,4 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { adaptDPI } from "@thi.ng/canvas";
 import { ECS, type GroupInfo, type GroupTuple } from "@thi.ng/ecs";
 import { start } from "@thi.ng/hdom";
 import { canvasWebGL } from "@thi.ng/hdom-components";
diff --git a/examples/unbiased-normals/package.json b/examples/unbiased-normals/package.json
index 5efbaf567c..fc422cf7c1 100644
--- a/examples/unbiased-normals/package.json
+++ b/examples/unbiased-normals/package.json
@@ -16,6 +16,7 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/dsp": "workspace:^",
 		"@thi.ng/matrices": "workspace:^",
 		"@thi.ng/pixel": "workspace:^",
@@ -27,6 +28,7 @@
 	},
 	"thi.ng": {
 		"readme": [
+			"canvas",
 			"matrices",
 			"pixel",
 			"vectors"
diff --git a/examples/unbiased-normals/src/index.ts b/examples/unbiased-normals/src/index.ts
index 9a164d8538..0ed964087e 100644
--- a/examples/unbiased-normals/src/index.ts
+++ b/examples/unbiased-normals/src/index.ts
@@ -1,3 +1,4 @@
+import { pixelCanvas2d } from "@thi.ng/canvas";
 import { sin } from "@thi.ng/dsp";
 import {
 	concat,
@@ -9,7 +10,7 @@ import {
 	viewport,
 	type Mat,
 } from "@thi.ng/matrices";
-import { GRAY8, IntBuffer, canvas2d, intBufferFromCanvas } from "@thi.ng/pixel";
+import { GRAY8, IntBuffer, intBufferFromCanvas } from "@thi.ng/pixel";
 import { repeatedly } from "@thi.ng/transducers";
 import {
 	add3,
@@ -19,7 +20,7 @@ import {
 } from "@thi.ng/vectors";
 
 // create canvas & pixel buffer
-const { canvas, ctx } = canvas2d(960, 540, document.body);
+const { canvas, ctx } = pixelCanvas2d(960, 540, document.body);
 ctx.font = "18px Arial";
 ctx.fillStyle = "yellow";
 
diff --git a/examples/webgl-cubemap/package.json b/examples/webgl-cubemap/package.json
index 48bf12e751..013324ba09 100644
--- a/examples/webgl-cubemap/package.json
+++ b/examples/webgl-cubemap/package.json
@@ -12,7 +12,7 @@
 		"preview": "vite preview --host --open"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "workspace:^",
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/dsp": "workspace:^",
 		"@thi.ng/hdom": "workspace:^",
 		"@thi.ng/hdom-components": "workspace:^",
@@ -29,7 +29,7 @@
 	},
 	"thi.ng": {
 		"readme": [
-			"adapt-dpi",
+			"canvas",
 			"dsp",
 			"hdom-components",
 			"matrices",
diff --git a/examples/webgl-cubemap/src/index.ts b/examples/webgl-cubemap/src/index.ts
index 5ce40e7787..17cc76a608 100644
--- a/examples/webgl-cubemap/src/index.ts
+++ b/examples/webgl-cubemap/src/index.ts
@@ -1,4 +1,4 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { adaptDPI } from "@thi.ng/canvas";
 import { sin } from "@thi.ng/dsp";
 import { start } from "@thi.ng/hdom";
 import { canvasWebGL, dropdown } from "@thi.ng/hdom-components";
diff --git a/examples/webgl-grid/package.json b/examples/webgl-grid/package.json
index ac5ce1dc7d..db3828fbc7 100644
--- a/examples/webgl-grid/package.json
+++ b/examples/webgl-grid/package.json
@@ -16,7 +16,7 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "workspace:^",
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/hdom": "workspace:^",
 		"@thi.ng/hdom-components": "workspace:^",
 		"@thi.ng/math": "workspace:^",
@@ -32,7 +32,7 @@
 	},
 	"thi.ng": {
 		"readme": [
-			"adapt-dpi",
+			"canvas",
 			"matrices",
 			"shader-ast",
 			"transducers",
diff --git a/examples/webgl-grid/src/index.ts b/examples/webgl-grid/src/index.ts
index 3a4d348ce5..a495b02bc0 100644
--- a/examples/webgl-grid/src/index.ts
+++ b/examples/webgl-grid/src/index.ts
@@ -1,4 +1,4 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { adaptDPI } from "@thi.ng/canvas";
 import { start } from "@thi.ng/hdom";
 import { canvasWebGL } from "@thi.ng/hdom-components";
 import { PI } from "@thi.ng/math";
diff --git a/examples/webgl-msdf/package.json b/examples/webgl-msdf/package.json
index b66f5107b2..0ed3ad291e 100644
--- a/examples/webgl-msdf/package.json
+++ b/examples/webgl-msdf/package.json
@@ -16,7 +16,7 @@
 		"vite": "^5.0.4"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "workspace:^",
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/hdom": "workspace:^",
 		"@thi.ng/hdom-components": "workspace:^",
 		"@thi.ng/math": "workspace:^",
@@ -37,7 +37,7 @@
 	},
 	"thi.ng": {
 		"readme": [
-			"adapt-dpi",
+			"canvas",
 			"matrices",
 			"shader-ast",
 			"transducers",
diff --git a/examples/webgl-msdf/src/index.ts b/examples/webgl-msdf/src/index.ts
index 555c5582cf..3c3dddd5e5 100644
--- a/examples/webgl-msdf/src/index.ts
+++ b/examples/webgl-msdf/src/index.ts
@@ -1,4 +1,4 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { adaptDPI } from "@thi.ng/canvas";
 import { start } from "@thi.ng/hdom";
 import { canvasWebGL } from "@thi.ng/hdom-components";
 import { fitClamped } from "@thi.ng/math";
diff --git a/examples/webgl-multipass/package.json b/examples/webgl-multipass/package.json
index 632a322271..1b1916f0a2 100644
--- a/examples/webgl-multipass/package.json
+++ b/examples/webgl-multipass/package.json
@@ -12,6 +12,7 @@
 		"preview": "vite preview --host --open"
 	},
 	"dependencies": {
+		"@thi.ng/canvas": "workspace:^",
 		"@thi.ng/pixel": "workspace:^",
 		"@thi.ng/shader-ast": "workspace:^",
 		"@thi.ng/shader-ast-stdlib": "workspace:^",
diff --git a/examples/webgl-multipass/src/index.ts b/examples/webgl-multipass/src/index.ts
index 00f91607e5..22a2072861 100644
--- a/examples/webgl-multipass/src/index.ts
+++ b/examples/webgl-multipass/src/index.ts
@@ -1,4 +1,5 @@
-import { FLOAT_GRAY, canvas2d, floatBuffer } from "@thi.ng/pixel";
+import { pixelCanvas2d } from "@thi.ng/canvas";
+import { FLOAT_GRAY, floatBuffer } from "@thi.ng/pixel";
 import {
 	$x,
 	$xyz,
@@ -107,7 +108,7 @@ const toy = defMultiPass({
 
 toy.update(0);
 
-const canv = canvas2d(32, 32, document.body);
+const canv = pixelCanvas2d(32, 32, document.body);
 floatBuffer(
 	32,
 	32,
diff --git a/packages/hdom-components/package.json b/packages/hdom-components/package.json
index 15c8ead49a..dab062dd4e 100644
--- a/packages/hdom-components/package.json
+++ b/packages/hdom-components/package.json
@@ -35,8 +35,8 @@
 		"test": "bun test"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "^2.2.28",
 		"@thi.ng/api": "^8.9.13",
+		"@thi.ng/canvas": "^0.0.1",
 		"@thi.ng/checks": "^3.4.13",
 		"@thi.ng/math": "^5.7.8",
 		"@thi.ng/transducers": "^8.8.16",
diff --git a/packages/hdom-components/src/canvas.ts b/packages/hdom-components/src/canvas.ts
index 13108517a8..8b6491b216 100644
--- a/packages/hdom-components/src/canvas.ts
+++ b/packages/hdom-components/src/canvas.ts
@@ -1,4 +1,4 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { adaptDPI } from "@thi.ng/canvas";
 
 export type CanvasContext =
 	| CanvasRenderingContext2D
diff --git a/packages/rdom-canvas/package.json b/packages/rdom-canvas/package.json
index 09ee0f22f0..6fbbc30fe2 100644
--- a/packages/rdom-canvas/package.json
+++ b/packages/rdom-canvas/package.json
@@ -35,9 +35,9 @@
 		"test": "bun test"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "^2.2.28",
 		"@thi.ng/api": "^8.9.13",
 		"@thi.ng/associative": "^6.3.25",
+		"@thi.ng/canvas": "^0.0.1",
 		"@thi.ng/checks": "^3.4.13",
 		"@thi.ng/hiccup-canvas": "^2.5.0",
 		"@thi.ng/rdom": "^0.13.5",
diff --git a/packages/rdom-canvas/src/index.ts b/packages/rdom-canvas/src/index.ts
index 44e4e3797c..bb3402be20 100644
--- a/packages/rdom-canvas/src/index.ts
+++ b/packages/rdom-canvas/src/index.ts
@@ -1,6 +1,6 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
 import type { Fn, Fn2, Fn3, IToHiccup } from "@thi.ng/api";
 import { withoutKeysObj } from "@thi.ng/associative/without-keys";
+import { adaptDPI } from "@thi.ng/canvas";
 import { implementsFunction } from "@thi.ng/checks/implements-function";
 import { draw } from "@thi.ng/hiccup-canvas/draw";
 import type { IComponent, IMountWithState, NumOrElement } from "@thi.ng/rdom";
diff --git a/packages/wasm-api-dom/package.json b/packages/wasm-api-dom/package.json
index ecd6b96964..2ef42675ba 100644
--- a/packages/wasm-api-dom/package.json
+++ b/packages/wasm-api-dom/package.json
@@ -39,8 +39,8 @@
 		"test": "bun test"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "^2.2.28",
 		"@thi.ng/api": "^8.9.13",
+		"@thi.ng/canvas": "^0.0.1",
 		"@thi.ng/errors": "^2.4.7",
 		"@thi.ng/prefixes": "^2.2.9",
 		"@thi.ng/wasm-api": "^1.4.38"
diff --git a/packages/wasm-api-dom/src/api.ts b/packages/wasm-api-dom/src/api.ts
index 67b02aa70f..d665e11d48 100644
--- a/packages/wasm-api-dom/src/api.ts
+++ b/packages/wasm-api-dom/src/api.ts
@@ -72,7 +72,7 @@ export interface WasmDomImports extends WebAssembly.ModuleImports {
 	 * Resizes the canvas element for given `elementID` to provided size (in CSS
 	 * pixels). The given device pixel ratio `dpr` will be used to adjust the
 	 * actual number of physical pixels. See
-	 * [thi.ng/adapt-dpi](https://thi.ng/adapt-dpi) for reference.
+	 * [thi.ng/canvas](https://thi.ng/canvas) for reference.
 	 *
 	 * @param elementID
 	 * @param width
diff --git a/packages/wasm-api-dom/src/dom.ts b/packages/wasm-api-dom/src/dom.ts
index 4a84d3309f..2c04d409aa 100644
--- a/packages/wasm-api-dom/src/dom.ts
+++ b/packages/wasm-api-dom/src/dom.ts
@@ -1,5 +1,5 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
 import type { NumOrString } from "@thi.ng/api";
+import { adaptDPI } from "@thi.ng/canvas";
 import { assert } from "@thi.ng/errors/assert";
 import {
 	WasmStringSlice,
diff --git a/packages/webgl/package.json b/packages/webgl/package.json
index 95a09edb53..f02dee9bee 100644
--- a/packages/webgl/package.json
+++ b/packages/webgl/package.json
@@ -39,9 +39,9 @@
 		"test": "bun test"
 	},
 	"dependencies": {
-		"@thi.ng/adapt-dpi": "^2.2.28",
 		"@thi.ng/api": "^8.9.13",
 		"@thi.ng/associative": "^6.3.25",
+		"@thi.ng/canvas": "^0.0.1",
 		"@thi.ng/checks": "^3.4.13",
 		"@thi.ng/equiv": "^2.1.38",
 		"@thi.ng/errors": "^2.4.7",
diff --git a/packages/webgl/src/canvas.ts b/packages/webgl/src/canvas.ts
index a473acd1fe..7171eda225 100644
--- a/packages/webgl/src/canvas.ts
+++ b/packages/webgl/src/canvas.ts
@@ -1,4 +1,4 @@
-import { adaptDPI } from "@thi.ng/adapt-dpi";
+import { adaptDPI } from "@thi.ng/canvas";
 import { isString } from "@thi.ng/checks/is-string";
 import type { ReadonlyVec } from "@thi.ng/vectors";
 import type { WeblGLCanvasOpts } from "./api/canvas.js";
diff --git a/yarn.lock b/yarn.lock
index d2dd103d3a..d4fb118003 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -447,7 +447,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/canvas-recorder@workspace:examples/canvas-recorder"
   dependencies:
-    "@thi.ng/adapt-dpi": "workspace:^"
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/dl-asset": "workspace:^"
     "@thi.ng/geom": "workspace:^"
     "@thi.ng/hiccup-canvas": "workspace:^"
@@ -662,7 +662,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/geom-fuzz-basics@workspace:examples/geom-fuzz-basics"
   dependencies:
-    "@thi.ng/adapt-dpi": "workspace:^"
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/geom": "workspace:^"
     "@thi.ng/geom-fuzz": "workspace:^"
     "@thi.ng/hiccup-canvas": "workspace:^"
@@ -801,9 +801,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/grid-iterators@workspace:examples/grid-iterators"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/color": "workspace:^"
     "@thi.ng/grid-iterators": "workspace:^"
-    "@thi.ng/pixel": "workspace:^"
     "@thi.ng/transducers": "workspace:^"
     typescript: ^5.3.2
     vite: ^5.0.4
@@ -1083,6 +1083,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@example/hiccup-canvas-basics@workspace:examples/hiccup-canvas-basics":
+  version: 0.0.0-use.local
+  resolution: "@example/hiccup-canvas-basics@workspace:examples/hiccup-canvas-basics"
+  dependencies:
+    typescript: ^5.3.2
+    vite: ^5.0.4
+  languageName: unknown
+  linkType: soft
+
 "@example/hiccup-css-image-transition@workspace:examples/hiccup-css-image-transition":
   version: 0.0.0-use.local
   resolution: "@example/hiccup-css-image-transition@workspace:examples/hiccup-css-image-transition"
@@ -1115,6 +1124,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/ifs-fractal@workspace:examples/ifs-fractal"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/dl-asset": "workspace:^"
     "@thi.ng/fibers": "workspace:^"
     "@thi.ng/math": "workspace:^"
@@ -1407,6 +1417,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/pixel-basics@workspace:examples/pixel-basics"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
     "@thi.ng/porter-duff": "workspace:^"
     typescript: ^5.3.2
@@ -1436,6 +1447,7 @@ __metadata:
   resolution: "@example/pixel-dither@workspace:examples/pixel-dither"
   dependencies:
     "@thi.ng/api": "workspace:^"
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
     "@thi.ng/pixel-dither": "workspace:^"
     typescript: ^5.3.2
@@ -1466,6 +1478,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/pixel-indexed@workspace:examples/pixel-indexed"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/color-palettes": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
     "@thi.ng/pixel-dither": "workspace:^"
@@ -1478,6 +1491,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/pixel-normal-map@workspace:examples/pixel-normal-map"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
     typescript: ^5.3.2
     vite: ^5.0.4
@@ -1508,6 +1522,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/pixel-waveform@workspace:examples/pixel-waveform"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/hiccup-html": "workspace:^"
     "@thi.ng/mime": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
@@ -1609,6 +1624,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/porter-duff@workspace:examples/porter-duff"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
     "@thi.ng/porter-duff": "workspace:^"
     typescript: ^5.3.2
@@ -1671,8 +1687,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/rasterize-blend@workspace:examples/rasterize-blend"
   dependencies:
-    "@thi.ng/adapt-dpi": "workspace:^"
     "@thi.ng/api": "workspace:^"
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/dsp": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
     "@thi.ng/rasterize": "workspace:^"
@@ -2209,7 +2225,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/soa-ecs@workspace:examples/soa-ecs"
   dependencies:
-    "@thi.ng/adapt-dpi": "workspace:^"
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/ecs": "workspace:^"
     "@thi.ng/hdom": "workspace:^"
     "@thi.ng/hdom-components": "workspace:^"
@@ -2454,6 +2470,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/unbiased-normals@workspace:examples/unbiased-normals"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/dsp": "workspace:^"
     "@thi.ng/matrices": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
@@ -2503,7 +2520,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/webgl-cubemap@workspace:examples/webgl-cubemap"
   dependencies:
-    "@thi.ng/adapt-dpi": "workspace:^"
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/dsp": "workspace:^"
     "@thi.ng/hdom": "workspace:^"
     "@thi.ng/hdom-components": "workspace:^"
@@ -2548,7 +2565,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/webgl-grid@workspace:examples/webgl-grid"
   dependencies:
-    "@thi.ng/adapt-dpi": "workspace:^"
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/hdom": "workspace:^"
     "@thi.ng/hdom-components": "workspace:^"
     "@thi.ng/math": "workspace:^"
@@ -2565,7 +2582,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/webgl-msdf@workspace:examples/webgl-msdf"
   dependencies:
-    "@thi.ng/adapt-dpi": "workspace:^"
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/hdom": "workspace:^"
     "@thi.ng/hdom-components": "workspace:^"
     "@thi.ng/math": "workspace:^"
@@ -2587,6 +2604,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@example/webgl-multipass@workspace:examples/webgl-multipass"
   dependencies:
+    "@thi.ng/canvas": "workspace:^"
     "@thi.ng/pixel": "workspace:^"
     "@thi.ng/shader-ast": "workspace:^"
     "@thi.ng/shader-ast-stdlib": "workspace:^"
@@ -3154,7 +3172,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@thi.ng/adapt-dpi@^2.2.28, @thi.ng/adapt-dpi@workspace:^, @thi.ng/adapt-dpi@workspace:packages/adapt-dpi":
+"@thi.ng/adapt-dpi@workspace:packages/adapt-dpi":
   version: 0.0.0-use.local
   resolution: "@thi.ng/adapt-dpi@workspace:packages/adapt-dpi"
   dependencies:
@@ -3416,6 +3434,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@thi.ng/canvas@^0.0.1, @thi.ng/canvas@workspace:^, @thi.ng/canvas@workspace:packages/canvas":
+  version: 0.0.0-use.local
+  resolution: "@thi.ng/canvas@workspace:packages/canvas"
+  dependencies:
+    "@microsoft/api-extractor": ^7.38.3
+    esbuild: ^0.19.8
+    rimraf: ^5.0.5
+    tools: "workspace:^"
+    typedoc: ^0.25.4
+    typescript: ^5.3.2
+  languageName: unknown
+  linkType: soft
+
 "@thi.ng/cellular@workspace:packages/cellular":
   version: 0.0.0-use.local
   resolution: "@thi.ng/cellular@workspace:packages/cellular"
@@ -4482,8 +4513,8 @@ __metadata:
   resolution: "@thi.ng/hdom-components@workspace:packages/hdom-components"
   dependencies:
     "@microsoft/api-extractor": ^7.38.3
-    "@thi.ng/adapt-dpi": ^2.2.28
     "@thi.ng/api": ^8.9.13
+    "@thi.ng/canvas": ^0.0.1
     "@thi.ng/checks": ^3.4.13
     "@thi.ng/math": ^5.7.8
     "@thi.ng/transducers": ^8.8.16
@@ -5163,6 +5194,7 @@ __metadata:
     "@microsoft/api-extractor": ^7.38.3
     "@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
@@ -5358,9 +5390,9 @@ __metadata:
   resolution: "@thi.ng/rdom-canvas@workspace:packages/rdom-canvas"
   dependencies:
     "@microsoft/api-extractor": ^7.38.3
-    "@thi.ng/adapt-dpi": ^2.2.28
     "@thi.ng/api": ^8.9.13
     "@thi.ng/associative": ^6.3.25
+    "@thi.ng/canvas": ^0.0.1
     "@thi.ng/checks": ^3.4.13
     "@thi.ng/hiccup-canvas": ^2.5.0
     "@thi.ng/rdom": ^0.13.5
@@ -6206,8 +6238,8 @@ __metadata:
   resolution: "@thi.ng/wasm-api-dom@workspace:packages/wasm-api-dom"
   dependencies:
     "@microsoft/api-extractor": ^7.38.3
-    "@thi.ng/adapt-dpi": ^2.2.28
     "@thi.ng/api": ^8.9.13
+    "@thi.ng/canvas": ^0.0.1
     "@thi.ng/errors": ^2.4.7
     "@thi.ng/prefixes": ^2.2.9
     "@thi.ng/wasm-api": ^1.4.38
@@ -6292,9 +6324,9 @@ __metadata:
   resolution: "@thi.ng/webgl@workspace:packages/webgl"
   dependencies:
     "@microsoft/api-extractor": ^7.38.3
-    "@thi.ng/adapt-dpi": ^2.2.28
     "@thi.ng/api": ^8.9.13
     "@thi.ng/associative": ^6.3.25
+    "@thi.ng/canvas": ^0.0.1
     "@thi.ng/checks": ^3.4.13
     "@thi.ng/equiv": ^2.1.38
     "@thi.ng/errors": ^2.4.7