q5 2.20.5 → 2.20.7

package/q5.js

@@ -29,6 +29,7 @@ function Q5(scope, parent, renderer) {
 		Q5._hasGlobal = $._isGlobal = true;
 		globalScope = Q5._esm ? globalThis : !Q5._server ? window : global;
 	}
+	if (scope == 'graphics') $._graphics = true;
 
 	let q = new Proxy($, {
 		set: (t, p, v) => {
@@ -171,18 +172,15 @@ function Q5(scope, parent, renderer) {
 		}
 	}
 
-	if (scope == 'graphics') {
-		$._graphics = true;
-		return;
-	}
+	if ($._webgpuFallback) $.colorMode('rgb', 1);
+
+	if ($._graphics) return;
 
 	if (scope == 'global') {
 		Object.assign(Q5, $);
 		delete Q5.Q5;
 	}
 
-	if ($._webgpuFallback) $.colorMode('rgb', 1);
-
 	for (let m of Q5.methods.init) {
 		m.call($);
 	}
@@ -324,7 +322,7 @@ if (typeof document == 'object') {
 	});
 }
 Q5.modules.canvas = ($, q) => {
-	$._OffscreenCanvas =
+	$._Canvas =
 		window.OffscreenCanvas ||
 		function () {
 			return document.createElement('canvas');
@@ -335,7 +333,7 @@ Q5.modules.canvas = ($, q) => {
 			q.canvas = Q5._createServerCanvas(100, 100);
 		}
 	} else if ($._scope == 'image' || $._scope == 'graphics') {
-		q.canvas = new $._OffscreenCanvas(100, 100);
+		q.canvas = new $._Canvas(100, 100);
 	}
 
 	if (!$.canvas) {
@@ -411,12 +409,13 @@ Q5.modules.canvas = ($, q) => {
 		}
 		if ($._beginRender) $._beginRender();
 
+		c.mousePressed = (cb) => c.addEventListener('mousedown', cb);
+
 		return rend;
 	};
 
-	$.createGraphics = function (w, h, opt) {
-		let g = new Q5('graphics');
-		opt ??= {};
+	$.createGraphics = function (w, h, opt = {}) {
+		let g = new Q5('graphics', undefined, opt.renderer || ($._webgpuFallback ? 'webgpu-fallback' : $._renderer));
 		opt.alpha ??= true;
 		opt.colorSpace ??= $.canvas.colorSpace;
 		g.createCanvas.call($, w, h, opt);
@@ -698,7 +697,7 @@ Q5.renderers.c2d.canvas = ($, q) => {
 
 		let o;
 		if ($.frameCount > 1) {
-			o = new $._OffscreenCanvas(c.width, c.height);
+			o = new $._Canvas(c.width, c.height);
 			o.w = c.w;
 			o.h = c.h;
 			let oCtx = o.getContext('2d');
@@ -1443,7 +1442,7 @@ Q5.renderers.c2d.image = ($, q) => {
 	if ($._scope == 'image') {
 		$.resize = (w, h) => {
 			let c = $.canvas;
-			let o = new $._OffscreenCanvas(c.width, c.height);
+			let o = new $._Canvas(c.width, c.height);
 			let tmpCtx = o.getContext('2d', {
 				colorSpace: c.colorSpace
 			});
@@ -1581,7 +1580,7 @@ Q5.renderers.c2d.image = ($, q) => {
 
 	$._saveCanvas = async (data, ext) => {
 		data = data.canvas || data;
-		if (data instanceof OffscreenCanvas) {
+		if (data instanceof HTMLCanvasElement || data instanceof OffscreenCanvas) {
 			const blob = await data.convertToBlob({ type: 'image/' + ext });
 
 			return await new Promise((resolve) => {
@@ -2610,6 +2609,8 @@ Q5.modules.dom = ($, q) => {
 			return el;
 		};
 
+		el.mousePressed = (cb) => el.addEventListener('mousedown', cb);
+
 		$._elements.push(el);
 		if ($.canvas) $.canvas.parentElement.append(el);
 		else document.body.append(el);
@@ -4469,15 +4470,14 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 	c.width = $.width = 500;
 	c.height = $.height = 500;
 
-	// c2d graphics context
-	$._g = $.createGraphics(1, 1);
+	$._g = $.createGraphics(1, 1, { renderer: 'c2d' });
 
 	if ($.colorMode) $.colorMode('rgb', 1);
 
 	let pass,
 		mainView,
-		frameTextureA,
-		frameTextureB,
+		frameA,
+		frameB,
 		frameSampler,
 		framePipeline,
 		frameBindGroup,
@@ -4486,6 +4486,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	$._pipelineConfigs = [];
 	$._pipelines = [];
+	$._buffers = [];
 
 	// local variables used for slightly better performance
 	// stores pipeline shifts and vertex counts/image indices
@@ -4549,8 +4550,8 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 			GPUTextureUsage.TEXTURE_BINDING |
 			GPUTextureUsage.RENDER_ATTACHMENT;
 
-		frameTextureA = Q5.device.createTexture({ size, format, usage });
-		frameTextureB = Q5.device.createTexture({ size, format, usage });
+		$._frameA = frameA = Q5.device.createTexture({ size, format, usage });
+		$._frameB = frameB = Q5.device.createTexture({ size, format, usage });
 
 		let finalShader = Q5.device.createShaderModule({
 			code: `
@@ -4673,7 +4674,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		$._hsw = v / 2;
 	};
 
-	const MAX_TRANSFORMS = 1e7, // or whatever maximum you need
+	const MAX_TRANSFORMS = $._graphics ? 1000 : 1e7,
 		MATRIX_SIZE = 16, // 4x4 matrix
 		transforms = new Float32Array(MAX_TRANSFORMS * MATRIX_SIZE);
 
@@ -4953,8 +4954,6 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 		shouldClear = true;
 	};
 
-	$.createGraphics = (w, h, opt) => $._g.createGraphics(w, h, opt);
-
 	const _drawFrame = () => {
 		pass.setPipeline(framePipeline);
 		pass.setBindGroup(0, frameBindGroup);
@@ -4963,14 +4962,13 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 	$._beginRender = () => {
 		// swap the frame textures
-		const temp = frameTextureA;
-		frameTextureA = frameTextureB;
-		frameTextureB = temp;
-		$.canvas.texture = frameTextureA;
+		const temp = frameA;
+		frameA = frameB;
+		frameB = temp;
 
 		$.encoder = Q5.device.createCommandEncoder();
 
-		let target = shouldClear ? $.ctx.getCurrentTexture().createView() : frameTextureA.createView();
+		let target = shouldClear ? $.ctx.getCurrentTexture().createView() : frameA.createView();
 
 		pass = q.pass = $.encoder.beginRenderPass({
 			label: 'q5-webgpu',
@@ -4990,7 +4988,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				layout: framePipeline.getBindGroupLayout(0),
 				entries: [
 					{ binding: 0, resource: frameSampler },
-					{ binding: 1, resource: frameTextureB.createView() }
+					{ binding: 1, resource: frameB.createView() }
 				]
 			});
 
@@ -5048,7 +5046,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				// v is the number of vertices
 				pass.draw(v, 1, drawVertOffset);
 				drawVertOffset += v;
-			} else if (curPipelineIndex == 1 || curPipelineIndex == 2) {
+			} else if (curPipelineIndex <= 2) {
 				// draw an image or video frame
 				// v is the texture index
 				pass.setBindGroup(1, $._textureBindGroups[v]);
@@ -5088,7 +5086,7 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 				layout: framePipeline.getBindGroupLayout(0),
 				entries: [
 					{ binding: 0, resource: frameSampler },
-					{ binding: 1, resource: frameTextureA.createView() }
+					{ binding: 1, resource: frameA.createView() }
 				]
 			});
 			_drawFrame();
@@ -5098,6 +5096,12 @@ Q5.renderers.webgpu.canvas = ($, q) => {
 
 		Q5.device.queue.submit([$.encoder.finish()]);
 
+		// destroy buffers
+		Q5.device.queue.onSubmittedWorkDone().then(() => {
+			for (let b of $._buffers) b.destroy();
+			$._buffers = [];
+		});
+
 		q.pass = $.encoder = null;
 
 		// clear the stacks for the next frame
@@ -5123,6 +5127,11 @@ Q5.initWebGPU = async () => {
 			return false;
 		}
 		Q5.device = await adapter.requestDevice();
+
+		Q5.device.lost.then((e) => {
+			console.error('WebGPU crashed!');
+			console.error(e);
+		});
 	}
 	return true;
 };
@@ -5137,14 +5146,12 @@ Q5.webgpu = async function (scope, parent) {
 Q5.renderers.webgpu.drawing = ($, q) => {
 	let c = $.canvas,
 		drawStack = $.drawStack,
-		vertexStack = new Float32Array(1e7),
+		vertexStack = new Float32Array($._graphics ? 1000 : 1e7),
 		vertIndex = 0;
 	const TAU = Math.PI * 2;
 	const HALF_PI = Math.PI / 2;
 
-	let drawingShader = Q5.device.createShaderModule({
-		label: 'drawingShader',
-		code: `
+	let drawingShaderCode = `
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
@@ -5163,12 +5170,17 @@ struct FragmentParams {
 @group(0) @binding(1) var<storage> transforms: array<mat4x4<f32>>;
 @group(0) @binding(2) var<storage> colors : array<vec4f>;
 
-@vertex
-fn vertexMain(v: VertexParams) -> FragmentParams {
-	var vert = vec4f(v.pos, 0.0, 1.0);
-	vert = transforms[i32(v.matrixIndex)] * vert;
+fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
+	var vert = vec4f(pos, 0.0, 1.0);
+	vert = transforms[i32(matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
+	return vert;
+}
+
+@vertex
+fn vertexMain(v: VertexParams) -> FragmentParams {
+	var vert = transformVertex(v.pos, v.matrixIndex);
 
 	var f: FragmentParams;
 	f.position = vert;
@@ -5177,10 +5189,14 @@ fn vertexMain(v: VertexParams) -> FragmentParams {
 }
 
 @fragment
-fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
-	return color;
+fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
+	return f.color;
 }
-`
+`;
+
+	let drawingShader = Q5.device.createShaderModule({
+		label: 'drawingShader',
+		code: drawingShaderCode
 	});
 
 	let vertexBufferLayout = {
@@ -5758,6 +5774,8 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 		vertexBuffer.unmap();
 
 		$.pass.setVertexBuffer(0, vertexBuffer);
+
+		$._buffers.push(vertexBuffer);
 	});
 
 	$._hooks.postRender.push(() => {
@@ -5766,7 +5784,7 @@ fn fragmentMain(@location(0) color: vec4f) -> @location(0) vec4f {
 	});
 };
 Q5.renderers.webgpu.image = ($, q) => {
-	let vertexStack = new Float32Array(1e7),
+	let vertexStack = new Float32Array($._graphics ? 1000 : 1e7),
 		vertIndex = 0;
 
 	let imageShaderCode = `
@@ -5779,13 +5797,13 @@ struct VertexParams {
 	@location(1) texCoord: vec2f,
 	@location(2) tintIndex: f32,
 	@location(3) matrixIndex: f32,
-	@location(4) globalAlpha: f32
+	@location(4) imageAlpha: f32
 }
 struct FragmentParams {
 	@builtin(position) position: vec4f,
 	@location(0) texCoord: vec2f,
-	@location(1) tintIndex: f32,
-	@location(2) globalAlpha: f32
+	@location(1) tintColor: vec4f,
+	@location(2) imageAlpha: f32
 }
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
@@ -5795,29 +5813,33 @@ struct FragmentParams {
 @group(1) @binding(0) var samp: sampler;
 @group(1) @binding(1) var texture: texture_2d<f32>;
 
-@vertex
-fn vertexMain(v: VertexParams) -> FragmentParams {
-	var vert = vec4f(v.pos, 0.0, 1.0);
-	vert = transforms[i32(v.matrixIndex)] * vert;
+fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
+	var vert = vec4f(pos, 0.0, 1.0);
+	vert = transforms[i32(matrixIndex)] * vert;
 	vert.x /= uniforms.halfWidth;
 	vert.y /= uniforms.halfHeight;
+	return vert;
+}
+
+@vertex
+fn vertexMain(v: VertexParams) -> FragmentParams {
+	var vert = transformVertex(v.pos, v.matrixIndex);
 
 	var f: FragmentParams;
 	f.position = vert;
 	f.texCoord = v.texCoord;
-	f.tintIndex = v.tintIndex;
-	f.globalAlpha = v.globalAlpha;
+	f.tintColor = colors[i32(v.tintIndex)];
+	f.imageAlpha = v.imageAlpha;
 	return f;
 }
 
 @fragment
 fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
-		let texColor = textureSample(texture, samp, f.texCoord);
-		let tintColor = colors[i32(f.tintIndex)];
-		
-		// Mix original and tinted colors using tint alpha as blend factor
-		let tinted = vec4f(texColor.rgb * tintColor.rgb, texColor.a * f.globalAlpha);
-		return mix(texColor, tinted, tintColor.a);
+	let texColor = textureSample(texture, samp, f.texCoord);
+	
+	// Mix original and tinted colors using tint alpha as blend factor
+	let tinted = vec4f(texColor.rgb * f.tintColor.rgb, texColor.a * f.imageAlpha);
+	return mix(texColor, tinted, f.tintColor.a);
 }
 `;
 
@@ -5842,7 +5864,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			{ shaderLocation: 1, offset: 8, format: 'float32x2' },
 			{ shaderLocation: 2, offset: 16, format: 'float32' }, // tintIndex
 			{ shaderLocation: 3, offset: 20, format: 'float32' }, // matrixIndex
-			{ shaderLocation: 4, offset: 24, format: 'float32' } // globalAlpha
+			{ shaderLocation: 4, offset: 24, format: 'float32' } // imageAlpha
 		]
 	};
 
@@ -5943,29 +5965,30 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 	let tIdx = 0,
 		vidFrames = 0;
 
-	$._createTexture = (img) => {
-		let g = img;
-		if (img.canvas) img = img.canvas;
+	$._addTexture = (img, texture) => {
+		let cnv = img.canvas || img;
 
-		let textureSize = [img.width, img.height, 1];
+		let textureSize = [cnv.width, cnv.height, 1];
 
-		let texture = Q5.device.createTexture({
-			size: textureSize,
-			format: 'bgra8unorm',
-			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
-		});
+		if (!texture) {
+			texture = Q5.device.createTexture({
+				size: textureSize,
+				format: 'bgra8unorm',
+				usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+			});
 
-		Q5.device.queue.copyExternalImageToTexture(
-			{ source: img },
-			{
-				texture,
-				colorSpace: $.canvas.colorSpace
-			},
-			textureSize
-		);
+			Q5.device.queue.copyExternalImageToTexture(
+				{ source: cnv },
+				{
+					texture,
+					colorSpace: $.canvas.colorSpace
+				},
+				textureSize
+			);
+		}
 
-		g.texture = texture;
-		g.textureIndex = tIdx + vidFrames;
+		img.texture = texture;
+		img.textureIndex = tIdx + vidFrames;
 
 		$._textureBindGroups[tIdx + vidFrames] = Q5.device.createBindGroup({
 			layout: textureLayout,
@@ -5978,21 +6001,41 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		tIdx++;
 	};
 
+	let Q5Image = Q5.Image;
+	Q5.Image = function (w, h) {
+		let g = new Q5Image(...arguments);
+		if (w > 1 && h > 1) {
+			$._addTexture(g);
+			g.modified = true;
+		}
+		return g;
+	};
+
 	$.loadImage = (src, cb) => {
 		q._preloadCount++;
 		let g = $._g.loadImage(src, (img) => {
-			g.defaultWidth = img.width * $._defaultImageScale;
-			g.defaultHeight = img.height * $._defaultImageScale;
-			$._createTexture(img);
+			$._addTexture(img);
 			q._preloadCount--;
 			if (cb) cb(g);
 		});
 		return g;
 	};
 
+	$.createImage = $._g.createImage;
+
+	let _createGraphics = $.createGraphics;
+
+	$.createGraphics = (w, h, opt) => {
+		let g = _createGraphics(w, h, opt);
+		$._addTexture(g, g._frameA);
+		$._addTexture(g, g._frameB);
+		g._beginRender();
+		return g;
+	};
+
 	$.imageMode = (x) => ($._imageMode = x);
 
-	const addVert = (x, y, u, v, ci, ti, ga) => {
+	const addVert = (x, y, u, v, ci, ti, ia) => {
 		let s = vertexStack,
 			i = vertIndex;
 		s[i++] = x;
@@ -6001,15 +6044,15 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		s[i++] = v;
 		s[i++] = ci;
 		s[i++] = ti;
-		s[i++] = ga;
+		s[i++] = ia;
 		vertIndex = i;
 	};
 
 	$.image = (img, dx = 0, dy = 0, dw, dh, sx = 0, sy = 0, sw, sh) => {
-		let useExternal;
+		let isVideo;
 		if (img.textureIndex == undefined) {
-			useExternal = img._graphics || img.tagName == 'VIDEO';
-			if (!useExternal || !img.width) return;
+			isVideo = img.tagName == 'VIDEO';
+			if (!isVideo || !img.width) return;
 			if (img.flipped) $.scale(-1, 1);
 		}
 
@@ -6021,7 +6064,19 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			h = cnv.height,
 			pd = img._pixelDensity || 1;
 
-		if (!useExternal && img.modified) {
+		if (img._graphics) {
+			let g = img;
+			if (g.drawStack.length) {
+				g._render();
+				g._finishRender();
+				g.textureIndex += g.frameCount % 2 == 0 ? -1 : 1;
+				g.resetMatrix();
+				g._beginRender();
+				g.frameCount++;
+			}
+		}
+
+		if (img.modified) {
 			Q5.device.queue.copyExternalImageToTexture(
 				{ source: cnv },
 				{ texture: img.texture, colorSpace: $.canvas.colorSpace },
@@ -6045,17 +6100,17 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			v1 = (sy + sh) / h,
 			ti = $._matrixIndex,
 			ci = $._tint,
-			ga = $._globalAlpha;
+			ia = $._imageAlpha;
 
-		addVert(l, t, u0, v0, ci, ti, ga);
-		addVert(r, t, u1, v0, ci, ti, ga);
-		addVert(l, b, u0, v1, ci, ti, ga);
-		addVert(r, b, u1, v1, ci, ti, ga);
+		addVert(l, t, u0, v0, ci, ti, ia);
+		addVert(r, t, u1, v0, ci, ti, ia);
+		addVert(l, b, u0, v1, ci, ti, ia);
+		addVert(r, b, u1, v1, ci, ti, ia);
 
-		if (!useExternal) {
+		if (!isVideo) {
 			$.drawStack.push(1, img.textureIndex);
 		} else {
-			// render using an external texture
+			// render video
 			let externalTexture = Q5.device.importExternalTexture({ source: img });
 
 			// Create bind group for the external texture that will
@@ -6087,6 +6142,8 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
 		});
 
+		$._buffers.push(buffer);
+
 		let en = Q5.device.createCommandEncoder();
 
 		en.copyTextureToBuffer({ texture }, { buffer, bytesPerRow, rowsPerImage: h }, { width: w, height: h });
@@ -6117,7 +6174,7 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 		let colorSpace = $.canvas.colorSpace;
 		data = new Uint8ClampedArray(data.buffer);
 		data = new ImageData(data, w, h, { colorSpace });
-		let cnv = new OffscreenCanvas(w, h);
+		let cnv = new $._Canvas(w, h);
 		let ctx = cnv.getContext('2d', { colorSpace });
 		ctx.putImageData(data, 0, 0);
 
@@ -6147,6 +6204,8 @@ fn fragmentMain(f: FragmentParams) -> @location(0) vec4f {
 
 		$.pass.setVertexBuffer(1, vertexBuffer);
 
+		$._buffers.push(vertexBuffer);
+
 		if (vidFrames) {
 			// Switch to video pipeline
 			$.pass.setPipeline($._pipelines[3]);
@@ -6170,9 +6229,7 @@ Q5.DILATE = 6;
 Q5.ERODE = 7;
 Q5.BLUR = 8;
 Q5.renderers.webgpu.text = ($, q) => {
-	let textShader = Q5.device.createShaderModule({
-		label: 'MSDF text shader',
-		code: `
+	let textShaderCode = `
 struct Uniforms {
 	halfWidth: f32,
 	halfHeight: f32
@@ -6184,7 +6241,9 @@ struct VertexParams {
 struct FragmentParams {
 	@builtin(position) position : vec4f,
 	@location(0) texCoord : vec2f,
-	@location(1) fillColor : vec4f
+	@location(1) fillColor : vec4f,
+	@location(2) strokeColor : vec4f,
+	@location(3) strokeWeight : f32
 }
 struct Char {
 	texOffset: vec2f,
@@ -6197,7 +6256,8 @@ struct Text {
 	scale: f32,
 	matrixIndex: f32,
 	fillIndex: f32,
-	strokeIndex: f32
+	strokeIndex: f32,
+	strokeWeight: f32
 }
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
@@ -6213,52 +6273,73 @@ struct Text {
 
 const quad = array(vec2f(0, -1), vec2f(1, -1), vec2f(0, 0), vec2f(1, 0));
 
+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));
+}
+
+fn transformVertex(pos: vec2f, matrixIndex: f32) -> vec4f {
+	var vert = vec4f(pos, 0.0, 1.0);
+	vert = transforms[i32(matrixIndex)] * vert;
+	vert.x /= uniforms.halfWidth;
+	vert.y /= uniforms.halfHeight;
+	return vert;
+}
+
 @vertex
 fn vertexMain(v : VertexParams) -> FragmentParams {
 	let char = textChars[v.instance];
-
 	let text = textMetadata[i32(char.w)];
-
 	let fontChar = fontChars[i32(char.z)];
 
 	let charPos = ((quad[v.vertex] * fontChar.size + char.xy + fontChar.offset) * text.scale) + text.pos;
 
-	var vert = vec4f(charPos, 0.0, 1.0);
-	vert = transforms[i32(text.matrixIndex)] * vert;
-	vert.x /= uniforms.halfWidth;
-	vert.y /= uniforms.halfHeight;
+	var vert = transformVertex(charPos, text.matrixIndex);
 
 	var f : FragmentParams;
 	f.position = vert;
 	f.texCoord = (quad[v.vertex] * vec2f(1, -1)) * fontChar.texExtent + fontChar.texOffset;
 	f.fillColor = colors[i32(text.fillIndex)];
+	f.strokeColor = colors[i32(text.strokeIndex)];
+	f.strokeWeight = text.strokeWeight;
 	return f;
 }
 
-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));
-}
-
 @fragment
 fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
-	// pxRange (AKA distanceRange) comes from the msdfgen tool,
-	// uses the default which is 4.
 	let pxRange = 4.0;
 	let sz = vec2f(textureDimensions(fontTexture, 0));
-	let dx = sz.x*length(vec2f(dpdxFine(f.texCoord.x), dpdyFine(f.texCoord.x)));
-	let dy = sz.y*length(vec2f(dpdxFine(f.texCoord.y), dpdyFine(f.texCoord.y)));
+	let dx = sz.x * length(vec2f(dpdxFine(f.texCoord.x), dpdyFine(f.texCoord.x)));
+	let dy = sz.y * length(vec2f(dpdxFine(f.texCoord.y), dpdyFine(f.texCoord.y)));
 	let toPixels = pxRange * inverseSqrt(dx * dx + dy * dy);
 	let sigDist = sampleMsdf(f.texCoord) - 0.5;
 	let pxDist = sigDist * toPixels;
 	let edgeWidth = 0.5;
-	let alpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
-	if (alpha < 0.001) {
+
+	if (f.strokeWeight == 0.0) {
+		let fillAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist);
+		var color = vec4f(f.fillColor.rgb, f.fillColor.a * fillAlpha);
+		if (color.a < 0.01) {
+			discard;
+		}
+		return color;
+	}
+
+	let halfStroke = f.strokeWeight / 2.0;
+	let fillAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist - halfStroke);
+	let strokeAlpha = smoothstep(-edgeWidth, edgeWidth, pxDist + halfStroke);
+	var color = mix(f.strokeColor, f.fillColor, fillAlpha);
+	color = vec4f(color.rgb, color.a * strokeAlpha);
+	if (color.a < 0.01) {
 		discard;
 	}
-	return vec4f(f.fillColor.rgb, f.fillColor.a * alpha);
+	return color;
 }
-`
+`;
+
+	let textShader = Q5.device.createShaderModule({
+		label: 'textShader',
+		code: textShaderCode
 	});
 
 	let textBindGroupLayout = Q5.device.createBindGroupLayout({
@@ -6657,6 +6738,8 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		txt[3] = $._matrixIndex;
 		txt[4] = $._fillSet ? $._fill : 0;
 		txt[5] = $._stroke;
+		txt[6] = $._strokeSet ? $._strokeWeight : 0;
+		txt[7] = 0; // padding
 
 		textStack.push(txt);
 		$.drawStack.push(3, measurements.printedCharCount, $._font.index);
@@ -6733,7 +6816,7 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		charBuffer.unmap();
 
 		// calculate total buffer size for metadata
-		let totalMetadataSize = textStack.length * 6 * 4;
+		let totalMetadataSize = textStack.length * 8 * 4;
 
 		// create a single buffer for all metadata
 		let textBuffer = Q5.device.createBuffer({
@@ -6747,6 +6830,8 @@ fn fragmentMain(f : FragmentParams) -> @location(0) vec4f {
 		new Float32Array(textBuffer.getMappedRange()).set(textStack.flat());
 		textBuffer.unmap();
 
+		$._buffers.push(charBuffer, textBuffer);
+
 		// create a single bind group for the text buffer and metadata buffer
 		$._textBindGroup = Q5.device.createBindGroup({
 			label: 'msdf text bind group',