q5 2.5.5 → 2.7.0

package/q5.js

@@ -1,6 +1,6 @@
 /**
  * q5.js
- * @version 2.5
+ * @version 2.7
  * @author quinton-ashley, Tezumie, and LingDong-
  * @license LGPL-3.0
  * @class Q5
@@ -89,7 +89,13 @@ function Q5(scope, parent, renderer) {
 		$.resetMatrix();
 		if ($._beginRender) $._beginRender();
 		for (let m of Q5.methods.pre) m.call($);
-		$.draw();
+		try {
+			$.draw();
+		} catch (e) {
+			if (!Q5.disableFriendlyErrors && $._askAI) $._askAI(e);
+			if (!Q5.errorTolerant) $.noLoop();
+			throw e;
+		}
 		for (let m of Q5.methods.post) m.call($);
 		if ($._render) $._render();
 		if ($._finishRender) $._finishRender();
@@ -128,7 +134,7 @@ function Q5(scope, parent, renderer) {
 		}
 		return $._frameRate;
 	};
-	$.getTargetFrameRate = () => $._targetFrameRate;
+	$.getTargetFrameRate = () => $._targetFrameRate || 60;
 	$.getFPS = () => $._fps;
 
 	$.Element = function (a) {
@@ -196,10 +202,10 @@ function Q5(scope, parent, renderer) {
 	let t = globalScope || $;
 	$._isTouchAware = t.touchStarted || t.touchMoved || t.mouseReleased;
 	let preloadDefined = t.preload;
+	$.preload ??= () => {};
+	$.setup ??= () => {};
+	$.draw ??= () => {};
 	let userFns = [
-		'setup',
-		'draw',
-		'preload',
 		'mouseMoved',
 		'mousePressed',
 		'mouseReleased',
@@ -220,15 +226,13 @@ function Q5(scope, parent, renderer) {
 				try {
 					return t[k]();
 				} catch (e) {
-					if ($._aiErrorAssistance) $._aiErrorAssistance(e);
+					if ($._askAI) $._askAI(e);
 					throw e;
 				}
 			};
 		}
 	}
 
-	if (!($.setup || $.draw)) return;
-
 	async function _start() {
 		$._startDone = true;
 		if ($._preloadCount > 0) return raf(_start);
@@ -236,19 +240,25 @@ function Q5(scope, parent, renderer) {
 		await $.setup();
 		$._setupDone = true;
 		if ($.frameCount) return;
-		if ($.ctx === null) $.createCanvas(100, 100);
+		if ($.ctx === null) $.createCanvas(200, 200);
 		if ($.ctx) $.resetMatrix();
 		raf($._draw);
 	}
 
-	if ((arguments.length && scope != 'namespace' && renderer != 'webgpu') || preloadDefined) {
-		$.preload();
-		_start();
-	} else {
-		t.preload = $.preload = () => {
+	function _preStart() {
+		try {
+			$.preload();
 			if (!$._startDone) _start();
-		};
-		setTimeout($.preload, 32);
+		} catch (e) {
+			if ($._askAI) $._askAI(e);
+			throw e;
+		}
+	}
+
+	if (preloadDefined || (arguments.length && scope != 'instance' && renderer != 'webgpu')) {
+		_preStart();
+	} else {
+		setTimeout(_preStart, 32);
 	}
 }
 
@@ -259,7 +269,7 @@ Q5._nodejs = typeof process == 'object';
 
 Q5._instanceCount = 0;
 Q5._friendlyError = (msg, func) => {
-	throw Error(func + ': ' + msg);
+	if (!Q5.disableFriendlyErrors) console.error(func + ': ' + msg);
 };
 Q5._validateParameters = () => true;
 
@@ -386,8 +396,15 @@ Q5.modules.canvas = ($, q) => {
 		if ($._scope != 'image') {
 			if ($._scope == 'graphics') $._pixelDensity = this._pixelDensity;
 			else if (window.IntersectionObserver) {
+				$._wasLooping = $._loop;
 				new IntersectionObserver((e) => {
 					c.visible = e[0].isIntersecting;
+					if (c.visible) {
+						if ($._wasLooping && !$._loop) $.loop();
+					} else {
+						$._wasLooping = $._loop;
+						$.noLoop();
+					}
 				}).observe(c);
 			}
 		}
@@ -635,8 +652,7 @@ Q5.renderers.q2d.canvas = ($, q) => {
 	};
 
 	$.fill = function (c) {
-		$._doFill = true;
-		$._fillSet = true;
+		$._doFill = $._fillSet = true;
 		if (Q5.Color) {
 			if (!c._q5Color) {
 				if (typeof c != 'string') c = $.color(...arguments);
@@ -648,8 +664,7 @@ Q5.renderers.q2d.canvas = ($, q) => {
 	};
 	$.noFill = () => ($._doFill = false);
 	$.stroke = function (c) {
-		$._doStroke = true;
-		$._strokeSet = true;
+		$._doStroke = $._strokeSet = true;
 		if (Q5.Color) {
 			if (!c._q5Color) {
 				if (typeof c != 'string') c = $.color(...arguments);
@@ -753,7 +768,7 @@ Q5.renderers.q2d.drawing = ($) => {
 	$.background = function (c) {
 		$.ctx.save();
 		$.ctx.resetTransform();
-		if (c.canvas) $.image(c, 0, 0, $.width, $.height);
+		if (c.canvas) $.image(c, 0, 0, $.canvas.width, $.canvas.height);
 		else {
 			if (Q5.Color && !c._q5Color) {
 				if (typeof c != 'string') c = $.color(...arguments);
@@ -1226,7 +1241,8 @@ Q5.renderers.q2d.image = ($, q) => {
 
 	$.imageMode = (mode) => ($._imageMode = mode);
 	$.image = (img, dx, dy, dw, dh, sx = 0, sy = 0, sw, sh) => {
-		let drawable = img.canvas || img;
+		if (!img) return;
+		let drawable = img?.canvas || img;
 		if (Q5._createNodeJSCanvas) {
 			drawable = drawable.context.canvas;
 		}
@@ -1680,13 +1696,12 @@ Q5.renderers.q2d.text = ($, q) => {
 };
 Q5.modules.ai = ($) => {
 	$.askAI = (question = '') => {
+		Q5.disableFriendlyErrors = false;
 		throw Error('Ask AI ✨ ' + question);
 	};
 
-	$._aiErrorAssistance = async (e) => {
+	$._askAI = async (e) => {
 		let askAI = e.message?.includes('Ask AI ✨');
-		if (Q5.disableFriendlyErrors && !askAI) return;
-		if (askAI || !Q5.errorTolerant) $.noLoop();
 		let stackLines = e.stack?.split('\n');
 		if (!e.stack || stackLines.length <= 1) return;
 
@@ -2108,11 +2123,11 @@ Q5.modules.input = ($, q) => {
 	$.pmouseX = 0;
 	$.pmouseY = 0;
 	$.touches = [];
-	$.mouseButton = null;
+	$.mouseButton = '';
 	$.keyIsPressed = false;
 	$.mouseIsPressed = false;
-	$.key = null;
-	$.keyCode = null;
+	$.key = '';
+	$.keyCode = 0;
 
 	$.UP_ARROW = 38;
 	$.DOWN_ARROW = 40;
@@ -3075,18 +3090,30 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	c.width = $.width = 500;
 	c.height = $.height = 500;
 
-	if ($.colorMode) $.colorMode('rgb', 'float');
+	if ($.colorMode) $.colorMode('rgb', 1);
 
-	let pass;
+	let pass,
+		mainView,
+		colorsLayout,
+		colorIndex = 1,
+		colorStackIndex = 8;
 
-	$.pipelines = [];
+	$._pipelineConfigs = [];
+	$._pipelines = [];
 
 	// local variables used for slightly better performance
 	// stores pipeline shifts and vertex counts/image indices
 	let drawStack = ($.drawStack = []);
 
 	// colors used for each draw call
-	let colorsStack = ($.colorsStack = [1, 1, 1, 1]);
+
+	let colorStack = ($.colorStack = new Float32Array(1e6));
+
+	// prettier-ignore
+	colorStack.set([
+		0, 0, 0, 1, // black
+		1, 1, 1, 1 // white
+	]);
 
 	$._transformLayout = Q5.device.createBindGroupLayout({
 		label: 'transformLayout',
@@ -3110,32 +3137,70 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		]
 	});
 
-	$.bindGroupLayouts = [$._transformLayout];
+	colorsLayout = Q5.device.createBindGroupLayout({
+		label: 'colorsLayout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+				buffer: {
+					type: 'read-only-storage',
+					hasDynamicOffset: false
+				}
+			}
+		]
+	});
+
+	$.bindGroupLayouts = [$._transformLayout, colorsLayout];
 
 	let uniformBuffer = Q5.device.createBuffer({
 		size: 8, // Size of two floats
 		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 	});
 
+	let createMainView = () => {
+		mainView = Q5.device
+			.createTexture({
+				size: [$.canvas.width, $.canvas.height],
+				sampleCount: 4,
+				format: 'bgra8unorm',
+				usage: GPUTextureUsage.RENDER_ATTACHMENT
+			})
+			.createView();
+	};
+
 	$._createCanvas = (w, h, opt) => {
 		q.ctx = q.drawingContext = c.getContext('webgpu');
 
 		opt.format ??= navigator.gpu.getPreferredCanvasFormat();
 		opt.device ??= Q5.device;
 
+		// needed for other blend modes but couldn't get it working
+		// opt.alphaMode = 'premultiplied';
+
 		$.ctx.configure(opt);
 
 		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array([$.canvas.hw, $.canvas.hh]));
 
+		createMainView();
+
 		return c;
 	};
 
 	$._resizeCanvas = (w, h) => {
 		$._setCanvasSize(w, h);
+		createMainView();
+	};
+
+	$.pixelDensity = (v) => {
+		if (!v || v == $._pixelDensity) return $._pixelDensity;
+		$._pixelDensity = v;
+		$._setCanvasSize(c.w, c.h);
+		createMainView();
+		return v;
 	};
 
 	// current color index, used to associate a vertex with a color
-	let colorIndex = 0;
 	let addColor = (r, g, b, a = 1) => {
 		if (typeof r == 'string') r = $.color(r);
 		else if (b == undefined) {
@@ -3143,21 +3208,35 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			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);
+		if (r._q5Color) {
+			a = r.a;
+			b = r.b;
+			g = r.g;
+			r = r.r;
+		}
+
+		let cs = colorStack,
+			i = colorStackIndex;
+		cs[i++] = r;
+		cs[i++] = g;
+		cs[i++] = b;
+		cs[i++] = a;
+		colorStackIndex = i;
+
 		colorIndex++;
 	};
 
-	$._fillIndex = $._strokeIndex = -1;
+	$._fillIndex = $._strokeIndex = 0;
+	$._doFill = $._doStroke = true;
 
 	$.fill = (r, g, b, a) => {
 		addColor(r, g, b, a);
-		$._doFill = true;
+		$._doFill = $._fillSet = true;
 		$._fillIndex = colorIndex;
 	};
 	$.stroke = (r, g, b, a) => {
 		addColor(r, g, b, a);
-		$._doStroke = true;
+		$._doStroke = $._strokeSet = true;
 		$._strokeIndex = colorIndex;
 	};
 
@@ -3359,6 +3438,68 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		return [l, r, t, b];
 	};
 
+	// prettier-ignore
+	let blendFactors = [
+			'zero',                // 0
+			'one',                 // 1
+			'src-alpha',           // 2
+			'one-minus-src-alpha', // 3
+			'dst',                 // 4
+			'dst-alpha',           // 5
+			'one-minus-dst-alpha', // 6
+			'one-minus-src'        // 7
+	];
+	let blendOps = [
+		'add', // 0
+		'subtract', // 1
+		'reverse-subtract', // 2
+		'min', // 3
+		'max' // 4
+	];
+
+	const blendModes = {
+		normal: [2, 3, 0, 2, 3, 0],
+		// destination_over: [6, 1, 0, 6, 1, 0],
+		additive: [1, 1, 0, 1, 1, 0]
+		// source_in: [5, 0, 0, 5, 0, 0],
+		// destination_in: [0, 2, 0, 0, 2, 0],
+		// source_out: [6, 0, 0, 6, 0, 0],
+		// destination_out: [0, 3, 0, 0, 3, 0],
+		// source_atop: [5, 3, 0, 5, 3, 0],
+		// destination_atop: [6, 2, 0, 6, 2, 0]
+	};
+
+	$.blendConfigs = {};
+
+	for (const [name, mode] of Object.entries(blendModes)) {
+		$.blendConfigs[name] = {
+			color: {
+				srcFactor: blendFactors[mode[0]],
+				dstFactor: blendFactors[mode[1]],
+				operation: blendOps[mode[2]]
+			},
+			alpha: {
+				srcFactor: blendFactors[mode[3]],
+				dstFactor: blendFactors[mode[4]],
+				operation: blendOps[mode[5]]
+			}
+		};
+	}
+
+	$._blendMode = 'normal';
+	$.blendMode = (mode) => {
+		if (mode == $._blendMode) return;
+		if (mode == 'source-over') mode = 'normal';
+		if (mode == 'lighter') mode = 'additive';
+		mode = mode.toLowerCase().replace(/[ -]/g, '_');
+		$._blendMode = mode;
+
+		for (let i = 0; i < $._pipelines.length; i++) {
+			$._pipelineConfigs[i].fragment.targets[0].blend = $.blendConfigs[mode];
+			$._pipelines[i] = Q5.device.createRenderPipeline($._pipelineConfigs[i]);
+		}
+	};
+
 	$.clear = () => {};
 
 	$._beginRender = () => {
@@ -3368,7 +3509,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			label: 'q5-webgpu',
 			colorAttachments: [
 				{
-					view: $.ctx.getCurrentTexture().createView(),
+					view: mainView,
+					resolveTarget: $.ctx.getCurrentTexture().createView(),
 					loadOp: 'clear',
 					storeOp: 'store'
 				}
@@ -3379,58 +3521,62 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	$._render = () => {
 		if (transformStates.length > 1 || !$._transformBindGroup) {
 			let transformBuffer = Q5.device.createBuffer({
-				size: transformStates.length * 64, // Size of 16 floats
-				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+				size: transformStates.length * 64, // 64 is the size of 16 floats
+				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+				mappedAtCreation: true
 			});
 
-			Q5.device.queue.writeBuffer(transformBuffer, 0, new Float32Array(transformStates.flat()));
+			new Float32Array(transformBuffer.getMappedRange()).set(transformStates.flat());
+			transformBuffer.unmap();
 
 			$._transformBindGroup = Q5.device.createBindGroup({
 				layout: $._transformLayout,
 				entries: [
-					{
-						binding: 0,
-						resource: {
-							buffer: uniformBuffer
-						}
-					},
-					{
-						binding: 1,
-						resource: {
-							buffer: transformBuffer
-						}
-					}
+					{ binding: 0, resource: { buffer: uniformBuffer } },
+					{ binding: 1, resource: { buffer: transformBuffer } }
 				]
 			});
 		}
 
 		pass.setBindGroup(0, $._transformBindGroup);
 
+		let colorsBuffer = Q5.device.createBuffer({
+			size: colorStackIndex * 4,
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
+		});
+
+		new Float32Array(colorsBuffer.getMappedRange()).set(colorStack.slice(0, colorStackIndex));
+		colorsBuffer.unmap();
+
+		$._colorsBindGroup = Q5.device.createBindGroup({
+			layout: colorsLayout,
+			entries: [{ binding: 0, resource: { buffer: colorsBuffer } }]
+		});
+
+		$.pass.setBindGroup(1, $._colorsBindGroup);
+
 		for (let m of $._hooks.preRender) m();
 
-		let drawVertOffset = 0;
-		let imageVertOffset = 0;
-		let textCharOffset = 0;
-		let curPipelineIndex = -1;
-		let curTextureIndex = -1;
+		let drawVertOffset = 0,
+			imageVertOffset = 0,
+			textCharOffset = 0,
+			curPipelineIndex = -1,
+			curTextureIndex = -1;
 
-		for (let i = 0; i < drawStack.length; i += 2) {
+		for (let i = 0; i < drawStack.length; i += 3) {
 			let v = drawStack[i + 1];
-
-			if (drawStack[i] == -1) {
-				v();
-				continue;
-			}
+			let o = drawStack[i + 2];
 
 			if (curPipelineIndex != drawStack[i]) {
 				curPipelineIndex = drawStack[i];
-				pass.setPipeline($.pipelines[curPipelineIndex]);
+				pass.setPipeline($._pipelines[curPipelineIndex]);
 			}
 
 			if (curPipelineIndex == 0) {
 				// v is the number of vertices
-				pass.draw(v, 1, drawVertOffset);
-				drawVertOffset += v;
+				pass.drawIndexed(v, 1, 0, drawVertOffset);
+				drawVertOffset += o;
 			} else if (curPipelineIndex == 1) {
 				if (curTextureIndex != v) {
 					// v is the texture index
@@ -3439,7 +3585,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				pass.draw(6, 1, imageVertOffset);
 				imageVertOffset += 6;
 			} else if (curPipelineIndex == 2) {
-				pass.setBindGroup(2, $._font.bindGroup);
+				pass.setBindGroup(2, $._fonts[o].bindGroup);
 				pass.setBindGroup(3, $._textBindGroup);
 
 				// v is the number of characters in the text
@@ -3455,12 +3601,13 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		pass.end();
 		let commandBuffer = $.encoder.finish();
 		Q5.device.queue.submit([commandBuffer]);
+
 		q.pass = $.encoder = null;
 
 		// clear the stacks for the next frame
 		$.drawStack.length = 0;
-		$.colorsStack.length = 4;
-		colorIndex = 0;
+		colorIndex = 1;
+		colorStackIndex = 8;
 		rotation = 0;
 		transformStates.length = 1;
 		$._transformIndexStack.length = 0;
@@ -3491,41 +3638,47 @@ Q5.webgpu = async function (scope, parent) {
 	return new Q5(scope, parent, 'webgpu');
 };
 Q5.renderers.webgpu.drawing = ($, q) => {
-	let c = $.canvas;
-
-	let drawStack = $.drawStack;
-	let colorsStack = $.colorsStack;
-
-	let verticesStack = [];
-
-	let colorIndex, colorsLayout;
+	let c = $.canvas,
+		drawStack = $.drawStack,
+		vertexStack = new Float32Array(1e7),
+		indexStack = new Uint32Array(1e6),
+		vertIndex = 0,
+		vertCount = 0,
+		idxBufferIndex = 0,
+		colorIndex;
 
 	let vertexShader = Q5.device.createShaderModule({
 		label: 'drawingVertexShader',
 		code: `
+struct VertexInput {
+	@location(0) pos: vec2f,
+	@location(1) colorIndex: f32,
+	@location(2) transformIndex: f32
+}
 struct VertexOutput {
 	@builtin(position) position: vec4f,
-	@location(0) colorIndex: f32
-};
-
+	@location(0) color: vec4f
+}
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
-};
+}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
+
+@group(1) @binding(0) var<storage> colors : array<vec4f>;
 
 @vertex
-fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2) transformIndex: f32) -> VertexOutput {
-	var vert = vec4f(pos, 0.0, 1.0);
-	vert = transforms[i32(transformIndex)] * vert;
+fn vertexMain(input: VertexInput) -> VertexOutput {
+	var vert = vec4f(input.pos, 0.0, 1.0);
+	vert = transforms[i32(input.transformIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
 
 	var output: VertexOutput;
 	output.position = vert;
-	output.colorIndex = colorIndex;
+	output.color = colors[i32(input.colorIndex)];
 	return output;
 }
 `
@@ -3534,32 +3687,13 @@ fn vertexMain(@location(0) pos: vec2f, @location(1) colorIndex: f32, @location(2
 	let fragmentShader = Q5.device.createShaderModule({
 		label: 'drawingFragmentShader',
 		code: `
-@group(1) @binding(0) var<storage, read> colors : array<vec4f>;
-
 @fragment
-fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
-	let index = i32(colorIndex);
-	return mix(colors[index], colors[index + 1], fract(colorIndex));
+fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
+	return color;
 }
 `
 	});
 
-	colorsLayout = Q5.device.createBindGroupLayout({
-		label: 'colorsLayout',
-		entries: [
-			{
-				binding: 0,
-				visibility: GPUShaderStage.FRAGMENT,
-				buffer: {
-					type: 'read-only-storage',
-					hasDynamicOffset: false
-				}
-			}
-		]
-	});
-
-	$.bindGroupLayouts.push(colorsLayout);
-
 	let vertexBufferLayout = {
 		arrayStride: 16, // 2 coordinates + 1 color index + 1 transform index * 4 bytes each
 		attributes: [
@@ -3569,193 +3703,212 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
 		]
 	};
 
-	// prettier-ignore
-	let blendFactors = [
-			'zero',                // 0
-			'one',                 // 1
-			'src-alpha',           // 2
-			'one-minus-src-alpha', // 3
-			'dst',                 // 4
-			'dst-alpha',           // 5
-			'one-minus-dst-alpha', // 6
-			'one-minus-src'        // 7
-	];
-	let blendOps = [
-		'add', // 0
-		'subtract', // 1
-		'reverse-subtract', // 2
-		'min', // 3
-		'max' // 4
-	];
-
-	const blendModes = {
-		normal: [2, 3, 0, 2, 3, 0],
-		lighter: [2, 1, 0, 2, 1, 0],
-		subtract: [2, 1, 2, 2, 1, 2],
-		multiply: [4, 0, 0, 5, 0, 0],
-		screen: [1, 3, 0, 1, 3, 0],
-		darken: [1, 3, 3, 1, 3, 3],
-		lighten: [1, 3, 4, 1, 3, 4],
-		overlay: [2, 3, 0, 2, 3, 0],
-		hard_light: [2, 3, 0, 2, 3, 0],
-		soft_light: [2, 3, 0, 2, 3, 0],
-		difference: [2, 3, 2, 2, 3, 2],
-		exclusion: [2, 3, 0, 2, 3, 0],
-		color_dodge: [1, 7, 0, 1, 7, 0],
-		color_burn: [6, 1, 0, 6, 1, 0],
-		linear_dodge: [2, 1, 0, 2, 1, 0],
-		linear_burn: [2, 7, 1, 2, 7, 1],
-		vivid_light: [2, 7, 0, 2, 7, 0],
-		pin_light: [2, 7, 0, 2, 7, 0],
-		hard_mix: [2, 7, 0, 2, 7, 0]
-	};
-
-	$.blendConfigs = {};
-
-	for (const [name, mode] of Object.entries(blendModes)) {
-		$.blendConfigs[name] = {
-			color: {
-				srcFactor: blendFactors[mode[0]],
-				dstFactor: blendFactors[mode[1]],
-				operation: blendOps[mode[2]]
-			},
-			alpha: {
-				srcFactor: blendFactors[mode[3]],
-				dstFactor: blendFactors[mode[4]],
-				operation: blendOps[mode[5]]
-			}
-		};
-	}
-
-	$._blendMode = 'normal';
-	$.blendMode = (mode) => {
-		if (mode == $._blendMode) return;
-		if (mode == 'source-over') mode = 'normal';
-		mode = mode.toLowerCase().replace(/[ -]/g, '_');
-		$._blendMode = mode;
-		$.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' }
-		});
+	$._pipelineConfigs[0] = {
+		label: 'drawingPipeline',
+		layout: pipelineLayout,
+		vertex: {
+			module: vertexShader,
+			entryPoint: 'vertexMain',
+			buffers: [vertexBufferLayout]
+		},
+		fragment: {
+			module: fragmentShader,
+			entryPoint: 'fragmentMain',
+			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
+		},
+		primitive: { topology: 'triangle-list' },
+		multisample: {
+			count: 4
+		}
+	};
+
+	$._pipelines[0] = Q5.device.createRenderPipeline($._pipelineConfigs[0]);
+
+	const addVert = (x, y, ci, ti) => {
+		let v = vertexStack,
+			i = vertIndex;
+		v[i++] = x;
+		v[i++] = y;
+		v[i++] = ci;
+		v[i++] = ti;
+		vertIndex = i;
+		vertCount++;
+	};
+
+	const addIndex = (i1, i2, i3) => {
+		let is = indexStack,
+			ii = idxBufferIndex;
+		is[ii++] = i1;
+		is[ii++] = i2;
+		is[ii++] = i3;
+		idxBufferIndex = ii;
+	};
+
+	const addQuad = (x1, y1, x2, y2, x3, y3, x4, y4, ci, ti) => {
+		let v = vertexStack,
+			i = vertIndex;
+
+		let i1 = vertCount++;
+		v[i++] = x1;
+		v[i++] = y1;
+		v[i++] = ci;
+		v[i++] = ti;
+
+		let i2 = vertCount++;
+		v[i++] = x2;
+		v[i++] = y2;
+		v[i++] = ci;
+		v[i++] = ti;
+
+		let i3 = vertCount++;
+		v[i++] = x3;
+		v[i++] = y3;
+		v[i++] = ci;
+		v[i++] = ti;
+
+		let i4 = vertCount++;
+		v[i++] = x4;
+		v[i++] = y4;
+		v[i++] = ci;
+		v[i++] = ti;
+
+		vertIndex = i;
+
+		let is = indexStack,
+			ii = idxBufferIndex;
+		is[ii++] = i1;
+		is[ii++] = i2;
+		is[ii++] = i3;
+		is[ii++] = i1;
+		is[ii++] = i3;
+		is[ii++] = i4;
+		idxBufferIndex = ii;
+
+		drawStack.push(0, 6, 4);
+	};
+
+	const addEllipse = (x, y, a, b, n, ci, ti) => {
+		let t = 0,
+			angleIncrement = $.TAU / n,
+			indicesStart = vertIndex / 4;
+		addVert(x, y, ci, ti); // Center vertex
+		for (let i = 0; i <= n; i++) {
+			let vx = x + a * Math.cos(t),
+				vy = y + b * Math.sin(t);
+			addVert(vx, vy, ci, ti);
+			if (i > 0) {
+				addIndex(indicesStart, indicesStart + i, indicesStart + i + 1);
+			}
+			t += angleIncrement;
+		}
+		drawStack.push(0, n * 3, n + 2);
 	};
 
-	$.pipelines[0] = $._createPipeline($.blendConfigs.normal);
+	$.rectMode = (x) => ($._rectMode = x);
 
-	let shapeVertices;
+	$.rect = (x, y, w, h) => {
+		let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode);
+		let ci, ti;
+		if ($._matrixDirty) $._saveMatrix();
+		ti = $._transformIndex;
 
-	$.beginShape = () => {
-		shapeVertices = [];
-	};
+		if ($._doStroke) {
+			ci = $._strokeIndex;
 
-	$.vertex = (x, y) => {
-		if ($._matrixDirty) $._saveMatrix();
-		shapeVertices.push(x, -y, $._fillIndex, $._transformIndex);
-	};
+			// outer rectangle coordinates
+			let sw = $._strokeWeight / 2;
+			let to = t + sw,
+				bo = b - sw,
+				lo = l - sw,
+				ro = r + sw;
 
-	$.endShape = (close) => {
-		if (!$._doFill) {
-			shapeVertices = [];
-			return;
-		}
-		let v = shapeVertices;
-		if (v.length < 12) {
-			throw new Error('A shape must have at least 3 vertices.');
-		}
-		if (close) {
-			// Close the shape by adding the first vertex at the end
-			v.push(v[0], v[1], v[2], v[3]);
-		}
-		// Convert the shape to triangles
-		let triangles = [];
-		for (let i = 4; i < v.length; i += 4) {
-			triangles.push(
-				v[0], // First vertex
-				v[1],
-				v[2],
-				v[3],
-				v[i - 4], // Previous vertex
-				v[i - 3],
-				v[i - 2],
-				v[i - 1],
-				v[i], // Current vertex
-				v[i + 1],
-				v[i + 2],
-				v[i + 3]
-			);
+			// stroke is simply a bigger rectangle drawn first
+			addQuad(lo, to, ro, to, ro, bo, lo, bo, ci, ti);
+
+			// inner rectangle coordinates
+			t -= sw;
+			b += sw;
+			l += sw;
+			r -= sw;
 		}
-		shapeVertices = [];
 
-		verticesStack.push(...triangles);
-		drawStack.push(0, triangles.length / 4);
-	};
+		if ($._doFill) {
+			ci = colorIndex ?? $._fillIndex;
 
-	$.triangle = (x1, y1, x2, y2, x3, y3) => {
-		$.beginShape();
-		$.vertex(x1, y1);
-		$.vertex(x2, y2);
-		$.vertex(x3, y3);
-		$.endShape(1);
+			// two triangles make a rectangle
+			addQuad(l, t, r, t, r, b, l, b, ci, ti);
+		}
 	};
 
-	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
-		$.beginShape();
-		$.vertex(x1, y1);
-		$.vertex(x2, y2);
-		$.vertex(x3, y3);
-		$.vertex(x4, y4);
-		$.endShape(1);
-	};
+	$.square = (x, y, s) => $.rect(x, y, s, s);
 
-	$.rectMode = (x) => ($._rectMode = x);
+	// prettier-ignore
+	const getArcSegments = (d) =>
+		d < 4 ? 6 :
+		d < 6 ? 8 :
+		d < 10 ? 10 :
+		d < 16 ? 12 :
+		d < 20 ? 14 :
+		d < 22 ? 16 :
+		d < 24 ? 18 :
+		d < 28 ? 20 :
+		d < 34 ? 22 :
+		d < 42 ? 24 :
+		d < 48 ? 26 :
+		d < 56 ? 28 :
+		d < 64 ? 30 :
+		d < 72 ? 32 :
+		d < 84 ? 34 :
+		d < 96 ? 36 :
+		d < 98 ? 38 :
+		d < 113 ? 40 :
+		d < 149 ? 44 :
+		d < 199 ? 48 :
+		d < 261 ? 52 :
+		d < 353 ? 56 :
+		d < 461 ? 60 :
+		d < 585 ? 64 :
+		d < 1200 ? 70 :
+		d < 1800 ? 80 :
+		d < 2400 ? 90 :
+		100;
 
-	$.rect = (x, y, w, h) => {
-		let [l, r, t, b] = $._calcBox(x, y, w, h, $._rectMode);
+	$.ellipseMode = (x) => ($._ellipseMode = x);
 
-		let ci = colorIndex ?? $._fillIndex;
+	$.ellipse = (x, y, w, h) => {
+		let n = getArcSegments(w == h ? w : Math.max(w, h));
+		let a = Math.max(w, 1) / 2;
+		let b = w == h ? a : Math.max(h, 1) / 2;
+		let ci;
 		if ($._matrixDirty) $._saveMatrix();
 		let ti = $._transformIndex;
-		// two triangles make a rectangle
-		// prettier-ignore
-		verticesStack.push(
-			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);
+		if ($._doStroke) {
+			let sw = $._strokeWeight / 2;
+			addEllipse(x, y, a + sw, b + sw, n, $._strokeIndex, ti);
+			a -= sw;
+			b -= sw;
+		}
+		if ($._doFill) {
+			addEllipse(x, y, a, b, n, colorIndex ?? $._fillIndex, ti);
+		}
 	};
 
-	$.square = (x, y, s) => $.rect(x, y, s, s);
+	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
 
 	$.point = (x, y) => {
 		colorIndex = $._strokeIndex;
+		$._doStroke = false;
 		let sw = $._strokeWeight;
 		if (sw < 2) {
 			sw = Math.round(sw);
 			$.rect(x, y, sw, sw);
 		} else $.ellipse(x, y, sw, sw);
+		$._doStroke = true;
 		colorIndex = null;
 	};
 
@@ -3763,19 +3916,97 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
 		colorIndex = $._strokeIndex;
 
 		$.push();
-		$.translate(x1, y1);
+		$._doStroke = false;
+		$.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);
+		let sw = $._strokeWeight,
+			hsw = sw / 2;
+		$._rectMode = 'corner';
+		if (sw < 4) {
+			$.rect(-hsw, -hsw, length + hsw, sw);
+		} else {
+			$._ellipseMode = 'center';
+			$.ellipse(0, 0, sw, sw);
+			$.ellipse(length, 0, sw, sw);
+			$.rect(0, -hsw, length, sw);
+		}
+
 		$.pop();
 
 		colorIndex = null;
 	};
 
+	let shapeVertCount;
+
+	$.beginShape = () => {
+		shapeVertCount = 0;
+	};
+
+	$.vertex = (x, y) => {
+		if ($._matrixDirty) $._saveMatrix();
+		addVert(x, -y, $._fillIndex, $._transformIndex);
+		shapeVertCount++;
+	};
+
+	$.endShape = (close) => {
+		if (shapeVertCount < 3) {
+			throw new Error('A shape must have at least 3 vertices.');
+		}
+
+		let firstVert = vertCount - shapeVertCount;
+
+		if ($._doFill) {
+			// make a simple triangle fan, starting from the first vertex
+			for (let i = firstVert + 1; i < vertCount - 1; i++) {
+				addIndex(firstVert, i, i + 1);
+			}
+			drawStack.push(0, (shapeVertCount - 2) * 3, shapeVertCount);
+		}
+
+		if ($._doStroke) {
+			let first = firstVert * 4,
+				last = vertIndex - 4;
+			for (let i = first; i < last; i += 4) {
+				let x1 = vertexStack[i],
+					y1 = vertexStack[i + 1],
+					x2 = vertexStack[i + 4],
+					y2 = vertexStack[i + 5];
+				$.line(x1, y1, x2, y2);
+			}
+			if (close) {
+				let x1 = vertexStack[last],
+					y1 = vertexStack[last + 1],
+					x2 = vertexStack[first],
+					y2 = vertexStack[first + 1];
+				$.line(x1, y1, x2, y2);
+			}
+		}
+
+		shapeVertCount = 0;
+	};
+
+	$.triangle = (x1, y1, x2, y2, x3, y3) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.endShape();
+	};
+
+	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.vertex(x4, y4);
+		$.endShape();
+	};
+
 	$.background = (r, g, b, a) => {
 		$.push();
 		$.resetMatrix();
+		$._doStroke = false;
 		if (r.src) {
 			let og = $._imageMode;
 			$._imageMode = 'corner';
@@ -3789,121 +4020,44 @@ fn fragmentMain(@location(0) colorIndex: f32) -> @location(0) vec4f {
 			$._rectMode = og;
 		}
 		$.pop();
+		if (!$._fillSet) $._fillIndex = 1;
 	};
 
-	/**
-	 * Derived from: ceil(Math.log(d) * 7) * 2 - ceil(28)
-	 * This lookup table is used for better performance.
-	 * @param {Number} d diameter of the circle
-	 * @returns n number of segments
-	 */
-	// prettier-ignore
-	const getArcSegments = (d) => 
-		d < 4 ? 6 :
-    d < 6 ? 8 :
-    d < 10 ? 10 :
-    d < 16 ? 12 :
-    d < 20 ? 14 :
-    d < 22 ? 16 :
-    d < 24 ? 18 :
-    d < 28 ? 20 :
-    d < 34 ? 22 :
-    d < 42 ? 24 :
-    d < 48 ? 26 :
-    d < 56 ? 28 :
-    d < 64 ? 30 :
-    d < 72 ? 32 :
-    d < 84 ? 34 :
-    d < 96 ? 36 :
-    d < 98 ? 38 :
-    d < 113 ? 40 :
-    d < 149 ? 44 :
-    d < 199 ? 48 :
-    d < 261 ? 52 :
-    d < 353 ? 56 :
-    d < 461 ? 60 :
-    d < 585 ? 64 :
-    d < 1200 ? 70 :
-		d < 1800 ? 80 :
-		d < 2400 ? 90 :
-		100;
-
-	$.ellipseMode = (x) => ($._ellipseMode = x);
-
-	$.ellipse = (x, y, w, h) => {
-		const n = getArcSegments(w == h ? w : Math.max(w, h));
-
-		let a = Math.max(w, 1) / 2;
-		let b = w == h ? a : Math.max(h, 1) / 2;
-
-		let t = 0; // theta
-		const angleIncrement = $.TAU / n;
-		const ci = colorIndex ?? $._fillIndex;
-		if ($._matrixDirty) $._saveMatrix();
-		const ti = $._transformIndex;
-		let vx1, vy1, vx2, vy2;
-		for (let i = 0; i <= n; i++) {
-			vx1 = vx2;
-			vy1 = vy2;
-			vx2 = x + a * Math.cos(t);
-			vy2 = y + b * Math.sin(t);
-			t += angleIncrement;
-
-			if (i == 0) continue;
-
-			verticesStack.push(x, y, ci, ti, vx1, vy1, ci, ti, vx2, vy2, ci, ti);
-		}
-
-		drawStack.push(0, n * 3);
-	};
-
-	$.circle = (x, y, d) => $.ellipse(x, y, d, d);
-
 	$._hooks.preRender.push(() => {
-		$.pass.setPipeline($.pipelines[0]);
-
-		const vertices = new Float32Array(verticesStack);
+		$.pass.setPipeline($._pipelines[0]);
 
-		const vertexBuffer = Q5.device.createBuffer({
-			size: vertices.byteLength,
-			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+		let vertexBuffer = Q5.device.createBuffer({
+			size: vertIndex * 4,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
 		});
 
-		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
+		new Float32Array(vertexBuffer.getMappedRange()).set(vertexStack.slice(0, vertIndex));
+		vertexBuffer.unmap();
+
 		$.pass.setVertexBuffer(0, vertexBuffer);
 
-		const colorsBuffer = Q5.device.createBuffer({
-			size: colorsStack.length * 4,
-			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+		let indexBuffer = Q5.device.createBuffer({
+			size: idxBufferIndex * 4,
+			usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
 		});
 
-		Q5.device.queue.writeBuffer(colorsBuffer, 0, new Float32Array(colorsStack));
-
-		$._colorsBindGroup = Q5.device.createBindGroup({
-			layout: colorsLayout,
-			entries: [
-				{
-					binding: 0,
-					resource: {
-						buffer: colorsBuffer,
-						offset: 0,
-						size: colorsStack.length * 4
-					}
-				}
-			]
-		});
+		new Uint32Array(indexBuffer.getMappedRange()).set(indexStack.slice(0, idxBufferIndex));
+		indexBuffer.unmap();
 
-		// set the bind group once before rendering
-		$.pass.setBindGroup(1, $._colorsBindGroup);
+		$.pass.setIndexBuffer(indexBuffer, 'uint32');
 	});
 
 	$._hooks.postRender.push(() => {
-		verticesStack.length = 0;
+		vertIndex = 0;
+		vertCount = 0;
+		idxBufferIndex = 0;
 	});
 };
 Q5.renderers.webgpu.image = ($, q) => {
 	$._textureBindGroups = [];
-	let verticesStack = [];
+	let vertexStack = [];
 
 	let vertexShader = Q5.device.createShaderModule({
 		label: 'imageVertexShader',
@@ -3911,15 +4065,14 @@ Q5.renderers.webgpu.image = ($, q) => {
 struct VertexOutput {
 	@builtin(position) position: vec4f,
 	@location(0) texCoord: vec2f
-};
-
+}
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
-};
+}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 
 @vertex
 fn vertexMain(@location(0) pos: vec2f, @location(1) texCoord: vec2f, @location(2) transformIndex: f32) -> VertexOutput {
@@ -3980,7 +4133,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		bindGroupLayouts: [...$.bindGroupLayouts, textureLayout]
 	});
 
-	$.pipelines[1] = Q5.device.createRenderPipeline({
+	$._pipelineConfigs[1] = {
 		label: 'imagePipeline',
 		layout: pipelineLayout,
 		vertex: {
@@ -3991,28 +4144,12 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		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'
-						}
-					}
-				}
-			]
+			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
 		},
-		primitive: {
-			topology: 'triangle-list'
-		}
-	});
+		primitive: { topology: 'triangle-list' }
+	};
+
+	$._pipelines[1] = Q5.device.createRenderPipeline($._pipelineConfigs[1]);
 
 	let sampler = Q5.device.createSampler({
 		magFilter: 'linear',
@@ -4037,7 +4174,11 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 
 		Q5.device.queue.copyExternalImageToTexture(
 			{ source: img },
-			{ texture, colorSpace: $.canvas.colorSpace },
+			{
+				texture,
+				colorSpace: $.canvas.colorSpace
+				// premultipliedAlpha: true
+			},
 			textureSize
 		);
 
@@ -4090,7 +4231,7 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 		let [l, r, t, b] = $._calcBox(x, y, w, h, $._imageMode);
 
 		// prettier-ignore
-		verticesStack.push(
+		vertexStack.push(
 			l, t, 0, 0, ti,
 			r, t, 1, 0, ti,
 			l, b, 0, 1, ti,
@@ -4099,29 +4240,29 @@ fn fragmentMain(@location(0) texCoord: vec2f) -> @location(0) vec4f {
 			r, b, 1, 1, ti
 		);
 
-		$.drawStack.push(1, img.textureIndex);
+		$.drawStack.push(1, img.textureIndex, 0);
 	};
 
 	$._hooks.preRender.push(() => {
 		if (!$._textureBindGroups.length) return;
 
 		// Switch to image pipeline
-		$.pass.setPipeline($.pipelines[1]);
-
-		// Create a vertex buffer for the image quads
-		const vertices = new Float32Array(verticesStack);
+		$.pass.setPipeline($._pipelines[1]);
 
 		const vertexBuffer = Q5.device.createBuffer({
-			size: vertices.byteLength,
-			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+			size: vertexStack.length * 4,
+			usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+			mappedAtCreation: true
 		});
 
-		Q5.device.queue.writeBuffer(vertexBuffer, 0, vertices);
+		new Float32Array(vertexBuffer.getMappedRange()).set(vertices);
+		vertexBuffer.unmap();
+
 		$.pass.setVertexBuffer(1, vertexBuffer);
 	});
 
 	$._hooks.postRender.push(() => {
-		verticesStack.length = 0;
+		vertexStack.length = 0;
 	});
 };
 
@@ -4142,35 +4283,35 @@ const pos = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));
 
 struct VertexInput {
 	@builtin(vertex_index) vertex : u32,
-	@builtin(instance_index) instance : u32,
-};
+	@builtin(instance_index) instance : u32
+}
 struct VertexOutput {
 	@builtin(position) position : vec4f,
-	@location(0) texcoord : vec2f,
-	@location(1) colorIndex : f32
-};
+	@location(0) texCoord : vec2f,
+	@location(1) fillColor : vec4f
+}
 struct Char {
 	texOffset: vec2f,
 	texExtent: vec2f,
 	size: vec2f,
 	offset: vec2f,
-};
+}
 struct Text {
 	pos: vec2f,
 	scale: f32,
 	transformIndex: f32,
 	fillIndex: f32,
 	strokeIndex: f32
-};
+}
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
-};
+}
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> transforms: array<mat4x4<f32>>;
+@group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 
-@group(1) @binding(0) var<storage, read> colors : array<vec4f>;
+@group(1) @binding(0) var<storage> colors : array<vec4f>;
 
 @group(2) @binding(0) var fontTexture: texture_2d<f32>;
 @group(2) @binding(1) var fontSampler: sampler;
