q5 2.18.1 → 2.19.0

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.18
+ * @version 2.19
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -104,9 +104,9 @@ function Q5(scope, parent, renderer) {
 			throw e;
 		}
 		for (let m of Q5.methods.post) m.call($);
+		$.postProcess();
 		if ($._render) $._render();
 		if ($._finishRender) $._finishRender();
-		$.postProcess();
 		q.pmouseX = $.mouseX;
 		q.pmouseY = $.mouseY;
 		q.moveX = q.moveY = 0;
@@ -223,6 +223,8 @@ function Q5(scope, parent, renderer) {
 	$.postProcess ??= () => {};
 
 	let userFns = [
+		'setup',
+		'postProcess',
 		'mouseMoved',
 		'mousePressed',
 		'mouseReleased',
@@ -311,7 +313,7 @@ function createCanvas(w, h, opt) {
 	}
 }
 
-Q5.version = Q5.VERSION = '2.18';
+Q5.version = Q5.VERSION = '2.19';
 
 if (typeof document == 'object') {
 	document.addEventListener('DOMContentLoaded', () => {
@@ -420,49 +422,6 @@ Q5.modules.canvas = ($, q) => {
 		return g;
 	};
 
-	async function saveFile(data, name, ext) {
-		name = name || 'untitled';
-		ext = ext || 'png';
-		if (ext == 'jpg' || ext == 'png' || ext == 'webp') {
-			if (data instanceof OffscreenCanvas) {
-				const blob = await data.convertToBlob({ type: 'image/' + ext });
-				data = await new Promise((resolve) => {
-					const reader = new FileReader();
-					reader.onloadend = () => resolve(reader.result);
-					reader.readAsDataURL(blob);
-				});
-			} else {
-				data = data.toDataURL('image/' + ext);
-			}
-		} else {
-			let type = 'text/plain';
-			if (ext == 'json') {
-				if (typeof data != 'string') data = JSON.stringify(data);
-				type = 'text/json';
-			}
-			data = new Blob([data], { type });
-			data = URL.createObjectURL(data);
-		}
-		let a = document.createElement('a');
-		a.href = data;
-		a.download = name + '.' + ext;
-		a.click();
-		URL.revokeObjectURL(a.href);
-	}
-
-	$.save = (a, b, c) => {
-		if (!a || (typeof a == 'string' && (!b || (!c && b.length < 5)))) {
-			c = b;
-			b = a;
-			a = $.canvas;
-		}
-		if (c) return saveFile(a, b, c);
-		if (b) {
-			b = b.split('.');
-			saveFile(a, b[0], b.at(-1));
-		} else saveFile(a);
-	};
-
 	$._setCanvasSize = (w, h) => {
 		if (!w) h ??= window.innerHeight;
 		else h ??= w;
@@ -1322,10 +1281,7 @@ Q5.renderers.c2d.image = ($, q) => {
 		opt ??= {};
 		opt.alpha ??= true;
 		opt.colorSpace ??= $.canvas.colorSpace || Q5.canvasOptions.colorSpace;
-		let img = new Q5.Image(w, h, opt);
-		img.defaultWidth = w * $._defaultImageScale;
-		img.defaultHeight = h * $._defaultImageScale;
-		return img;
+		return new Q5.Image(w, h, opt);
 	};
 
 	$.loadImage = function (url, cb, opt) {
@@ -1481,7 +1437,7 @@ Q5.renderers.c2d.image = ($, q) => {
 		$.ctx.globalCompositeOperation = 'source-over';
 		$.ctx.drawImage($.canvas, 0, 0, $.canvas.w, $.canvas.h);
 		$.ctx.restore();
-		$._retint = true;
+		$.modified = $._retint = true;
 	};
 
 	if ($._scope == 'image') {
@@ -1499,7 +1455,7 @@ Q5.renderers.c2d.image = ($, q) => {
 			$.ctx.clearRect(0, 0, c.width, c.height);
 			$.ctx.drawImage(o, 0, 0, c.width, c.height);
 
-			$._retint = true;
+			$.modified = $._retint = true;
 		};
 	}
 
@@ -1546,17 +1502,25 @@ Q5.renderers.c2d.image = ($, q) => {
 		$.ctx.globalCompositeOperation = old;
 		$.ctx.restore();
 
-		$._retint = true;
+		$.modified = $._retint = true;
 	};
 
 	$.inset = (x, y, w, h, dx, dy, dw, dh) => {
 		let pd = $._pixelDensity || 1;
 		$.ctx.drawImage($.canvas, x * pd, y * pd, w * pd, h * pd, dx, dy, dw, dh);
 
-		$._retint = true;
+		$.modified = $._retint = true;
 	};
 
-	$.copy = () => $.get();
+	$.copy = () => {
+		let img = $.get();
+		for (let prop in $) {
+			if (typeof $[prop] != 'function' && !/(canvas|ctx|texture|textureIndex)/.test(prop)) {
+				img[prop] = $[prop];
+			}
+		}
+		return img;
+	};
 
 	$.get = (x, y, w, h) => {
 		let pd = $._pixelDensity || 1;
@@ -1566,22 +1530,19 @@ Q5.renderers.c2d.image = ($, q) => {
 		}
 		x = Math.floor(x || 0) * pd;
 		y = Math.floor(y || 0) * pd;
-		let _w = (w = w || $.width);
-		let _h = (h = h || $.height);
-		w *= pd;
-		h *= pd;
-		let img = $.createImage(w, h);
-		img.ctx.drawImage($.canvas, x, y, w, h, 0, 0, w, h);
-		img._pixelDensity = pd;
-		img.width = _w;
-		img.height = _h;
+		w ??= $.width;
+		h ??= $.height;
+		let img = $.createImage(w, h, { pixelDensity: pd });
+		img.ctx.drawImage($.canvas, x, y, w * pd, h * pd, 0, 0, w, h);
+		img.width = w;
+		img.height = h;
 		return img;
 	};
 
 	$.set = (x, y, c) => {
 		x = Math.floor(x);
 		y = Math.floor(y);
-		$._retint = true;
+		$.modified = $._retint = true;
 		if (c.canvas) {
 			let old = $._tint;
 			$._tint = null;
@@ -1609,7 +1570,7 @@ Q5.renderers.c2d.image = ($, q) => {
 	$.updatePixels = () => {
 		if (imgData != null) {
 			$.ctx.putImageData(imgData, 0, 0);
-			$._retint = true;
+			$.modified = $._retint = true;
 		}
 	};
 
@@ -1618,6 +1579,20 @@ Q5.renderers.c2d.image = ($, q) => {
 
 	if ($._scope == 'image') return;
 
+	$._saveCanvas = async (data, ext) => {
+		data = data.canvas || data;
+		if (data instanceof OffscreenCanvas) {
+			const blob = await data.convertToBlob({ type: 'image/' + ext });
+
+			return await new Promise((resolve) => {
+				const reader = new FileReader();
+				reader.onloadend = () => resolve(reader.result);
+				reader.readAsDataURL(blob);
+			});
+		}
+		return data.toDataURL('image/' + ext);
+	};
+
 	$.tint = function (c) {
 		$._tint = (c._q5Color ? c : $.color(...arguments)).toString();
 	};
@@ -1961,10 +1936,15 @@ Q5.renderers.c2d.text = ($, q) => {
 			tY = leading * lines.length;
 
 			if (!img) {
+				let ogBaseline = $.ctx.textBaseline;
+				$.ctx.textBaseline = 'alphabetic';
+
 				let measure = ctx.measureText(' ');
 				let ascent = measure.fontBoundingBoxAscent;
 				let descent = measure.fontBoundingBoxDescent;
 
+				$.ctx.textBaseline = ogBaseline;
+
 				img = $.createImage.call($, Math.ceil(ctx.measureText(str).width), Math.ceil(tY + descent), {
 					pixelDensity: $._pixelDensity
 				});
@@ -1975,12 +1955,13 @@ Q5.renderers.c2d.text = ($, q) => {
 				img._middle = img._top + ascent * 0.5;
 				img._bottom = img._top + ascent;
 				img._leading = leading;
+			} else {
+				img.modified = true;
 			}
 
 			img._fill = $._fill;
 			img._stroke = $._stroke;
 			img._strokeWeight = $._strokeWeight;
-			img.modified = true;
 
 			ctx = img.ctx;
 
@@ -2082,8 +2063,8 @@ Q5.modules.ai = ($) => {
 		let parts = errFile.split(':');
 		let lineNum = parseInt(parts.at(-2));
 		if (askAI) lineNum++;
-		parts[3] = parts[3].split(')')[0];
-		let fileUrl = parts.slice(0, 2).join(':');
+		parts[parts.length - 1] = parts.at(-1).split(')')[0];
+		let fileUrl = parts.slice(0, -2).join(':');
 		let fileBase = fileUrl.split('/').at(-1);
 
 		try {
@@ -2107,7 +2088,7 @@ Q5.modules.ai = ($) => {
 				askAI && e.message.length > 10 ? e.message.slice(10) : 'Whats+wrong+with+this+line%3F+short+answer';
 
 			let url =
-				'https://chatgpt.com/?q=q5.js+' +
+				'https://chatgpt.com/?q=using+q5.js+not+p5.js+' +
 				question +
 				(askAI ? '' : '%0A%0A' + encodeURIComponent(e.name + ': ' + e.message)) +
 				'%0A%0ALine%3A+' +
@@ -2911,7 +2892,7 @@ Q5.modules.input = ($, q) => {
 	$._onwheel = (e) => {
 		$._updateMouse(e);
 		e.delta = e.deltaY;
-		if ($.mouseWheel(e) == false) e.preventDefault();
+		if ($.mouseWheel(e) == false || $._noScroll) e.preventDefault();
 	};
 
 	$.cursor = (name, x, y) => {
@@ -2926,9 +2907,8 @@ Q5.modules.input = ($, q) => {
 		$.canvas.style.cursor = name + pfx;
 	};
 
-	$.noCursor = () => {
-		$.canvas.style.cursor = 'none';
-	};
+	$.noCursor = () => ($.canvas.style.cursor = 'none');
+	$.noScroll = () => ($._noScroll = true);
 
 	if (window) {
 		$.lockMouse = document.body?.requestPointerLock;
@@ -3167,6 +3147,14 @@ Q5.modules.math = ($, q) => {
 		}
 	};
 
+	if ($._renderer == 'c2d' && !$._webgpuFallback) {
+		$.randomX = (v = 0) => $.random(-v, $.canvas.w + v);
+		$.randomY = (v = 0) => $.random(-v, $.canvas.h + v);
+	} else {
+		$.randomX = (v = 0) => $.random(-$.canvas.hw - v, $.canvas.hw + v);
+		$.randomY = (v = 0) => $.random(-$.canvas.hh - v, $.canvas.hh + v);
+	}
+
 	$.randomGenerator = (method) => {
 		if (method == $.LCG) rng1 = lcg();
 		else if (method == $.SHR3) rng1 = shr3();
@@ -3455,7 +3443,7 @@ Q5.PerlinNoise = class extends Q5.Noise {
 		return (total / maxAmp + 1) / 2;
 	}
 };
-Q5.modules.record = ($) => {
+Q5.modules.record = ($, q) => {
 	let rec, btn0, btn1, timer, formatSelect, qualitySelect;
 
 	$.recording = false;
@@ -3549,26 +3537,27 @@ Q5.modules.record = ($) => {
 			}
 		}
 
-		formatSelect = $.createSelect();
+		formatSelect = $.createSelect('format');
 		for (const name in rec.formats) {
 			formatSelect.option(name, rec.formats[name]);
 		}
+		formatSelect.title = 'Video Format';
 		rec.append(formatSelect);
 
-		// prettier-ignore
-		rec.qualityPresets = {
-			SD:   10000000, // 10 Mbps
-			HD:   16000000, // 16 Mbps
-			FHD:  22000000, // 22 Mbps
-			QHD:  28000000, // 28 Mbps
-			'4K': 48000000, // 48 Mbps
-			'8K': 75000000  // 75 Mbps
+		let qMult = {
+			min: 0.1,
+			low: 0.25,
+			mid: 0.5,
+			high: 0.75,
+			ultra: 0.9,
+			max: 1
 		};
 
-		qualitySelect = $.createSelect();
-		for (let name in rec.qualityPresets) {
-			qualitySelect.option(name);
+		qualitySelect = $.createSelect('quality');
+		for (let name in qMult) {
+			qualitySelect.option(name, qMult[name]);
 		}
+		qualitySelect.title = 'Video Quality';
 		rec.append(qualitySelect);
 
 		rec.encoderSettings = {};
@@ -3578,7 +3567,7 @@ Q5.modules.record = ($) => {
 		}
 
 		function changeQuality() {
-			rec.encoderSettings.videoBitsPerSecond = rec.qualityPresets[qualitySelect.value];
+			rec.encoderSettings.videoBitsPerSecond = maxVideoBitRate * qualitySelect.value;
 		}
 
 		formatSelect.addEventListener('change', changeFormat);
@@ -3587,8 +3576,8 @@ Q5.modules.record = ($) => {
 		Object.defineProperty(rec, 'quality', {
 			get: () => qualitySelect.selected,
 			set: (v) => {
-				v = v.toUpperCase();
-				if (rec.qualityPresets[v]) {
+				v = v.toLowerCase();
+				if (qMult[v]) {
 					qualitySelect.selected = v;
 					changeQuality();
 				}
@@ -3607,11 +3596,15 @@ Q5.modules.record = ($) => {
 		});
 
 		let h = $.canvas.height;
-		rec.quality = h >= 4320 ? '8K' : h >= 2160 ? '4K' : h >= 1440 ? 'QHD' : h >= 1080 ? 'FHD' : h >= 720 ? 'HD' : 'SD';
 
 		if (h >= 1440 && rec.formats.VP9) rec.format = 'VP9';
 		else rec.format = 'H.264';
 
+		let maxVideoBitRate =
+			(h >= 4320 ? 128 : h >= 2160 ? 75 : h >= 1440 ? 36 : h >= 1080 ? 28 : h >= 720 ? 22 : 16) * 1000000;
+
+		rec.quality = 'high';
+
 		btn0.addEventListener('click', () => {
 			if (!$.recording) start();
 			else if (!rec.paused) $.pauseRecording();
@@ -3652,7 +3645,7 @@ Q5.modules.record = ($) => {
 		});
 
 		rec.mediaRecorder.start();
-		$.recording = true;
+		q.recording = true;
 		rec.paused = false;
 		rec.classList.add('recording');
 
@@ -3673,7 +3666,7 @@ Q5.modules.record = ($) => {
 
 		rec.resetTimer();
 		rec.mediaRecorder.stop();
-		$.recording = false;
+		q.recording = false;
 		rec.paused = false;
 		rec.classList.remove('recording');
 	}
@@ -3745,7 +3738,7 @@ Q5.modules.record = ($) => {
 	$.deleteRecording = () => {
 		stop();
 		resetUI();
-		$.recording = false;
+		q.recording = false;
 	};
 
 	$.saveRecording = async (fileName) => {
@@ -3770,7 +3763,8 @@ Q5.modules.record = ($) => {
 		a.target = iframe.name;
 		a.href = dataUrl;
 		fileName ??=
-			'recording ' +
+			document.title +
+			' ' +
 			new Date()
 				.toLocaleString(undefined, { hour12: false })
 				.replace(',', ' at')
@@ -3788,7 +3782,7 @@ Q5.modules.record = ($) => {
 
 		setTimeout(() => URL.revokeObjectURL(dataUrl), 1000);
 		resetUI();
-		$.recording = false;
+		q.recording = false;
 	};
 };
 Q5.modules.sound = ($, q) => {
@@ -4028,6 +4022,10 @@ Q5.modules.util = ($, q) => {
 	$.loadJSON = (url, cb) => $._loadFile(url, cb, 'json');
 	$.loadCSV = (url, cb) => $._loadFile(url, cb, 'csv');
 
+	const imgRegex = /(jpe?g|png|gif|webp|avif|svg)/,
+		fontRegex = /(ttf|otf|woff2?|eot|json)/,
+		audioRegex = /(wav|flac|mp3|ogg|m4a|aac|aiff|weba)/;
+
 	$.load = function (...urls) {
 		if (Array.isArray(urls[0])) urls = urls[0];
 
@@ -4041,11 +4039,11 @@ Q5.modules.util = ($, q) => {
 				obj = $.loadJSON(url);
 			} else if (ext == 'csv') {
 				obj = $.loadCSV(url);
-			} else if (/(jpe?g|png|gif|webp|avif|svg)/.test(ext)) {
+			} else if (imgRegex.test(ext)) {
 				obj = $.loadImage(url);
-			} else if (/(ttf|otf|woff2?|eot|json)/i.test(ext)) {
+			} else if (fontRegex.test(ext)) {
 				obj = $.loadFont(url);
-			} else if (/(wav|flac|mp3|ogg|m4a|aac|aiff|weba)/.test(ext)) {
+			} else if (audioRegex.test(ext)) {
 				obj = $.loadSound(url);
 			} else {
 				obj = $.loadText(url);
@@ -4057,6 +4055,40 @@ Q5.modules.util = ($, q) => {
 		return Promise.all(loaders);
 	};
 
+	async function saveFile(data, name, ext) {
+		name = name || 'untitled';
+		ext = ext || 'png';
+		if (imgRegex.test(ext)) {
+			data = await $._saveCanvas(data, ext);
+		} else {
+			let type = 'text/plain';
+			if (ext == 'json') {
+				if (typeof data != 'string') data = JSON.stringify(data);
+				type = 'text/json';
+			}
+			data = new Blob([data], { type });
+			data = URL.createObjectURL(data);
+		}
+		let a = document.createElement('a');
+		a.href = data;
+		a.download = name + '.' + ext;
+		a.click();
+		setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+	}
+
+	$.save = (a, b, c) => {
+		if (!a || (typeof a == 'string' && (!b || (!c && b.length < 5)))) {
+			c = b;
+			b = a;
+			a = $.canvas;
+		}
+		if (c) saveFile(a, b, c);
+		else if (b) {
+			let lastDot = b.lastIndexOf('.');
+			saveFile(a, b.slice(0, lastDot), b.slice(lastDot + 1));
+		} else saveFile(a);
+	};
+
 	$.CSV = {};
 	$.CSV.parse = (csv, sep = ',', lineSep = '\n') => {
 		if (!csv.length) return [];
@@ -4390,11 +4422,6 @@ Q5.Vector.sub = (v, u) => v.copy().sub(u);
 for (let k of ['fromAngle', 'fromAngles', 'random2D', 'random3D']) {
 	Q5.Vector[k] = (u, v, t) => new Q5.Vector()[k](u, v, t);
 }
-/**
- * q5-webgpu
- *
- * EXPERIMENTAL, for developer testing only!
- */
 Q5.renderers.webgpu = {};
 
 Q5.renderers.webgpu.canvas = ($, q) => {
@@ -4410,6 +4437,11 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	let pass,
 		mainView,
+		frameTextureA,
+		frameTextureB,
+		frameSampler,
+		framePipeline,
+		frameBindGroup,
 		colorIndex = 1,
 		colorStackIndex = 8;
 
@@ -4458,14 +4490,60 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	});
 
 	let createMainView = () => {
+		let w = $.canvas.width,
+			h = $.canvas.height,
+			size = [w, h],
+			format = 'bgra8unorm';
+
 		mainView = Q5.device
 			.createTexture({
-				size: [$.canvas.width, $.canvas.height],
+				size,
 				sampleCount: 4,
-				format: 'bgra8unorm',
+				format,
 				usage: GPUTextureUsage.RENDER_ATTACHMENT
 			})
 			.createView();
+
+		let usage =
+			GPUTextureUsage.COPY_SRC |
+			GPUTextureUsage.COPY_DST |
+			GPUTextureUsage.TEXTURE_BINDING |
+			GPUTextureUsage.RENDER_ATTACHMENT;
+
+		frameTextureA = Q5.device.createTexture({ size, format, usage });
+		frameTextureB = Q5.device.createTexture({ size, format, usage });
+
+		let finalShader = Q5.device.createShaderModule({
+			code: `
+@vertex fn v(@builtin(vertex_index)i:u32)->@builtin(position)vec4<f32>{
+	const pos=array(vec2(-1f,-1f),vec2(1f,-1f),vec2(-1f,1f),vec2(1f,1f));
+	return vec4(pos[i],0f,1f);
+}
+@group(0) @binding(0) var s: sampler;
+@group(0) @binding(1) var t: texture_2d<f32>;
+@fragment fn f(@builtin(position)c:vec4<f32>)->@location(0)vec4<f32>{
+	let uv=c.xy/vec2(${w}, ${h});
+	return textureSample(t,s,uv);
+}`
+		});
+
+		frameSampler = Q5.device.createSampler({
+			magFilter: 'linear',
+			minFilter: 'linear'
+		});
+
+		// Create a pipeline for rendering
+		framePipeline = Q5.device.createRenderPipeline({
+			layout: 'auto',
+			vertex: { module: finalShader, entryPoint: 'v' },
+			fragment: {
+				module: finalShader,
+				entryPoint: 'f',
+				targets: [{ format, writeMask: GPUColorWrite.ALL }]
+			},
+			primitive: { topology: 'triangle-strip' },
+			multisample: { count: 4 }
+		});
 	};
 
 	$._createCanvas = (w, h, opt) => {
@@ -4831,23 +4909,52 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		}
 	};
 
-	$.clear = () => {};
+	let shouldClear = false;
+	$.clear = () => {
+		shouldClear = true;
+	};
+
+	const _drawFrame = () => {
+		pass.setPipeline(framePipeline);
+		pass.setBindGroup(0, frameBindGroup);
+		pass.draw(4);
+	};
 
 	$._beginRender = () => {
+		// swap the frame textures
+		const temp = frameTextureA;
+		frameTextureA = frameTextureB;
+		frameTextureB = temp;
+		$.canvas.texture = frameTextureA;
+
 		$.encoder = Q5.device.createCommandEncoder();
 
+		let target = shouldClear ? $.ctx.getCurrentTexture().createView() : frameTextureA.createView();
+
 		pass = q.pass = $.encoder.beginRenderPass({
 			label: 'q5-webgpu',
 			colorAttachments: [
 				{
 					view: mainView,
-					resolveTarget: $.ctx.getCurrentTexture().createView(),
+					resolveTarget: target,
 					loadOp: 'clear',
 					storeOp: 'store',
 					clearValue: [0, 0, 0, 0]
 				}
 			]
 		});
+
+		if (!shouldClear) {
+			frameBindGroup = Q5.device.createBindGroup({
+				layout: framePipeline.getBindGroupLayout(0),
+				entries: [
+					{ binding: 0, resource: frameSampler },
+					{ binding: 1, resource: frameTextureB.createView() }
+				]
+			});
+
+			_drawFrame();
+		}
 	};
 
 	$._render = () => {
@@ -4922,8 +5029,33 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	$._finishRender = () => {
 		pass.end();
-		let commandBuffer = $.encoder.finish();
-		Q5.device.queue.submit([commandBuffer]);
+
+		if (!shouldClear) {
+			pass = $.encoder.beginRenderPass({
+				colorAttachments: [
+					{
+						view: mainView,
+						resolveTarget: $.ctx.getCurrentTexture().createView(),
+						loadOp: 'clear',
+						storeOp: 'store',
+						clearValue: [0, 0, 0, 0]
+					}
+				]
+			});
+
+			frameBindGroup = Q5.device.createBindGroup({
+				layout: framePipeline.getBindGroupLayout(0),
+				entries: [
+					{ binding: 0, resource: frameSampler },
+					{ binding: 1, resource: frameTextureA.createView() }
+				]
+			});
+			_drawFrame();
+			pass.end();
+			shouldClear = false;
+		}
+
+		Q5.device.queue.submit([$.encoder.finish()]);
 
 		q.pass = $.encoder = null;
 
@@ -5718,12 +5850,10 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 
 	$.smooth();
 
-	let MAX_TEXTURES = 12000;
-
-	$._textures = [];
 	let tIdx = 0;
 
 	$._createTexture = (img) => {
+		let g = img;
 		if (img.canvas) img = img.canvas;
 
 		let textureSize = [img.width, img.height, 1];
@@ -5743,26 +5873,18 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			textureSize
 		);
 
-		$._textures[tIdx] = texture;
-		img.textureIndex = tIdx;
+		g.texture = texture;
+		g.textureIndex = tIdx;
 
-		const textureBindGroup = Q5.device.createBindGroup({
+		$._textureBindGroups[tIdx] = Q5.device.createBindGroup({
 			layout: textureLayout,
 			entries: [
 				{ binding: 0, resource: sampler },
 				{ binding: 1, resource: texture.createView() }
 			]
 		});
-		$._textureBindGroups[tIdx] = textureBindGroup;
-
-		tIdx = (tIdx + 1) % MAX_TEXTURES;
 
-		// if the texture array is full, destroy the oldest texture
-		if ($._textures[tIdx]) {
-			$._textures[tIdx].destroy();
-			delete $._textures[tIdx];
-			delete $._textureBindGroups[tIdx];
-		}
+		tIdx++;
 	};
 
 	$.loadImage = (src, cb) => {
@@ -5793,23 +5915,31 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 	};
 
 	$.image = (img, dx = 0, dy = 0, dw, dh, sx = 0, sy = 0, sw, sh) => {
-		let g = img;
-		if (img.canvas) img = img.canvas;
 		if (img.textureIndex == undefined) return;
 
+		let cnv = img.canvas || img;
+
 		if ($._matrixDirty) $._saveMatrix();
 
-		let w = img.width,
-			h = img.height,
-			pd = g._pixelDensity || 1;
+		let w = cnv.width,
+			h = cnv.height,
+			pd = img._pixelDensity || 1;
 
-		dw ??= g.defaultWidth;
-		dh ??= g.defaultHeight;
+		if (img.modified) {
+			Q5.device.queue.copyExternalImageToTexture(
+				{ source: cnv },
+				{ texture: img.texture, colorSpace: $.canvas.colorSpace },
+				[w, h, 1]
+			);
+			img.modified = false;
+		}
+
+		dw ??= img.defaultWidth;
+		dh ??= img.defaultHeight;
 		sw ??= w;
 		sh ??= h;
-
-		dw *= pd;
-		dh *= pd;
+		sx *= pd;
+		sy *= pd;
 
 		let [l, r, t, b] = $._calcBox(dx, dy, dw, dh, $._imageMode);
 
@@ -5829,8 +5959,55 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		$.drawStack.push(1, img.textureIndex);
 	};
 
+	$._saveCanvas = async (data, ext) => {
+		let texture = data.texture,
+			w = texture.width,
+			h = texture.height,
+			bytesPerRow = Math.ceil((w * 4) / 256) * 256;
+
+		let buffer = Q5.device.createBuffer({
+			size: bytesPerRow * h,
+			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+		});
+
+		let en = Q5.device.createCommandEncoder();
+
+		en.copyTextureToBuffer({ texture }, { buffer, bytesPerRow, rowsPerImage: h }, { width: w, height: h });
+
+		Q5.device.queue.submit([en.finish()]);
+
+		await buffer.mapAsync(GPUMapMode.READ);
+
+		let pad = new Uint8Array(buffer.getMappedRange());
+		data = new Uint8Array(w * h * 4); // unpadded data
+
+		// Remove padding from each row
+		for (let y = 0; y < h; y++) {
+			const p = y * bytesPerRow; // padded row offset
+			const u = y * w * 4; // unpadded row offset
+			data.set(pad.subarray(p, p + w * 4), u);
+		}
+
+		buffer.unmap();
+
+		let colorSpace = $.canvas.colorSpace;
+		data = new Uint8ClampedArray(data.buffer);
+		data = new ImageData(data, w, h, { colorSpace });
+		let cnv = new OffscreenCanvas(w, h);
+		let ctx = cnv.getContext('2d', { colorSpace });
+		ctx.putImageData(data, 0, 0);
+
+		// Convert to blob then data URL
+		let blob = await cnv.convertToBlob({ type: 'image/' + ext });
+		return await new Promise((resolve) => {
+			let r = new FileReader();
+			r.onloadend = () => resolve(r.result);
+			r.readAsDataURL(blob);
+		});
+	};
+
 	$._hooks.preRender.push(() => {
-		if (!$._textureBindGroups.length) return;
+		if (!vertIndex) return;
 
 		// Switch to image pipeline
 		$.pass.setPipeline($._pipelines[1]);
@@ -6371,20 +6548,14 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		}
 
 		let img = $._g.createTextImage(str, w, h);
-
-		if (img.canvas.textureIndex == undefined) {
+		if (img.textureIndex == undefined) {
 			$._createTexture(img);
-		} else if (img.modified) {
-			let cnv = img.canvas;
-			let textureSize = [cnv.width, cnv.height, 1];
-			let texture = $._textures[cnv.textureIndex];
-
-			Q5.device.queue.copyExternalImageToTexture(
-				{ source: cnv },
-				{ texture, colorSpace: $.canvas.colorSpace },
-				textureSize
-			);
-			img.modified = false;
+			let _copy = img.copy;
+			img.copy = function () {
+				let copy = _copy();
+				$._createTexture(copy);
+				return copy;
+			};
 		}
 		return img;
 	};