q5 2.2.3 → 2.4.1

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.2
+ * @version 2.4
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -44,7 +44,8 @@ function Q5(scope, parent, renderer) {
 	$._loop = true;
 	$._hooks = {
 		postCanvas: [],
-		preRender: []
+		preRender: [],
+		postRender: []
 	};
 
 	let millisStart = 0;
@@ -219,7 +220,7 @@ function Q5(scope, parent, renderer) {
 					return t[k]();
 				} catch (e) {
 					if ($._aiErrorAssistance) $._aiErrorAssistance(e);
-					else console.error(e);
+					throw e;
 				}
 			};
 		}
@@ -280,6 +281,58 @@ if (typeof document == 'object') {
 	});
 }
 Q5.modules.canvas = ($, q) => {
+	$.CENTER = 'center';
+	$.LEFT = 'left';
+	$.RIGHT = 'right';
+	$.TOP = 'top';
+	$.BOTTOM = 'bottom';
+
+	$.BASELINE = 'alphabetic';
+
+	$.NORMAL = 'normal';
+	$.ITALIC = 'italic';
+	$.BOLD = 'bold';
+	$.BOLDITALIC = 'italic bold';
+
+	$.ROUND = 'round';
+	$.SQUARE = 'butt';
+	$.PROJECT = 'square';
+	$.MITER = 'miter';
+	$.BEVEL = 'bevel';
+
+	$.CHORD = 0;
+	$.PIE = 1;
+	$.OPEN = 2;
+
+	$.RADIUS = 'radius';
+	$.CORNER = 'corner';
+	$.CORNERS = 'corners';
+
+	$.CLOSE = 1;
+
+	$.LANDSCAPE = 'landscape';
+	$.PORTRAIT = 'portrait';
+
+	$.BLEND = 'source-over';
+	$.REMOVE = 'destination-out';
+	$.ADD = 'lighter';
+	$.DARKEST = 'darken';
+	$.LIGHTEST = 'lighten';
+	$.DIFFERENCE = 'difference';
+	$.SUBTRACT = 'subtract';
+	$.EXCLUSION = 'exclusion';
+	$.MULTIPLY = 'multiply';
+	$.SCREEN = 'screen';
+	$.REPLACE = 'copy';
+	$.OVERLAY = 'overlay';
+	$.HARD_LIGHT = 'hard-light';
+	$.SOFT_LIGHT = 'soft-light';
+	$.DODGE = 'color-dodge';
+	$.BURN = 'color-burn';
+
+	$.P2D = '2d';
+	$.WEBGL = 'webgl';
+
 	$._OffscreenCanvas =
 		window.OffscreenCanvas ||
 		function () {
@@ -309,7 +362,7 @@ Q5.modules.canvas = ($, q) => {
 		c.renderer = $._renderer;
 		c[$._renderer] = true;
 	}
-	$._pixelDensity = 1;
+	$._pixelDensity = window?.devicePixelRatio || 1;
 
 	$._adjustDisplay = () => {
 		if (c.style) {
@@ -346,6 +399,15 @@ Q5.modules.canvas = ($, q) => {
 		return rend;
 	};
 
+	$.createGraphics = function (w, h, opt) {
+		let g = new Q5('graphics');
+		opt ??= {};
+		opt.alpha ??= true;
+		opt.colorSpace ??= $.canvas.colorSpace;
+		g.createCanvas.call($, w, h, opt);
+		return g;
+	};
+
 	$._save = async (data, name, ext) => {
 		name = name || 'untitled';
 		ext = ext || 'png';
@@ -454,7 +516,7 @@ Q5.modules.canvas = ($, q) => {
 	$.canvas.resize = $.resizeCanvas;
 	$.canvas.save = $.saveCanvas = $.save;
 
-	$.displayDensity = () => window.devicePixelRatio;
+	$.displayDensity = () => window.devicePixelRatio || 1;
 	$.pixelDensity = (v) => {
 		if (!v || v == $._pixelDensity) return $._pixelDensity;
 		$._pixelDensity = v;
@@ -528,8 +590,10 @@ Q5.renderers.q2d.canvas = ($, q) => {
 		$._doFill = true;
 		$._fillSet = true;
 		if (Q5.Color) {
-			if (!c._q5Color && typeof c != 'string') c = $.color(...arguments);
-			else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+			if (!c._q5Color) {
+				if (typeof c != 'string') c = $.color(...arguments);
+				else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+			}
 			if (c.a <= 0) return ($._doFill = false);
 		}
 		$.ctx.fillStyle = c.toString();
@@ -539,8 +603,10 @@ Q5.renderers.q2d.canvas = ($, q) => {
 		$._doStroke = true;
 		$._strokeSet = true;
 		if (Q5.Color) {
-			if (!c._q5Color && typeof c != 'string') c = $.color(...arguments);
-			else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+			if (!c._q5Color) {
+				if (typeof c != 'string') c = $.color(...arguments);
+				else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
+			}
 			if (c.a <= 0) return ($._doStroke = false);
 		}
 		$.ctx.strokeStyle = c.toString();
@@ -568,7 +634,7 @@ Q5.renderers.q2d.canvas = ($, q) => {
 		$.ctx.translate(x, y);
 	};
 	$.rotate = (r) => {
-		if ($._angleMode == 'degrees') r = $.radians(r);
+		if ($._angleMode) r = $.radians(r);
 		$.ctx.rotate(r);
 	};
 	$.scale = (x, y) => {
@@ -630,15 +696,6 @@ Q5.renderers.q2d.canvas = ($, q) => {
 		return vid;
 	};
 
-	$.createGraphics = function (w, h, opt) {
-		let g = new Q5('graphics');
-		opt ??= {};
-		opt.alpha ??= true;
-		opt.colorSpace ??= $.canvas.colorSpace;
-		g.createCanvas.call($, w, h, opt);
-		return g;
-	};
-
 	if (window && $._scope != 'graphics') {
 		window.addEventListener('resize', () => {
 			$._shouldResize = true;
@@ -649,48 +706,6 @@ Q5.renderers.q2d.canvas = ($, q) => {
 	}
 };
 Q5.renderers.q2d.drawing = ($) => {
-	$.CHORD = 0;
-	$.PIE = 1;
-	$.OPEN = 2;
-
-	$.RADIUS = 'radius';
-	$.CORNER = 'corner';
-	$.CORNERS = 'corners';
-
-	$.ROUND = 'round';
-	$.SQUARE = 'butt';
-	$.PROJECT = 'square';
-	$.MITER = 'miter';
-	$.BEVEL = 'bevel';
-
-	$.CLOSE = 1;
-
-	$.CENTER = 'center';
-	$.LEFT = 'left';
-	$.RIGHT = 'right';
-	$.TOP = 'top';
-	$.BOTTOM = 'bottom';
-
-	$.LANDSCAPE = 'landscape';
-	$.PORTRAIT = 'portrait';
-
-	$.BLEND = 'source-over';
-	$.REMOVE = 'destination-out';
-	$.ADD = 'lighter';
-	$.DARKEST = 'darken';
-	$.LIGHTEST = 'lighten';
-	$.DIFFERENCE = 'difference';
-	$.SUBTRACT = 'subtract';
-	$.EXCLUSION = 'exclusion';
-	$.MULTIPLY = 'multiply';
-	$.SCREEN = 'screen';
-	$.REPLACE = 'copy';
-	$.OVERLAY = 'overlay';
-	$.HARD_LIGHT = 'hard-light';
-	$.SOFT_LIGHT = 'soft-light';
-	$.DODGE = 'color-dodge';
-	$.BURN = 'color-burn';
-
 	$._doStroke = true;
 	$._doFill = true;
 	$._strokeSet = false;
@@ -726,8 +741,8 @@ Q5.renderers.q2d.drawing = ($) => {
 		$.ctx.resetTransform();
 		if (c.canvas) $.image(c, 0, 0, $.width, $.height);
 		else {
-			if (Q5.Color) {
-				if (!c._q5Color && typeof c != 'string') c = $.color(...arguments);
+			if (Q5.Color && !c._q5Color) {
+				if (typeof c != 'string') c = $.color(...arguments);
 				else if ($._namedColors[c]) c = $.color(...$._namedColors[c]);
 			}
 			$.ctx.fillStyle = c.toString();
@@ -753,7 +768,7 @@ Q5.renderers.q2d.drawing = ($) => {
 
 	function arc(x, y, w, h, lo, hi, mode, detail) {
 		if (!$._doFill && !$._doStroke) return;
-		let d = $._angleMode == 'degrees';
+		let d = $._angleMode;
 		let full = d ? 360 : $.TAU;
 		lo %= full;
 		hi %= full;
@@ -1274,11 +1289,15 @@ Q5.renderers.q2d.image = ($, q) => {
 		};
 	}
 
+	$._getImageData = (x, y, w, h) => {
+		return $.ctx.getImageData(x, y, w, h, { colorSpace: $.canvas.colorSpace });
+	};
+
 	$.trim = () => {
 		let pd = $._pixelDensity || 1;
 		let w = $.canvas.width;
 		let h = $.canvas.height;
-		let data = $.ctx.getImageData(0, 0, w, h).data;
+		let data = $._getImageData(0, 0, w, h).data;
 		let left = w,
 			right = 0,
 			top = h,
@@ -1317,7 +1336,7 @@ Q5.renderers.q2d.image = ($, q) => {
 	$.get = (x, y, w, h) => {
 		let pd = $._pixelDensity || 1;
 		if (x !== undefined && w === undefined) {
-			let c = $.ctx.getImageData(x * pd, y * pd, 1, 1).data;
+			let c = $._getImageData(x * pd, y * pd, 1, 1).data;
 			return new $.Color(c[0], c[1], c[2], c[3] / 255);
 		}
 		x = (x || 0) * pd;
@@ -1327,7 +1346,7 @@ Q5.renderers.q2d.image = ($, q) => {
 		w *= pd;
 		h *= pd;
 		let img = $.createImage(w, h);
-		let imgData = $.ctx.getImageData(x, y, w, h);
+		let imgData = $._getImageData(x, y, w, h);
 		img.ctx.putImageData(imgData, 0, 0);
 		img._pixelDensity = pd;
 		img.width = _w;
@@ -1357,7 +1376,7 @@ Q5.renderers.q2d.image = ($, q) => {
 	};
 
 	$.loadPixels = () => {
-		imgData = $.ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
+		imgData = $._getImageData(0, 0, $.canvas.width, $.canvas.height);
 		q.pixels = imgData.data;
 	};
 	$.updatePixels = () => {
@@ -1384,18 +1403,6 @@ Q5.DILATE = 6;
 Q5.ERODE = 7;
 Q5.BLUR = 8;
 Q5.renderers.q2d.text = ($, q) => {
-	$.NORMAL = 'normal';
-	$.ITALIC = 'italic';
-	$.BOLD = 'bold';
-	$.BOLDITALIC = 'italic bold';
-
-	$.CENTER = 'center';
-	$.LEFT = 'left';
-	$.RIGHT = 'right';
-	$.TOP = 'top';
-	$.BOTTOM = 'bottom';
-	$.BASELINE = 'alphabetic';
-
 	$._textFont = 'sans-serif';
 	$._textSize = 12;
 	$._textLeading = 15;
@@ -1507,12 +1514,14 @@ Q5.renderers.q2d.text = ($, q) => {
 		);
 	};
 	$.createTextImage = (str, w, h) => {
+		let k = $._genTextImageKey(str, w, h);
+		if ($._tic.get(k)) return $._tic.get(k);
+
 		let og = $._textCache;
 		$._textCache = true;
 		$._genTextImage = true;
 		$.text(str, 0, 0, w, h);
 		$._genTextImage = false;
-		let k = $._genTextImageKey(str, w, h);
 		$._textCache = og;
 		return $._tic.get(k);
 	};
@@ -1566,7 +1575,7 @@ Q5.renderers.q2d.text = ($, q) => {
 		}
 		if (!$._fillSet) c.fillStyle = f;
 		if (useCache) {
-			ti = tg.get();
+			ti = tg.canvas;
 			ti._ascent = _ascent;
 			ti._descent = _descent;
 			$._tic.set(k, ti);
@@ -1603,8 +1612,7 @@ Q5.modules.ai = ($) => {
 
 	$._aiErrorAssistance = async (e) => {
 		let askAI = e.message?.includes('Ask AI ✨');
-		if (!askAI) console.error(e);
-		if (Q5.disableFriendlyErrors) return;
+		if (Q5.disableFriendlyErrors && !askAI) return;
 		if (askAI || !Q5.errorTolerant) $.noLoop();
 		let stackLines = e.stack?.split('\n');
 		if (!e.stack || stackLines.length <= 1) return;
@@ -1615,7 +1623,7 @@ Q5.modules.ai = ($) => {
 			idx = 0;
 			sep = '@';
 		}
-		while (stackLines[idx].indexOf('q5.js:') >= 0) idx++;
+		while (stackLines[idx].indexOf('q5') >= 0) idx++;
 
 		let parts = stackLines[idx].split(sep).at(-1);
 		parts = parts.split(':');
@@ -1653,11 +1661,11 @@ Q5.modules.ai = ($) => {
 				'%0A%0AExcerpt+for+context%3A%0A%0A' +
 				encodeURIComponent(context);
 
-			if (!askAI) console.log('Error in ' + fileBase + ' on line ' + lineNum + ':\n\n' + errLine);
+			console.warn('Error in ' + fileBase + ' on line ' + lineNum + ':\n\n' + errLine);
 
 			console.warn('Ask AI ✨ ' + url);
 
-			if (askAI) window.open(url, '_blank');
+			if (askAI) return window.open(url, '_blank');
 		} catch (err) {}
 	};
 };
@@ -1750,12 +1758,7 @@ Q5.modules.color = ($, q) => {
 					if (c3) c3 /= 255;
 				}
 			}
-			if (Array.isArray(c0)) {
-				c1 = c0[1];
-				c2 = c0[2];
-				c3 = c0[3];
-				c0 = c0[0];
-			}
+			if (Array.isArray(c0)) [c0, c1, c2, c3] = c0;
 		}
 
 		if (c2 == undefined) return new C(c0, c0, c0, c1);
@@ -1767,11 +1770,11 @@ Q5.modules.color = ($, q) => {
 	$.blue = (c) => c.b;
 	$.alpha = (c) => c.a;
 	$.lightness = (c) => {
-		if ($._colorMode == 'oklch') return c.l;
+		if (c.l) return c.l;
 		return ((0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b) * 100) / 255;
 	};
 	$.hue = (c) => {
-		if ($._colorMode == 'oklch') return c.h;
+		if (c.h) return c.h;
 		let r = c.r;
 		let g = c.g;
 		let b = c.b;
@@ -1930,6 +1933,12 @@ Q5.modules.display = ($) => {
 
 	let c = $.canvas;
 
+	$.CENTERED = 'centered';
+	$.FULLSCREEN = 'fullscreen';
+	$.MAXED = 'maxed';
+
+	$.PIXELATED = 'pixelated';
+
 	if (Q5._instanceCount == 0 && !Q5._nodejs) {
 		document.head.insertAdjacentHTML(
 			'beforeend',
@@ -2195,8 +2204,8 @@ Q5.modules.input = ($, q) => {
 	}
 };
 Q5.modules.math = ($, q) => {
-	$.DEGREES = 'degrees';
-	$.RADIANS = 'radians';
+	$.RADIANS = 0;
+	$.DEGREES = 1;
 
 	$.PI = Math.PI;
 	$.HALF_PI = Math.PI / 2;
@@ -2217,9 +2226,14 @@ Q5.modules.math = ($, q) => {
 	$.SHR3 = 1;
 	$.LCG = 2;
 
-	$.angleMode = (mode) => ($._angleMode = mode);
-	$._DEGTORAD = Math.PI / 180;
-	$._RADTODEG = 180 / Math.PI;
+	let angleMode = 0;
+
+	$.angleMode = (mode) => {
+		if (mode == 'radians') mode = 0;
+		angleMode = $._angleMode = mode;
+	};
+	let DEGTORAD = ($._DEGTORAD = Math.PI / 180);
+	let RADTODEG = ($._RADTODEG = 180 / Math.PI);
 	$.degrees = (x) => x * $._RADTODEG;
 	$.radians = (x) => x * $._DEGTORAD;
 
@@ -2245,24 +2259,26 @@ Q5.modules.math = ($, q) => {
 	$.sq = (x) => x * x;
 	$.fract = (x) => x - Math.floor(x);
 
-	for (let fn of ['sin', 'cos', 'tan']) {
-		$[fn] = (a) => {
-			if ($._angleMode == 'degrees') a = $.radians(a);
-			return Math[fn](a);
-		};
-	}
+	$.sin = (a) => Math.sin(!angleMode ? a : a * DEGTORAD);
+	$.cos = (a) => Math.cos(!angleMode ? a : a * DEGTORAD);
+	$.tan = (a) => Math.tan(!angleMode ? a : a * DEGTORAD);
+
+	$.asin = (x) => {
+		let a = Math.asin(x);
+		return !angleMode ? a : a * RADTODEG;
+	};
+	$.acos = (x) => {
+		let a = Math.acos(x);
+		return !angleMode ? a : a * RADTODEG;
+	};
+	$.atan = (x) => {
+		let a = Math.atan(x);
+		return !angleMode ? a : a * RADTODEG;
+	};
 
-	for (let fn of ['asin', 'acos', 'atan']) {
-		$[fn] = (x) => {
-			let a = Math[fn](x);
-			if ($._angleMode == 'degrees') a = $.degrees(a);
-			return a;
-		};
-	}
 	$.atan2 = (y, x) => {
 		let a = Math.atan2(y, x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
+		return !angleMode ? a : a * RADTODEG;
 	};
 
 	function lcg() {
@@ -2687,18 +2703,19 @@ Q5.modules.vector = ($) => {
 };
 
 Q5.Vector = class {
-	constructor(_x, _y, _z, _$) {
-		this.x = _x || 0;
-		this.y = _y || 0;
-		this.z = _z || 0;
-		this._$ = _$ || window;
+	constructor(x, y, z, $) {
+		this.x = x || 0;
+		this.y = y || 0;
+		this.z = z || 0;
+		this._$ = $ || window;
 		this._cn = null;
 		this._cnsq = null;
 	}
-	set(_x, _y, _z) {
-		this.x = _x || 0;
-		this.y = _y || 0;
-		this.z = _z || 0;
+	set(x, y, z) {
+		this.x = x?.x || x || 0;
+		this.y = x?.y || y || 0;
+		this.z = x?.z || z || 0;
+		return this;
 	}
 	copy() {
 		return new Q5.Vector(this.x, this.y, this.z);
@@ -2820,6 +2837,12 @@ Q5.Vector = class {
 	heading() {
 		return this._$.atan2(this.y, this.x);
 	}
+	setHeading(ang) {
+		let mag = this.mag(); // Calculate the magnitude of the vector
+		this.x = mag * this._$.cos(ang); // Set the new x component
+		this.y = mag * this._$.sin(ang); // Set the new y component
+		return this;
+	}
 	rotate(ang) {
 		let costh = this._$.cos(ang);
 		let sinth = this._$.sin(ang);
@@ -2837,13 +2860,52 @@ Q5.Vector = class {
 	}
 	lerp() {
 		let args = [...arguments];
-		let u = this._arg2v(...args.slice(0, -1));
 		let amt = args.at(-1);
+		if (amt == 0) return this;
+		let u = this._arg2v(...args.slice(0, -1));
 		this.x += (u.x - this.x) * amt;
 		this.y += (u.y - this.y) * amt;
 		this.z += (u.z - this.z) * amt;
 		return this;
 	}
+	slerp() {
+		let args = [...arguments];
+		let amt = args.at(-1);
+		if (amt == 0) return this;
+		let u = this._arg2v(...args.slice(0, -1));
+		if (amt == 1) return this.set(u);
+
+		let v0Mag = this.mag();
+		let v1Mag = u.mag();
+
+		if (v0Mag == 0 || v1Mag == 0) {
+			return this.mult(1 - amt).add(u.mult(amt));
+		}
+
+		let axis = Q5.Vector.cross(this, u);
+		let axisMag = axis.mag();
+		let theta = Math.atan2(axisMag, this.dot(u));
+
+		if (axisMag > 0) {
+			axis.div(axisMag);
+		} else if (theta < this._$.HALF_PI) {
+			return this.mult(1 - amt).add(u.mult(amt));
+		} else {
+			if (this.z == 0 && u.z == 0) axis.set(0, 0, 1);
+			else if (this.x != 0) axis.set(this.y, -this.x, 0).normalize();
+			else axis.set(1, 0, 0);
+		}
+
+		let ey = axis.cross(this);
+		let lerpedMagFactor = 1 - amt + (amt * v1Mag) / v0Mag;
+		let cosMultiplier = lerpedMagFactor * Math.cos(amt * theta);
+		let sinMultiplier = lerpedMagFactor * Math.sin(amt * theta);
+
+		this.x = this.x * cosMultiplier + ey.x * sinMultiplier;
+		this.y = this.y * cosMultiplier + ey.y * sinMultiplier;
+		this.z = this.z * cosMultiplier + ey.z * sinMultiplier;
+		return this;
+	}
 	reflect(n) {
 		n.normalize();
 		return this.sub(n.mult(2 * this.dot(n)));
@@ -2896,6 +2958,7 @@ Q5.Vector.div = (v, u) => v.copy().div(u);
 Q5.Vector.dot = (v, u) => v.copy().dot(u);
 Q5.Vector.equals = (v, u, epsilon) => v.equals(u, epsilon);
 Q5.Vector.lerp = (v, u, amt) => v.copy().lerp(u, amt);
+Q5.Vector.slerp = (v, u, amt) => v.copy().slerp(u, amt);
 Q5.Vector.limit = (v, m) => v.copy().limit(m);
 Q5.Vector.heading = (v) => this._$.atan2(v.y, v.x);
 Q5.Vector.magSq = (v) => v.x * v.x + v.y * v.y + v.z * v.z;
@@ -2922,70 +2985,62 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	if ($.colorMode) $.colorMode('rgb', 'float');
 
-	let pass, colorsStack, envBindGroup, transformBindGroup;
-
-	$._createCanvas = (w, h, opt) => {
-		q.ctx = q.drawingContext = c.getContext('webgpu');
-
-		opt.format = navigator.gpu.getPreferredCanvasFormat();
-		opt.device = Q5.device;
+	let pass;
 
-		$.ctx.configure(opt);
+	$.pipelines = [];
 
-		$.pipelines = [];
+	// local variables used for slightly better performance
+	// stores pipeline shifts and vertex counts/image indices
+	let drawStack = ($.drawStack = []);
 
-		// pipeline changes for each draw call
-		$.pipelinesStack = [];
+	// colors used for each draw call
+	let colorsStack = ($.colorsStack = [1, 1, 1, 1]);
 
-		// vertices for each draw call
-		$.verticesStack = [];
-
-		// number of vertices for each draw call
-		$.drawStack = [];
+	$._envLayout = Q5.device.createBindGroupLayout({
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.VERTEX,
+				buffer: {
+					type: 'uniform',
+					hasDynamicOffset: false
+				}
+			}
+		]
+	});
 
-		// colors used for each draw call
-		colorsStack = $.colorsStack = [1, 1, 1, 1];
+	$._transformLayout = Q5.device.createBindGroupLayout({
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.VERTEX,
+				buffer: {
+					type: 'read-only-storage',
+					hasDynamicOffset: false
+				}
+			}
+		]
+	});
 
-		// current color index, used to associate a vertex with a color
-		$._colorIndex = 0;
+	$.bindGroupLayouts = [$._envLayout, $._transformLayout];
 
-		let envLayout = Q5.device.createBindGroupLayout({
-			entries: [
-				{
-					binding: 0,
-					visibility: GPUShaderStage.VERTEX,
-					buffer: {
-						type: 'uniform',
-						hasDynamicOffset: false
-					}
-				}
-			]
-		});
+	const uniformBuffer = Q5.device.createBuffer({
+		size: 8, // Size of two floats
+		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+	});
 
-		let transformLayout = Q5.device.createBindGroupLayout({
-			entries: [
-				{
-					binding: 0,
-					visibility: GPUShaderStage.VERTEX,
-					buffer: {
-						type: 'read-only-storage',
-						hasDynamicOffset: false
-					}
-				}
-			]
-		});
+	$._createCanvas = (w, h, opt) => {
+		q.ctx = q.drawingContext = c.getContext('webgpu');
 
-		$.bindGroupLayouts = [envLayout, transformLayout];
+		opt.format = navigator.gpu.getPreferredCanvasFormat();
+		opt.device = Q5.device;
 
-		const uniformBuffer = Q5.device.createBuffer({
-			size: 8, // Size of two floats
-			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-		});
+		$.ctx.configure(opt);
 
 		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh]));
 
-		envBindGroup = Q5.device.createBindGroup({
-			layout: envLayout,
+		$._envBindGroup = Q5.device.createBindGroup({
+			layout: $._envLayout,
 			entries: [
 				{
 					binding: 0,
@@ -3044,14 +3099,14 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		if (!x && !y && !z) return;
 		// Update the translation values
 		$._matrix[3] += x;
-		$._matrix[7] += y;
+		$._matrix[7] -= y;
 		$._matrix[11] += z || 0;
 		$._matrixDirty = true;
 	};
 
 	$.rotate = (r) => {
 		if (!r) return;
-		if ($._angleMode == 'degrees') r = $.radians(r);
+		if ($._angleMode) r *= $._DEGTORAD;
 
 		let cosR = Math.cos(r);
 		let sinR = Math.sin(r);
@@ -3092,10 +3147,72 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._matrixDirty = false;
 	};
 
+	// current color index, used to associate a vertex with a color
+	let colorIndex = 0;
+	const addColor = (r, g, b, a = 1) => {
+		if (typeof r == 'string') r = $.color(r);
+		else if (b == undefined) {
+			// grayscale mode `fill(1, 0.5)`
+			a = g ?? 1;
+			g = b = r;
+		}
+		if (r._q5Color) colorsStack.push(r.r, r.g, r.b, r.a);
+		else colorsStack.push(r, g, b, a);
+		colorIndex++;
+	};
+
+	$.fill = (r, g, b, a) => {
+		addColor(r, g, b, a);
+		$._doFill = true;
+		$._fillIndex = colorIndex;
+	};
+	$.stroke = (r, g, b, a) => {
+		addColor(r, g, b, a);
+		$._doStroke = true;
+		$._strokeIndex = colorIndex;
+	};
+
+	$.noFill = () => ($._doFill = false);
+	$.noStroke = () => ($._doStroke = false);
+
+	$._strokeWeight = 1;
+	$.strokeWeight = (v) => ($._strokeWeight = Math.abs(v));
+
+	$._calcBox = (x, y, w, h, mode) => {
+		let hw = w / 2;
+		let hh = h / 2;
+
+		// left, right, top, bottom
+		let l, r, t, b;
+		if (!mode || mode == 'corner') {
+			// CORNER
+			l = x;
+			r = x + w;
+			t = -y;
+			b = -(y + h);
+		} else if (mode == 'center') {
+			l = x - hw;
+			r = x + hw;
+			t = -(y - hh);
+			b = -(y + hh);
+		} else {
+			// CORNERS
+			l = x;
+			r = w;
+			t = -y;
+			b = -h;
+		}
+
+		return [l, r, t, b];
+	};
+
+	$.clear = () => {};
+
 	$._beginRender = () => {
 		$.encoder = Q5.device.createCommandEncoder();
 
 		pass = q.pass = $.encoder.beginRenderPass({
+			label: 'q5-webgpu',
 			colorAttachments: [
 				{
 					view: ctx.getCurrentTexture().createView(),
@@ -3107,9 +3224,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	};
 
 	$._render = () => {
-		pass.setBindGroup(0, envBindGroup);
-
-		if (transformStates.length > 1 || !transformBindGroup) {
+		if (transformStates.length > 1 || !$._transformBindGroup) {
 			const transformBuffer = Q5.device.createBuffer({
 				size: transformStates.length * 64, // Size of 16 floats
 				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
@@ -3117,8 +3232,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 			Q5.device.queue.writeBuffer(transformBuffer, 0, new Float32Array(transformStates.flat()));
 
-			transformBindGroup = Q5.device.createBindGroup({
-				layout: $.bindGroupLayouts[1],
+			$._transformBindGroup = Q5.device.createBindGroup({
+				layout: $._transformLayout,
 				entries: [
 					{
 						binding: 0,
@@ -3130,27 +3245,39 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			});
 		}
 
-		pass.setBindGroup(1, transformBindGroup);
+		pass.setBindGroup(0, $._envBindGroup);
+		pass.setBindGroup(1, $._transformBindGroup);
 
-		// run pre-render methods
 		for (let m of $._hooks.preRender) m();
 
-		// local variables used for performance
-		let drawStack = $.drawStack;
-
 		let drawVertOffset = 0;
+		let imageVertOffset = 0;
 		let curPipelineIndex = -1;
+		let curTextureIndex = -1;
+
+		pass.setPipeline($.pipelines[0]);
 
 		for (let i = 0; i < drawStack.length; i += 2) {
+			let v = drawStack[i + 1];
+
 			if (curPipelineIndex != drawStack[i]) {
 				curPipelineIndex = drawStack[i];
 				pass.setPipeline($.pipelines[curPipelineIndex]);
 			}
 
-			let vertCount = drawStack[i + 1];
-			pass.draw(vertCount, 1, drawVertOffset, 0);
-			drawVertOffset += vertCount;
+			if (curPipelineIndex == 0) {
+				pass.draw(v, 1, drawVertOffset, 0);
+				drawVertOffset += v;
+			} else if (curPipelineIndex == 1) {
+				if (curTextureIndex != v) {
+					pass.setBindGroup(3, $._textureBindGroups[v]);
+				}
+				pass.draw(6, 1, imageVertOffset, 0);
+				imageVertOffset += 6;
+			}
 		}
+
+		for (let m of $._hooks.postRender) m();
 	};
 
 	$._finishRender = () => {
@@ -3160,48 +3287,15 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		q.pass = $.encoder = null;
 
 		// clear the stacks for the next frame
-		$.verticesStack.length = 0;
 		$.drawStack.length = 0;
 		$.colorsStack.length = 4;
-		$.pipelinesStack.length = 0;
-		$._colorIndex = 0;
+		colorIndex = 0;
 		rotation = 0;
 		$.resetMatrix();
 		$._matrixDirty = false;
 		$.transformStates.length = 1;
 		$._transformIndexStack.length = 0;
 	};
-
-	function addColor(r, g, b, a = 1) {
-		if (typeof r == 'string') r = Q5.color(r);
-		// grayscale mode `fill(1, 0.5)`
-		if (b == undefined) {
-			a = g;
-			g = b = r;
-		}
-		if (r._q5Color) colorsStack.push(...r.levels);
-		else colorsStack.push(r, g, b, a);
-		$._colorIndex++;
-	}
-
-	$.fill = function () {
-		addColor(...arguments);
-		$._doFill = true;
-		$._fillIndex = $._colorIndex;
-	};
-	$.stroke = function () {
-		addColor(...arguments);
-		$._doStroke = true;
-		$._fillIndex = $._colorIndex;
-	};
-
-	$.noFill = () => ($._doFill = false);
-	$.noStroke = () => ($._doStroke = false);
-
-	$._strokeWeight = 1;
-	$.strokeWeight = (v) => ($._strokeWeight = v);
-
-	$.clear = () => {};
 };
 
 Q5.webgpu = async function (scope, parent) {
@@ -3220,41 +3314,18 @@ Q5.webgpu = async function (scope, parent) {
 	return new Q5(scope, parent, 'webgpu');
 };
 Q5.renderers.webgpu.drawing = ($, q) => {
-	$.CLOSE = 1;
-
-	let verticesStack, drawStack, colorsStack;
-
-	$._hooks.postCanvas.push(() => {
-		let colorsLayout = Q5.device.createBindGroupLayout({
-			entries: [
-				{
-					binding: 0,
-					visibility: GPUShaderStage.FRAGMENT,
-					buffer: {
-						type: 'read-only-storage',
-						hasDynamicOffset: false
-					}
-				}
-			]
-		});
+	let c = $.canvas;
 
-		$.bindGroupLayouts.push(colorsLayout);
+	let drawStack = $.drawStack;
+	let colorsStack = $.colorsStack;
 
-		verticesStack = $.verticesStack;
-		drawStack = $.drawStack;
-		colorsStack = $.colorsStack;
+	let verticesStack = [];
 
-		let vertexBufferLayout = {
-			arrayStride: 16, // 2 coordinates + 1 color index + 1 transform index * 4 bytes each
-			attributes: [
-				{ format: 'float32x2', offset: 0, shaderLocation: 0 }, // position
-				{ format: 'float32', offset: 8, shaderLocation: 1 }, // colorIndex
-				{ format: 'float32', offset: 12, shaderLocation: 2 } // transformIndex
-			]
-		};
+	let colorIndex, colorsLayout;
 
-		let vertexShader = Q5.device.createShaderModule({
-			code: `
+	let vertexShader = Q5.device.createShaderModule({
+		label: 'drawingVertexShader',
+		code: `
 struct VertexOutput {
 	@builtin(position) position: vec4<f32>,
 	@location(1) colorIndex: f32
@@ -3281,10 +3352,11 @@ fn vertexMain(@location(0) pos: vec2<f32>, @location(1) colorIndex: f32, @locati
 	return output;
 }
 `
-		});
+	});
 
-		let fragmentShader = Q5.device.createShaderModule({
-			code: `
+	let fragmentShader = Q5.device.createShaderModule({
+		label: 'drawingFragmentShader',
+		code: `
 @group(2) @binding(0) var<storage, read> uColors : array<vec4<f32>>;
 
 @fragment
@@ -3293,31 +3365,31 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	return mix(uColors[index], uColors[index + 1u], fract(colorIndex));
 }
 `
-		});
+	});
 
-		let pipelineLayout = Q5.device.createPipelineLayout({
-			bindGroupLayouts: $.bindGroupLayouts
-		});
+	colorsLayout = Q5.device.createBindGroupLayout({
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				buffer: {
+					type: 'read-only-storage',
+					hasDynamicOffset: false
+				}
+			}
+		]
+	});
 
-		$._createPipeline = (blendConfig) => {
-			return Q5.device.createRenderPipeline({
-				layout: pipelineLayout,
-				vertex: {
-					module: vertexShader,
-					entryPoint: 'vertexMain',
-					buffers: [vertexBufferLayout]
-				},
-				fragment: {
-					module: fragmentShader,
-					entryPoint: 'fragmentMain',
-					targets: [{ format: 'bgra8unorm', blend: blendConfig }]
-				},
-				primitive: { topology: 'triangle-list' }
-			});
-		};
+	$.bindGroupLayouts.push(colorsLayout);
 
-		$.pipelines[0] = $._createPipeline(blendConfigs.normal);
-	});
+	let vertexBufferLayout = {
+		arrayStride: 16, // 2 coordinates + 1 color index + 1 transform index * 4 bytes each
+		attributes: [
+			{ format: 'float32x2', offset: 0, shaderLocation: 0 }, // position
+			{ format: 'float32', offset: 8, shaderLocation: 1 }, // colorIndex
+			{ format: 'float32', offset: 12, shaderLocation: 2 } // transformIndex
+		]
+	};
 
 	// prettier-ignore
 	let blendFactors = [
@@ -3362,7 +3434,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 	$.blendConfigs = {};
 
-	Object.entries(blendModes).forEach(([name, mode]) => {
+	for (const [name, mode] of Object.entries(blendModes)) {
 		$.blendConfigs[name] = {
 			color: {
 				srcFactor: blendFactors[mode[0]],
@@ -3375,7 +3447,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 				operation: blendOps[mode[5]]
 			}
 		};
-	});
+	}
 
 	$._blendMode = 'normal';
 	$.blendMode = (mode) => {
@@ -3386,6 +3458,31 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		$.pipelines[0] = $._createPipeline($.blendConfigs[mode]);
 	};
 
+	let pipelineLayout = Q5.device.createPipelineLayout({
+		label: 'drawingPipelineLayout',
+		bindGroupLayouts: $.bindGroupLayouts
+	});
+
+	$._createPipeline = (blendConfig) => {
+		return Q5.device.createRenderPipeline({
+			label: 'drawingPipeline',
+			layout: pipelineLayout,
+			vertex: {
+				module: vertexShader,
+				entryPoint: 'vertexMain',
+				buffers: [vertexBufferLayout]
+			},
+			fragment: {
+				module: fragmentShader,
+				entryPoint: 'fragmentMain',
+				targets: [{ format: 'bgra8unorm', blend: blendConfig }]
+			},
+			primitive: { topology: 'triangle-list' }
+		});
+	};
+
+	$.pipelines[0] = $._createPipeline($.blendConfigs.normal);
+
 	let shapeVertices;
 
 	$.beginShape = () => {
@@ -3394,7 +3491,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 	$.vertex = (x, y) => {
 		if ($._matrixDirty) $._saveMatrix();
-		shapeVertices.push(x, -y, $._colorIndex, $._transformIndex);
+		shapeVertices.push(x, -y, $._fillIndex, $._transformIndex);
 	};
 
 	$.endShape = (close) => {
@@ -3438,38 +3535,61 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		$.endShape(1);
 	};
 
-	$.rect = (x, y, w, h) => {
-		let hw = w / 2;
-		let hh = h / 2;
+	$.rectMode = (x) => ($._rectMode = x);
 
-		let left = x - hw;
-		let right = x + hw;
-		let top = -(y - hh); // y is inverted in WebGPU
-		let bottom = -(y + hh);
+	$.rect = (x, y, w, h) => {
+		let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode);
 
-		let ci = $._colorIndex;
+		let ci = colorIndex ?? $._fillIndex;
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._transformIndex;
 		// two triangles make a rectangle
 		// prettier-ignore
 		verticesStack.push(
-			left, top, ci, ti,
-			right, top, ci, ti,
-			left, bottom, ci, ti,
-			right, top, ci, ti,
-			left, bottom, ci, ti,
-			right, bottom, ci, ti
+			l, t, ci, ti,
+			r, t, ci, ti,
+			l, b, ci, ti,
+			r, t, ci, ti,
+			l, b, ci, ti,
+			r, b, ci, ti
 		);
 		drawStack.push(0, 6);
 	};
 
 	$.point = (x, y) => {
+		colorIndex = $._strokeIndex;
 		let sw = $._strokeWeight;
-		if (sw == 1) $.rect(x, y, 1, 1);
-		else $.ellipse(x, y, sw, sw);
+		if (sw < 2) {
+			sw = Math.round(sw);
+			$.rect(x, y, sw, sw);
+		} else $.ellipse(x, y, sw, sw);
+		colorIndex = null;
 	};
 
-	$.background = () => {};
+	$.line = (x1, y1, x2, y2) => {
+		colorIndex = $._strokeIndex;
+
+		$.push();
+		$.translate(x1, y1);
+		$.rotate($.atan2(y2 - y1, x2 - x1));
+		let length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+		let sw = $._strokeWeight;
+		$.rect(0, -sw / 2, length, sw);
+		$.pop();
+
+		colorIndex = null;
+	};
+
+	$.background = (r, g, b, a) => {
+		$.push();
+		$.resetMatrix();
+		if (r.src) $.image(r, -c.hw, -c.hh, c.w, c.h);
+		else {
+			$.fill(r, g, b, a);
+			$.rect(-c.hw, -c.hh, c.w, c.h);
+		}
+		$.pop();
+	};
 
 	/**
 	 * Derived from: ceil(Math.log(d) * 7) * 2 - ceil(28)
@@ -3479,9 +3599,10 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	 */
 	// prettier-ignore
 	const getArcSegments = (d) => 
-    d < 14 ? 8 :
-    d < 16 ? 10 :
-    d < 18 ? 12 :
+		d < 4 ? 6 :
+    d < 6 ? 8 :
+    d < 10 ? 10 :
+    d < 16 ? 12 :
     d < 20 ? 14 :
     d < 22 ? 16 :
     d < 24 ? 18 :
@@ -3515,7 +3636,7 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 		let t = 0; // theta
 		const angleIncrement = $.TAU / n;
-		const ci = $._colorIndex;
+		const ci = colorIndex ?? $._fillIndex;
 		if ($._matrixDirty) $._saveMatrix();
 		const ti = $._transformIndex;
 		let vx1, vy1, vx2, vy2;
@@ -3537,12 +3658,16 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
 
 	$._hooks.preRender.push(() => {
+		$.pass.setPipeline($.pipelines[0]);
+
+		const vertices = new Float32Array(verticesStack);
+
 		const vertexBuffer = Q5.device.createBuffer({
-			size: verticesStack.length * 6,
+			size: vertices.byteLength,
 			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 		});
 
-		Q5.device.queue.writeBuffer(vertexBuffer, 0, new Float32Array(verticesStack));
+		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
 		$.pass.setVertexBuffer(0, vertexBuffer);
 
 		const colorsBuffer = Q5.device.createBuffer({
@@ -3552,8 +3677,8 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 
 		Q5.device.queue.writeBuffer(colorsBuffer, 0, new Float32Array(colorsStack));
 
-		const colorsBindGroup = Q5.device.createBindGroup({
-			layout: $.bindGroupLayouts[2],
+		$._colorsBindGroup = Q5.device.createBindGroup({
+			layout: colorsLayout,
 			entries: [
 				{
 					binding: 0,
@@ -3567,136 +3692,206 @@ fn fragmentMain(@location(1) colorIndex: f32) -> @location(0) vec4<f32> {
 		});
 
 		// set the bind group once before rendering
-		$.pass.setBindGroup(2, colorsBindGroup);
+		$.pass.setBindGroup(2, $._colorsBindGroup);
+	});
+
+	$._hooks.postRender.push(() => {
+		verticesStack.length = 0;
 	});
 };
 Q5.renderers.webgpu.image = ($, q) => {
-	$.imageStack = [];
-	$.textures = [];
+	$._textureBindGroups = [];
+	let verticesStack = [];
 
-	$._hooks.postCanvas.push(() => {
-		let imageVertexShader = Q5.device.createShaderModule({
-			code: `
+	let vertexShader = Q5.device.createShaderModule({
+		label: 'imageVertexShader',
+		code: `
 struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) texCoord: vec2<f32>,
-    @location(1) textureIndex: f32
+	@builtin(position) position: vec4<f32>,
+	@location(0) texCoord: vec2<f32>
 };
 
 struct Uniforms {
-    halfWidth: f32,
-    halfHeight: f32
+	halfWidth: f32,
+	halfHeight: f32
 };
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
 @group(1) @binding(0) var<storage, read> transforms: array<mat4x4<f32>>;
 
 @vertex
-fn vertexMain(@location(0) pos: vec2<f32>, @location(1) texCoord: vec2<f32>, @location(2) transformIndex: f32, @location(3) textureIndex: f32) -> VertexOutput {
-    var vert = vec4<f32>(pos, 0.0, 1.0);
-    vert *= transforms[i32(transformIndex)];
-    vert.x /= uniforms.halfWidth;
-    vert.y /= uniforms.halfHeight;
-
-    var output: VertexOutput;
-    output.position = vert;
-    output.texCoord = texCoord;
-    output.textureIndex = textureIndex;
-    return output;
+fn vertexMain(@location(0) pos: vec2<f32>, @location(1) texCoord: vec2<f32>, @location(2) transformIndex: f32) -> VertexOutput {
+	var vert = vec4<f32>(pos, 0.0, 1.0);
+	vert *= transforms[i32(transformIndex)];
+	vert.x /= uniforms.halfWidth;
+	vert.y /= uniforms.halfHeight;
+
+	var output: VertexOutput;
+	output.position = vert;
+	output.texCoord = texCoord;
+	return output;
 }
-`
-		});
+	`
+	});
 
-		let imageFragmentShader = Q5.device.createShaderModule({
-			code: `
-@group(0) @binding(0) var samp: sampler;
-@group(0) @binding(1) var textures: array<texture_2d<f32>>;
+	let fragmentShader = Q5.device.createShaderModule({
+		label: 'imageFragmentShader',
+		code: `
+@group(3) @binding(0) var samp: sampler;
+@group(3) @binding(1) var texture: texture_2d<f32>;
 
 @fragment
-fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32) -> @location(0) vec4<f32> {
-    return textureSample(textures[i32(textureIndex)], samp, texCoord);
+fn fragmentMain(@location(0) texCoord: vec2<f32>) -> @location(0) vec4<f32> {
+	// Sample the texture using the interpolated texture coordinate
+	return textureSample(texture, samp, texCoord);
 }
-`
-		});
+	`
+	});
 
-		const bindGroupLayouts = [
-			Q5.device.createBindGroupLayout({
-				entries: [
-					{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
-					{ binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
-					{ binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { viewDimension: '2d', sampleType: 'float' } }
-				]
-			}),
-			Q5.device.createBindGroupLayout({
-				entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } }]
-			})
-		];
+	let textureLayout = Q5.device.createBindGroupLayout({
+		label: 'textureLayout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				sampler: { type: 'filtering' }
+			},
+			{
+				binding: 1,
+				visibility: GPUShaderStage.FRAGMENT,
+				texture: { viewDimension: '2d', sampleType: 'float' }
+			}
+		]
+	});
 
-		const pipelineLayout = Q5.device.createPipelineLayout({
-			bindGroupLayouts: bindGroupLayouts
-		});
+	const vertexBufferLayout = {
+		arrayStride: 20,
+		attributes: [
+			{ shaderLocation: 0, offset: 0, format: 'float32x2' },
+			{ shaderLocation: 1, offset: 8, format: 'float32x2' },
+			{ shaderLocation: 2, offset: 16, format: 'float32' } // transformIndex
+		]
+	};
 
-		$.pipelines[1] = Q5.device.createRenderPipeline({
-			layout: pipelineLayout,
-			vertex: {
-				module: imageVertexShader,
-				entryPoint: 'vertexMain',
-				buffers: [
-					{
-						arrayStride: 5 * 4, // 4 floats for position and texCoord, 1 float for textureIndex
-						attributes: [
-							{ shaderLocation: 0, offset: 0, format: 'float32x2' },
-							{ shaderLocation: 1, offset: 2 * 4, format: 'float32x2' },
-							{ shaderLocation: 2, offset: 4 * 4, format: 'float32' } // textureIndex
-						]
+	$.bindGroupLayouts.push(textureLayout);
+
+	const pipelineLayout = Q5.device.createPipelineLayout({
+		label: 'imagePipelineLayout',
+		bindGroupLayouts: $.bindGroupLayouts
+	});
+
+	$.pipelines[1] = Q5.device.createRenderPipeline({
+		label: 'imagePipeline',
+		layout: pipelineLayout,
+		vertex: {
+			module: vertexShader,
+			entryPoint: 'vertexMain',
+			buffers: [{ arrayStride: 0, attributes: [] }, vertexBufferLayout]
+		},
+		fragment: {
+			module: fragmentShader,
+			entryPoint: 'fragmentMain',
+			targets: [
+				{
+					format: 'bgra8unorm',
+					blend: $.blendConfigs?.normal || {
+						color: {
+							srcFactor: 'src-alpha',
+							dstFactor: 'one-minus-src-alpha',
+							operation: 'add'
+						},
+						alpha: {
+							srcFactor: 'src-alpha',
+							dstFactor: 'one-minus-src-alpha',
+							operation: 'add'
+						}
 					}
-				]
-			},
-			fragment: {
-				module: imageFragmentShader,
-				entryPoint: 'fragmentMain',
-				targets: [{ format: 'bgra8unorm' }]
-			},
-			primitive: {
-				topology: 'triangle-list'
-			}
-		});
+				}
+			]
+		},
+		primitive: {
+			topology: 'triangle-list'
+		}
+	});
 
-		$.sampler = Q5.device.createSampler({
-			magFilter: 'linear',
-			minFilter: 'linear'
-		});
+	let sampler = Q5.device.createSampler({
+		magFilter: 'linear',
+		minFilter: 'linear'
 	});
 
-	$.loadImage = async (src) => {
-		const img = new Image();
-		img.onload = async () => {
-			const imageBitmap = await createImageBitmap(img);
-			const texture = Q5.device.createTexture({
-				size: [img.width, img.height, 1],
-				format: 'bgra8unorm',
-				usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
-			});
+	$._createTexture = (img) => {
+		let textureSize = [img.width, img.height, 1];
+
+		const texture = Q5.device.createTexture({
+			size: textureSize,
+			format: 'bgra8unorm',
+			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+		});
 
-			Q5.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [img.width, img.height, 1]);
+		Q5.device.queue.copyExternalImageToTexture({ source: img }, { texture }, textureSize);
 
-			img.texture = texture;
-			img.index = $.textures.length;
-			$.textures.push(texture);
+		img.textureIndex = $._textureBindGroups.length;
+
+		const textureBindGroup = Q5.device.createBindGroup({
+			layout: textureLayout,
+			entries: [
+				{ binding: 0, resource: sampler },
+				{ binding: 1, resource: texture.createView() }
+			]
+		});
+		$._textureBindGroups.push(textureBindGroup);
+	};
+
+	$.loadImage = $.loadTexture = (src) => {
+		q._preloadCount++;
+		const img = new Image();
+		img.crossOrigin = 'Anonymous';
+		img.onload = () => {
+			$._createTexture(img);
+			q._preloadCount--;
 		};
-		img.onerror = reject;
 		img.src = src;
 		return img;
 	};
 
+	$.imageMode = (x) => ($._imageMode = x);
+
+	$.image = (img, x, y, w, h) => {
+		if (img.canvas) img = img.canvas;
+		if (img.textureIndex == undefined) return;
+
+		if ($._matrixDirty) $._saveMatrix();
+		let ti = $._transformIndex;
+
+		w ??= img.width;
+		h ??= img.height;
+
+		w /= $._pixelDensity;
+		h /= $._pixelDensity;
+
+		let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode);
+
+		// prettier-ignore
+		verticesStack.push(
+			l, t, 0, 0, ti,
+			r, t, 1, 0, ti,
+			l, b, 0, 1, ti,
+			r, t, 1, 0, ti,
+			l, b, 0, 1, ti,
+			r, b, 1, 1, ti
+		);
+
+		$.drawStack.push(1, img.textureIndex);
+	};
+
 	$._hooks.preRender.push(() => {
-		if (!$.imageStack.length) return;
+		if (!$._textureBindGroups.length) return;
 
 		// Switch to image pipeline
 		$.pass.setPipeline($.pipelines[1]);
 
 		// Create a vertex buffer for the image quads
-		const vertices = new Float32Array($.vertexStack);
+		const vertices = new Float32Array(verticesStack);
 
 		const vertexBuffer = Q5.device.createBuffer({
 			size: vertices.byteLength,
@@ -3704,57 +3899,48 @@ fn fragmentMain(@location(0) texCoord: vec2<f32>, @location(1) textureIndex: f32
 		});
 
 		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
-		$.pass.setVertexBuffer(0, vertexBuffer);
-
-		// Set the bind group for the sampler and textures
-		if ($.textures.length !== previousTextureCount) {
-			previousTextureCount = $.textures.length;
-
-			// Create the bind group for all textures
-			const textureViews = $.textures.map((tex) => tex.createView());
-
-			$.textureBindGroup = Q5.device.createBindGroup({
-				layout: $.pipelines[1].getBindGroupLayout(0),
-				entries: [
-					{ binding: 0, resource: $.sampler },
-					...textureViews.map((view, i) => ({ binding: i + 1, resource: view }))
-				]
-			});
-		}
-
-		// Set the bind group for the sampler and textures
-		$.pass.setBindGroup(0, $.textureBindGroup);
+		$.pass.setVertexBuffer(1, vertexBuffer);
 	});
 
-	$.image = (img, x, y, w, h) => {
-		if ($._matrixDirty) $._saveMatrix();
-		let ti = $._transformIndex;
-
-		$.imageStack.push(img.index);
-
-		// Calculate half-width and half-height
-		let hw = w / 2;
-		let hh = h / 2;
-
-		// Calculate vertices positions
-		let left = x - hw;
-		let right = x + hw;
-		let top = -(y - hh); // y is inverted in WebGPU
-		let bottom = -(y + hh);
+	$._hooks.postRender.push(() => {
+		verticesStack.length = 0;
+	});
+};
+Q5.renderers.webgpu.text = ($, q) => {
+	let t = $.createGraphics(1, 1);
 
-		let ii = img.index;
+	$.loadFont = (f) => {
+		q._preloadCount++;
+		return t.loadFont(f, () => {
+			q._preloadCount--;
+		});
+	};
+	$.textFont = t.textFont;
+	$.textSize = t.textSize;
+	$.textLeading = t.textLeading;
+	$.textStyle = t.textStyle;
+	$.textAlign = t.textAlign;
+	$.textWidth = t.textWidth;
+	$.textAscent = t.textAscent;
+	$.textDescent = t.textDescent;
 
-		// prettier-ignore
-		$.vertexStack.push(
-			left, top, 0, 0, ti, ii,
-			right, top, 1, 0, ti, ii,
-			left, bottom, 0, 1, ti, ii,
-			right, top, 1, 0, ti, ii,
-			left, bottom, 0, 1, ti, ii,
-			right, bottom, 1, 1, ti, ii
-		);
+	$.textFill = (r, g, b, a) => t.fill($.color(r, g, b, a));
+	$.textStroke = (r, g, b, a) => t.stroke($.color(r, g, b, a));
 
-		$.drawStack.push(6);
+	$.text = (str, x, y, w, h) => {
+		let img = t.createTextImage(str, w, h);
+
+		if (img.textureIndex == undefined) $._createTexture(img);
+
+		let og = t._imageMode;
+		t._imageMode = 'corner';
+		if (t.ctx.textAlign == 'center') x -= img.width * 0.5;
+		else if (t.ctx.textAlign == 'right') x -= img.width;
+		if (t.ctx.textBaseline == 'alphabetic') y -= t._textLeading;
+		if (t.ctx.textBaseline == 'middle') y -= img._descent + img._ascent * 0.5 + t._textLeadDiff;
+		else if (t.ctx.textBaseline == 'bottom') y -= img._ascent + img._descent + t._textLeadDiff;
+		else if (t.ctx.textBaseline == 'top') y -= img._descent + t._textLeadDiff;
+		$.image(img, x, y);
+		t._imageMode = og;
 	};
 };
-Q5.renderers.webgpu.text = ($, q) => {};