@@ -4196,13 +4337,13 @@ fn vertexMain(input : VertexInput) -> VertexOutput {
 
 	var output : VertexOutput;
 	output.position = vert;
-	output.texcoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
-	output.colorIndex = text.fillIndex;
+	output.texCoord = (pos[input.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
+	output.fillColor = colors[i32(text.fillIndex)];
 	return output;
 }
 
-fn sampleMsdf(texcoord: vec2f) -> f32 {
-	let c = textureSample(fontTexture, fontSampler, texcoord);
+fn sampleMsdf(texCoord: vec2f) -> f32 {
+	let c = textureSample(fontTexture, fontSampler, texCoord);
 	return max(min(c.r, c.g), min(max(c.r, c.g), c.b));
 }
 
@@ -4212,25 +4353,83 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 	// uses the default which is 4.
 	let pxRange = 4.0;
 	let sz = vec2f(textureDimensions(fontTexture, 0));
-	let dx = sz.x*length(vec2f(dpdxFine(input.texcoord.x), dpdyFine(input.texcoord.x)));
-	let dy = sz.y*length(vec2f(dpdxFine(input.texcoord.y), dpdyFine(input.texcoord.y)));
+	let dx = sz.x*length(vec2f(dpdxFine(input.texCoord.x), dpdyFine(input.texCoord.x)));
+	let dy = sz.y*length(vec2f(dpdxFine(input.texCoord.y), dpdyFine(input.texCoord.y)));
 	let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
-	let sigDist = sampleMsdf(input.texcoord) - 0.5;
+	let sigDist = sampleMsdf(input.texCoord) - 0.5;
 	let pxDist = sigDist * toPixels;
 	let edgeWidth = 0.5;
 	let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
 	if (alpha < 0.001) {
 		discard;
 	}
-	let fillColor = colors[i32(input.colorIndex)];
-	return vec4f(fillColor.rgb, fillColor.a * alpha);
+	return vec4f(input.fillColor.rgb, input.fillColor.a * alpha);
 }
 `
 	});
 
+	let textBindGroupLayout = Q5.device.createBindGroupLayout({
+		label: 'MSDF text group layout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+				buffer: { type: 'read-only-storage' }
+			},
+			{
+				binding: 1,
+				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+				buffer: { type: 'read-only-storage' }
+			}
+		]
+	});
+
+	let fontSampler = Q5.device.createSampler({
+		minFilter: 'linear',
+		magFilter: 'linear',
+		mipmapFilter: 'linear',
+		maxAnisotropy: 16
+	});
+	let fontBindGroupLayout = Q5.device.createBindGroupLayout({
+		label: 'MSDF font group layout',
+		entries: [
+			{
+				binding: 0,
+				visibility: GPUShaderStage.FRAGMENT,
+				texture: {}
+			},
+			{
+				binding: 1,
+				visibility: GPUShaderStage.FRAGMENT,
+				sampler: {}
+			},
+			{
+				binding: 2,
+				visibility: GPUShaderStage.VERTEX,
+				buffer: { type: 'read-only-storage' }
+			}
+		]
+	});
+
+	let fontPipelineLayout = Q5.device.createPipelineLayout({
+		bindGroupLayouts: [...$.bindGroupLayouts, fontBindGroupLayout, textBindGroupLayout]
+	});
+
+	$._pipelineConfigs[2] = {
+		label: 'msdf font pipeline',
+		layout: fontPipelineLayout,
+		vertex: { module: textShader, entryPoint: 'vertexMain' },
+		fragment: {
+			module: textShader,
+			entryPoint: 'fragmentMain',
+			targets: [{ format: 'bgra8unorm', blend: $.blendConfigs.normal }]
+		},
+		primitive: { topology: 'triangle-strip', stripIndexFormat: 'uint32' }
+	};
+	$._pipelines[2] = Q5.device.createRenderPipeline($._pipelineConfigs[2]);
+
 	class MsdfFont {
-		constructor(pipeline, bindGroup, lineHeight, chars, kernings) {
-			this.pipeline = pipeline;
+		constructor(bindGroup, lineHeight, chars, kernings) {
 			this.bindGroup = bindGroup;
 			this.lineHeight = lineHeight;
 			this.chars = chars;
@@ -4256,22 +4455,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 	}
 
-	let textBindGroupLayout = Q5.device.createBindGroupLayout({
-		label: 'MSDF text group layout',
-		entries: [
-			{
-				binding: 0,
-				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-				buffer: { type: 'read-only-storage' }
-			},
-			{
-				binding: 1,
-				visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-				buffer: { type: 'read-only-storage' }
-			}
-		]
-	});
-
+	$._fonts = [];
 	let fonts = {};
 
 	let createFont = async (fontJsonUrl, fontName, cb) => {
@@ -4334,74 +4518,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 		charsBuffer.unmap();
 
-		let fontSampler = Q5.device.createSampler({
-			minFilter: 'linear',
-			magFilter: 'linear',
-			mipmapFilter: 'linear',
-			maxAnisotropy: 16
-		});
-		let fontBindGroupLayout = Q5.device.createBindGroupLayout({
-			label: 'MSDF font group layout',
-			entries: [
-				{
-					binding: 0,
-					visibility: GPUShaderStage.FRAGMENT,
-					texture: {}
-				},
-				{
-					binding: 1,
-					visibility: GPUShaderStage.FRAGMENT,
-					sampler: {}
-				},
-				{
-					binding: 2,
-					visibility: GPUShaderStage.VERTEX,
-					buffer: { type: 'read-only-storage' }
-				}
-			]
-		});
-		let fontPipeline = Q5.device.createRenderPipeline({
-			label: 'msdf font pipeline',
-			layout: Q5.device.createPipelineLayout({
-				bindGroupLayouts: [...$.bindGroupLayouts, fontBindGroupLayout, textBindGroupLayout]
-			}),
-			vertex: {
-				module: textShader,
-				entryPoint: 'vertexMain'
-			},
-			fragment: {
-				module: textShader,
-				entryPoint: 'fragmentMain',
-				targets: [
-					{
-						format: 'bgra8unorm',
-						blend: {
-							color: {
-								srcFactor: 'src-alpha',
-								dstFactor: 'one-minus-src-alpha'
-							},
-							alpha: {
-								srcFactor: 'one',
-								dstFactor: 'one'
-							}
-						}
-					}
-				]
-			},
-			primitive: {
-				topology: 'triangle-strip',
-				stripIndexFormat: 'uint32'
-			}
-		});
-
 		let fontBindGroup = Q5.device.createBindGroup({
 			label: 'msdf font bind group',
 			layout: fontBindGroupLayout,
 			entries: [
-				{
-					binding: 0,
-					resource: texture.createView()
-				},
+				{ binding: 0, resource: texture.createView() },
 				{ binding: 1, resource: fontSampler },
 				{ binding: 2, resource: { buffer: charsBuffer } }
 			]
@@ -4419,10 +4540,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			}
 		}
 
-		$._font = new MsdfFont(fontPipeline, fontBindGroup, atlas.common.lineHeight, chars, kernings);
+		$._font = new MsdfFont(fontBindGroup, atlas.common.lineHeight, chars, kernings);
 
+		$._font.index = $._fonts.length;
+		$._fonts.push($._font);
 		fonts[fontName] = $._font;
-		$.pipelines[2] = $._font.pipeline;
 
 		q._preloadCount--;
 
@@ -4451,12 +4573,6 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 
 	$.textFont = (fontName) => {
 		$._font = fonts[fontName];
-
-		// replay the change of font in the draw stack
-		$.drawStack.push(-1, () => {
-			$._font = fonts[fontName];
-			$.pipelines[2] = $._font.pipeline;
-		});
 	};
 	$.textSize = (size) => {
 		$._textSize = size;
@@ -4569,7 +4685,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			}
 		}
 
-		let charsData = new Float32Array((str.length - spaces) * 4);
+		let charsData = [];
 
 		let ta = $._textAlign,
 			tb = $._textBaseline,
@@ -4615,7 +4731,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		}
 		$._charStack.push(charsData);
 
-		let text = new Float32Array(6);
+		let text = [];
 
 		if ($._matrixDirty) $._saveMatrix();
 
@@ -4623,11 +4739,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		text[1] = -y;
 		text[2] = $._textSize / 44;
 		text[3] = $._transformIndex;
-		text[4] = $._fillIndex;
+		text[4] = $._fillSet ? $._fillIndex : 0;
 		text[5] = $._strokeIndex;
 
 		$._textStack.push(text);
-		$.drawStack.push(2, measurements.printedCharCount);
+		$.drawStack.push(2, measurements.printedCharCount, $._font.index);
 	};
 
 	$.textWidth = (str) => {
@@ -4640,11 +4756,11 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 
 		if ($._doFill) {
 			let fi = $._fillIndex * 4;
-			g.fill(colorsStack.slice(fi, fi + 4));
+			g.fill(colorStack.slice(fi, fi + 4));
 		}
 		if ($._doStroke) {
 			let si = $._strokeIndex * 4;
-			g.stroke(colorsStack.slice(si, si + 4));
+			g.stroke(colorStack.slice(si, si + 4));
 		}
 
 		let img = g.createTextImage(str, w, h);
@@ -4695,21 +4811,15 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			totalTextSize += charsData.length * 4;
 		}
 
-		// Create a single buffer for all text data
+		// Create a single buffer for all char data
 		let charBuffer = Q5.device.createBuffer({
-			label: 'charBuffer',
 			size: totalTextSize,
 			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		});
 
 		// Copy all text data into the buffer
-		let textArray = new Float32Array(charBuffer.getMappedRange());
-		let o = 0;
-		for (let array of $._charStack) {
-			textArray.set(array, o);
-			o += array.length;
-		}
+		new Float32Array(charBuffer.getMappedRange()).set($._charStack.flat());
 		charBuffer.unmap();
 
 		// Calculate total buffer size for metadata
@@ -4724,12 +4834,7 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 		});
 
 		// Copy all metadata into the buffer
-		let metadataArray = new Float32Array(textBuffer.getMappedRange());
-		o = 0;
-		for (let array of $._textStack) {
-			metadataArray.set(array, o);
-			o += array.length;
-		}
+		new Float32Array(textBuffer.getMappedRange()).set($._textStack.flat());
 		textBuffer.unmap();
 
 		// Create a single bind group for the text buffer and metadata buffer
@@ -4737,14 +4842,8 @@ fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
 			label: 'msdf text bind group',
 			layout: textBindGroupLayout,
 			entries: [
-				{
-					binding: 0,
-					resource: { buffer: charBuffer }
-				},
-				{
-					binding: 1,
-					resource: { buffer: textBuffer }
-				}
+				{ binding: 0, resource: { buffer: charBuffer } },
+				{ binding: 1, resource: { buffer: textBuffer } }
 			]
 		});
 	});