q5 3.5.0 → 3.5.2

package/deno.json

@@ -1,6 +1,6 @@
 {
 	"name": "@q5/q5",
-	"version": "3.5.0",
+	"version": "3.5.2",
 	"license": "LGPL-3.0",
 	"description": "Beginner friendly graphics powered by WebGPU and optimized for interactive art!",
 	"author": "quinton-ashley",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "3.5.0",
+	"version": "3.5.2",
 	"description": "Beginner friendly graphics powered by WebGPU and optimized for interactive art!",
 	"author": "quinton-ashley",
 	"contributors": [

package/q5.d.ts

@@ -458,10 +458,6 @@ createCanvas(200);
 createCanvas(200, 100);
 circle(100, 50, 80);
 	 * @example
-await Q5.WebGPU();
-createCanvas(200, 100);
-circle(0, 0, 80);
-	 * @example
 createCanvas(200, 200, { alpha: true });
 
 function draw() {
@@ -971,15 +967,15 @@ function draw() {
 	c.g = (c.g + 1) % 256;
 }
 	 * @example
-let q = await Q5.WebGPU();
+createCanvas(200);
 
-//           (r, g, b,   a)
-let c = color(0, 1, 1, 0.2);
+//           (r,   g,   b,  a)
+let c = color(0, 255, 255, 50);
 
-q.draw = () => {
+function draw() {
 	fill(c);
 	circle(mouseX, mouseY, 50);
-};
+}
 	 */
 	function color(c0: string | number | Color | number[], c1?: number, c2?: number, c3?: number): Color;
 
@@ -1274,12 +1270,10 @@ circle(25, 12.5, 16);
 createCanvas(200, 100);
 background('crimson');
 	 * @example
-let q = await Q5.WebGPU();
-
-q.draw = () => {
-	background(0.5, 0.4);
+function draw() {
+	background(128, 110);
 	circle(mouseX, mouseY, 20);
-};
+}
 	 */
 	function background(filler: Color | Q5.Image): void;
 
@@ -1395,12 +1389,10 @@ background(200);
 strokeWeight(5);
 capsule(40, 40, 160, 60, 10);
 	 * @example
-let q = await Q5.WebGPU();
-
-q.draw = () => {
-	background(0.8);
+function draw() {
+	background(200);
 	strokeWeight(10);
-	capsule(0, 0, mouseX, mouseY, 20);
+	capsule(100, 100, mouseX, mouseY, 20);
 }
 	 */
 	function capsule(x1: number, y1: number, x2: number, y2: number, r: number): void;
@@ -1553,15 +1545,6 @@ ellipse(50, 25, 150, 75);
 	 * 
 	 * Only takes effect in q5 WebGPU.
 	 * @param {number} val curve detail level, default is 20
-	 * @example
-await Q5.WebGPU();
-
-curveDetail(4);
-
-strokeWeight(10);
-stroke(0, 1, 1);
-noFill();
-curve(-100, -200, -50, 0, 50, 0, 100, -200);
 	 */
 	function curveDetail(val: number): void;
 
@@ -1719,15 +1702,6 @@ let logo = loadImage('/q5js_logo.avif');
 function draw() {
 	background(logo);
 }
-	 * @example
-let q = await Q5.WebGPU();
-createCanvas(200);
-
-let logo = loadImage('/q5js_logo.avif');
-
-q.draw = () => {
-	background(logo);
-};
 	 */
 	function loadImage(url: string): Q5.Image | Promise<Q5.Image>;
 
@@ -2212,13 +2186,12 @@ textFont('serif');
 textSize(32);
 text('Hello, world!', 15, 90);
 	 * @example
-let q = await Q5.WebGPU();
 createCanvas(200);
-background(0.8);
+background(200);
 
 textFont('monospace');
 
-q.setup = () => {
+function setup() {
   text('Hello, world!', -65, 0);
 }
 	 */
@@ -2385,23 +2358,21 @@ function draw() {
 	 * @param {number} x x-coordinate where the image should be placed
 	 * @param {number} y y-coordinate where the image should be placed
 	 * @example
-let q = await Q5.WebGPU();
 createCanvas(200);
-background(0.8);
+background(200);
 textSize(96);
 textAlign(CENTER, CENTER);
 
-textImage('🐶', 0, 0);
+textImage('🐶', 100,100);
 	 * @example
-let q = await Q5.WebGPU();
 createCanvas(200);
 
 loadFont('/assets/Robotica.ttf');
 
-q.setup = () => {
-	background(0.8);
+function setup() {
+	background(200);
 	textSize(66);
-	textImage('Hello!', -100, 100);
+	textImage('Hello!', 0, 0);
 };
 	 */
 	function textImage(img: Q5.Image | String, x: number, y: number): void;
@@ -2896,19 +2867,6 @@ function draw() {
 		circle(x, 100, n * 40);
 	}
 }
-	 * @example
-let q = await Q5.WebGPU();
-
-q.draw = () => {
-	noStroke();
-	let t = millis() * 0.002;
-	for (let x = -100; x < 100; x += 5) {
-		for (let y = -100; y < 100; y += 5) {
-			fill(noise(t, (mouseX + x) * .05, y * .05));
-			square(x, y, 5);
-		}
-	}
-};
 	 */
 	function noise(x?: number, y?: number, z?: number): number;
 
@@ -3764,17 +3722,6 @@ await load('/assets/Robotica.ttf');
 background(255);
 textSize(24);
 text('Hello, world!', 16, 100);
-	 * @example
-let q = await Q5.WebGPU();
-createCanvas(200);
-
-let [jump, retro] = await load(
-		'/assets/jump.wav', '/assets/retro.flac'
-	);
-
-q.mousePressed = () => {
-	mouseButton == 'left' ? jump.play() : retro.play();
-};
 	 */
 	function load(...urls: string[]): Promise<any[]>;
 

package/q5.js

@@ -3104,8 +3104,8 @@ Q5.modules.dom = ($, q) => {
 		el.type = 'range';
 		el.min = min;
 		el.max = max;
-		el.value = value;
 		el.step = step;
+		el.value = value;
 		el.val = () => parseFloat(el.value);
 		return el;
 	};
@@ -3204,6 +3204,7 @@ Q5.modules.fes = ($) => {
 
 		let errFile = stackLines[idx].split(sep).at(-1);
 		if (errFile.startsWith('blob:')) errFile = errFile.slice(5);
+		errFile = errFile.split(')')[0];
 		let parts = errFile.split(':');
 		let lineNum = parseInt(parts.at(-2));
 		parts[parts.length - 1] = parts.at(-1).split(')')[0];
@@ -3256,24 +3257,24 @@ Q5.modules.fes = ($) => {
 			});
 		}
 	}
-};
 
-if (typeof navigator != undefined && navigator.onLine) {
-	async function checkLatestVersion() {
-		try {
-			let response = await fetch('https://data.jsdelivr.com/v1/package/npm/q5');
-			if (!response.ok) return;
-			let data = await response.json();
-			let l = data.tags.latest;
-			l = l.slice(0, l.lastIndexOf('.'));
-			if (l != Q5.version) {
-				console.warn(`q5.js v${l} is now available! Consider updating from v${Q5.version}.`);
-			}
-		} catch (e) {}
-	}
+	if (Q5.online != false && typeof navigator != undefined && navigator.onLine) {
+		async function checkLatestVersion() {
+			try {
+				let response = await fetch('https://data.jsdelivr.com/v1/package/npm/q5');
+				if (!response.ok) return;
+				let data = await response.json();
+				let l = data.tags.latest;
+				l = l.slice(0, l.lastIndexOf('.'));
+				if (l != Q5.version) {
+					console.warn(`q5.js v${l} is now available! Consider updating from v${Q5.version}.`);
+				}
+			} catch (e) {}
+		}
 
-	checkLatestVersion();
-}
+		checkLatestVersion();
+	}
+};
 Q5.modules.input = ($, q) => {
 	if ($._isGraphics) return;
 
@@ -4581,7 +4582,7 @@ Q5.modules.util = ($, q) => {
 					return res.text();
 				})
 				.then((f) => {
-					if (type == 'csv') f = $.CSV.parse(f);
+					if (type == 'csv') f = Q5.CSV.parse(f);
 					if (typeof f == 'string') ret.text = f;
 					else Object.assign(ret, f);
 					delete ret.promise;
@@ -4687,21 +4688,6 @@ Q5.modules.util = ($, q) => {
 		} else saveFile(a);
 	};
 
-	$.CSV = {};
-	$.CSV.parse = (csv, sep = ',', lineSep = '\n') => {
-		if (!csv.length) return [];
-		let a = [],
-			lns = csv.split(lineSep),
-			headers = lns[0].split(sep).map((h) => h.replaceAll('"', ''));
-		for (let i = 1; i < lns.length; i++) {
-			let o = {},
-				ln = lns[i].split(sep);
-			headers.forEach((h, i) => (o[h] = JSON.parse(ln[i])));
-			a.push(o);
-		}
-		return a;
-	};
-
 	if ($.canvas && !Q5._createServerCanvas) {
 		$.canvas.save = $.saveCanvas = $.save;
 	}
@@ -4738,6 +4724,21 @@ Q5.modules.util = ($, q) => {
 		return a;
 	};
 };
+
+Q5.CSV = {};
+Q5.CSV.parse = (csv, sep = ',', lineSep = '\n') => {
+	if (!csv.length) return [];
+	let a = [],
+		lns = csv.split(lineSep),
+		headers = lns[0].split(sep).map((h) => h.replaceAll('"', ''));
+	for (let i = 1; i < lns.length; i++) {
+		let o = {},
+			ln = lns[i].split(sep);
+		headers.forEach((h, i) => (o[h] = JSON.parse(ln[i])));
+		a.push(o);
+	}
+	return a;
+};
 Q5.modules.vector = ($) => {
 	$.Vector = Q5.Vector;
 	$.createVector = (x, y, z) => new $.Vector(x, y, z, $);
@@ -5081,6 +5082,8 @@ struct Q5 {
 		frameLayout,
 		frameSampler,
 		frameBindGroup,
+		frameBindGroupA,
+		frameBindGroupB,
 		colorIndex = 2,
 		colorStackIndex = 12,
 		prevFramePL = 0,
@@ -5238,6 +5241,25 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 
 		// Create a pipeline for rendering frames
 		$._pipelines[0] = Q5.device.createRenderPipeline($._pipelineConfigs[0]);
+
+		// Create persistent bind groups for both frame buffers
+		frameBindGroupA = Q5.device.createBindGroup({
+			layout: frameLayout,
+			entries: [
+				{ binding: 0, resource: { buffer: uniformBuffer } },
+				{ binding: 1, resource: frameSampler },
+				{ binding: 2, resource: frameA.createView() }
+			]
+		});
+
+		frameBindGroupB = Q5.device.createBindGroup({
+			layout: frameLayout,
+			entries: [
+				{ binding: 0, resource: { buffer: uniformBuffer } },
+				{ binding: 1, resource: frameSampler },
+				{ binding: 2, resource: frameB.createView() }
+			]
+		});
 	};
 
 	$._createCanvas = (w, h, opt) => {
@@ -5618,6 +5640,9 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 		$.popStyles();
 	};
 
+	// Reusable array for calcBox to avoid GC
+	let boxCache = [0, 0, 0, 0];
+
 	const calcBox = (x, y, w, h, mode) => {
 		// left, right, top, bottom
 		let l, r, t, b;
@@ -5641,7 +5666,11 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 			b = h;
 		}
 
-		return [l, r, t, b];
+		boxCache[0] = l;
+		boxCache[1] = r;
+		boxCache[2] = t;
+		boxCache[3] = b;
+		return boxCache;
 	};
 
 	// prettier-ignore
@@ -5735,11 +5764,15 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 	};
 
 	$._beginRender = () => {
-		// swap the frame textures
+		// swap the frame textures and bind groups
 		const temp = frameA;
 		frameA = frameB;
 		frameB = temp;
 
+		const tempBindGroup = frameBindGroupA;
+		frameBindGroupA = frameBindGroupB;
+		frameBindGroupB = tempBindGroup;
+
 		encoder = Q5.device.createCommandEncoder();
 
 		$._pass = pass = encoder.beginRenderPass({
@@ -5755,14 +5788,8 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 			]
 		});
 
-		frameBindGroup = Q5.device.createBindGroup({
-			layout: frameLayout,
-			entries: [
-				{ binding: 0, resource: { buffer: uniformBuffer } },
-				{ binding: 1, resource: frameSampler },
-				{ binding: 2, resource: frameB.createView() }
-			]
-		});
+		// Use pre-created bind group instead of creating new one
+		frameBindGroup = frameBindGroupB;
 
 		if (!shouldClear) {
 			pass.setPipeline($._pipelines[prevFramePL]);
@@ -5773,6 +5800,7 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 	};
 
 	let transformsBuffer, colorsBuffer, shapesVertBuff, imgVertBuff, charBuffer, textBuffer;
+	let mainBindGroup, lastTransformsBuffer, lastColorsBuffer;
 
 	$._render = () => {
 		let transformsSize = matrices.length * MATRIX_SIZE * 4; // 4 bytes per float
@@ -5797,32 +5825,36 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 
 		Q5.device.queue.writeBuffer(colorsBuffer, 0, colorStack.subarray(0, colorStackIndex));
 
-		$._uniforms = [
-			$.width,
-			$.height,
-			$.halfWidth,
-			$.halfHeight,
-			$._pixelDensity,
-			$.frameCount,
-			performance.now(),
-			$.deltaTime,
-			$.mouseX,
-			$.mouseY,
-			$.mouseIsPressed ? 1 : 0,
-			$.keyCode,
-			$.keyIsPressed ? 1 : 0
-		];
-
-		Q5.device.queue.writeBuffer(uniformBuffer, 0, new Float32Array($._uniforms));
-
-		let mainBindGroup = Q5.device.createBindGroup({
-			layout: mainLayout,
-			entries: [
-				{ binding: 0, resource: { buffer: uniformBuffer } },
-				{ binding: 1, resource: { buffer: transformsBuffer } },
-				{ binding: 2, resource: { buffer: colorsBuffer } }
-			]
-		});
+		// Reuse uniform array instead of creating new one each frame
+		$._uniforms[0] = $.width;
+		$._uniforms[1] = $.height;
+		$._uniforms[2] = $.halfWidth;
+		$._uniforms[3] = $.halfHeight;
+		$._uniforms[4] = $._pixelDensity;
+		$._uniforms[5] = $.frameCount;
+		$._uniforms[6] = performance.now();
+		$._uniforms[7] = $.deltaTime;
+		$._uniforms[8] = $.mouseX;
+		$._uniforms[9] = $.mouseY;
+		$._uniforms[10] = $.mouseIsPressed ? 1 : 0;
+		$._uniforms[11] = $.keyCode;
+		$._uniforms[12] = $.keyIsPressed ? 1 : 0;
+
+		Q5.device.queue.writeBuffer(uniformBuffer, 0, $._uniforms);
+
+		// Only recreate bind group if buffers changed
+		if (!mainBindGroup || lastTransformsBuffer !== transformsBuffer || lastColorsBuffer !== colorsBuffer) {
+			mainBindGroup = Q5.device.createBindGroup({
+				layout: mainLayout,
+				entries: [
+					{ binding: 0, resource: { buffer: uniformBuffer } },
+					{ binding: 1, resource: { buffer: transformsBuffer } },
+					{ binding: 2, resource: { buffer: colorsBuffer } }
+				]
+			});
+			lastTransformsBuffer = transformsBuffer;
+			lastColorsBuffer = colorsBuffer;
+		}
 
 		pass.setBindGroup(0, mainBindGroup);
 
@@ -5870,11 +5902,13 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 		// prepare to render text
 
 		if (charStack.length) {
-			// Calculate total buffer size for text data
-			let totalTextSize = 0;
+			// Flatten char data into reusable buffer instead of creating new array
+			let charOffset = 0;
 			for (let charsData of charStack) {
-				totalTextSize += charsData.length * 4;
+				charDataBuffer.set(charsData, charOffset);
+				charOffset += charsData.length;
 			}
+			let totalTextSize = charOffset * 4;
 
 			if (!charBuffer || charBuffer.size < totalTextSize) {
 				if (charBuffer) charBuffer.destroy();
@@ -5884,10 +5918,16 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 				});
 			}
 
-			Q5.device.queue.writeBuffer(charBuffer, 0, new Float32Array(charStack.flat()));
+			Q5.device.queue.writeBuffer(charBuffer, 0, charDataBuffer.buffer, 0, totalTextSize);
+
+			// Flatten text metadata into reusable buffer
+			let textOffset = 0;
+			for (let textData of textStack) {
+				textDataBuffer.set(textData, textOffset);
+				textOffset += textData.length;
+			}
+			let totalMetadataSize = textOffset * 4;
 
-			// Calculate total buffer size for metadata
-			let totalMetadataSize = textStack.length * 8 * 4;
 			if (!textBuffer || textBuffer.size < totalMetadataSize) {
 				if (textBuffer) textBuffer.destroy();
 				textBuffer = Q5.device.createBuffer({
@@ -5897,7 +5937,7 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 				});
 			}
 
-			Q5.device.queue.writeBuffer(textBuffer, 0, new Float32Array(textStack.flat()));
+			Q5.device.queue.writeBuffer(textBuffer, 0, textDataBuffer.buffer, 0, totalMetadataSize);
 
 			// create a single bind group for the text buffer and metadata buffer
 			$._textBindGroup = Q5.device.createBindGroup({
@@ -6015,14 +6055,8 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 			]
 		});
 
-		frameBindGroup = Q5.device.createBindGroup({
-			layout: frameLayout,
-			entries: [
-				{ binding: 0, resource: { buffer: uniformBuffer } },
-				{ binding: 1, resource: frameSampler },
-				{ binding: 2, resource: frameA.createView() }
-			]
-		});
+		// Use pre-created bind group instead of creating new one
+		frameBindGroup = frameBindGroupA;
 
 		pass.setPipeline($._pipelines[framePL]);
 		pass.setBindGroup(0, frameBindGroup);
@@ -6034,11 +6068,11 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 		$._pass = pass = encoder = null;
 
 		// clear the stacks for the next frame
-		drawStack.splice(0, drawStack.length);
+		drawStack.length = 0; // faster than splice for clearing
 		colorIndex = 2;
 		colorStackIndex = 12;
-		matrices = [matrices[0]];
-		matricesIdxStack = [];
+		matrices.length = 1; // keep first matrix, clear rest
+		matricesIdxStack.length = 0;
 
 		// frameA can now be saved when saveCanvas is run
 		$._texture = frameA;
@@ -6046,13 +6080,15 @@ fn fragMain(f: FragParams ) -> @location(0) vec4f {
 		// reset
 		shapesVertIdx = 0;
 		imgVertIdx = 0;
-		$._textureBindGroups.splice(tIdx, vidFrames);
+		// Remove video frames without creating new array
+		if (vidFrames > 0) {
+			$._textureBindGroups.length = tIdx;
+		}
 		vidFrames = 0;
-		charStack = [];
-		textStack = [];
-		rectStack = new Float32Array(Q5.MAX_RECTS * 16);
+		charStack.length = 0;
+		textStack.length = 0;
+		// Don't create new typed arrays - just reset index
 		rectStackIdx = 0;
-		ellipseStack = new Float32Array(Q5.MAX_ELLIPSES * 16);
 		ellipseStackIdx = 0;
 
 		// destroy buffers
@@ -6624,6 +6660,9 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	$.rectMode = (x) => (_rectMode = x);
 	$._getRectMode = () => _rectMode;
 
+	// Reusable array for rect mode calculations
+	let rectModeCache = [0, 0, 0, 0];
+
 	function applyRectMode(x, y, w, h) {
 		let hw = w / 2,
 			hh = h / 2;
@@ -6641,7 +6680,11 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 				y += hh;
 			}
 		}
-		return [x, y, hw, hh];
+		rectModeCache[0] = x;
+		rectModeCache[1] = y;
+		rectModeCache[2] = hw;
+		rectModeCache[3] = hh;
+		return rectModeCache;
 	}
 
 	$.rect = (x, y, w, h, rr = 0) => {
@@ -6919,6 +6962,9 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	$.ellipseMode = (x) => (_ellipseMode = x);
 	$._getEllipseMode = () => _ellipseMode;
 
+	// Reusable array for ellipse mode calculations
+	let ellipseModeCache = [0, 0, 0, 0];
+
 	function applyEllipseMode(x, y, w, h) {
 		h ??= w;
 		let a, b;
@@ -6939,7 +6985,11 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 			a = (w - x) / 2;
 			b = (h - y) / 2;
 		}
-		return [x, y, a, b];
+		ellipseModeCache[0] = x;
+		ellipseModeCache[1] = y;
+		ellipseModeCache[2] = a;
+		ellipseModeCache[3] = b;
+		return ellipseModeCache;
 	}
 
 	$.ellipse = (x, y, w, h) => {
@@ -7336,6 +7386,9 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	$.imageMode = (x) => (_imageMode = x);
 	$._getImageMode = () => _imageMode;
 
+	// Reusable uniform buffer array to avoid GC
+	$._uniforms = new Float32Array(13);
+
 	const addImgVert = (x, y, u, v, ci, ti, ia) => {
 		let s = imgVertStack,
 			i = imgVertIdx;
@@ -7350,6 +7403,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	};
 
 	$.image = (img, dx = 0, dy = 0, dw, dh, sx = 0, sy = 0, sw, sh) => {
+		if (!img) return;
 		let isVideo;
 		if (img._texture == undefined) {
 			isVideo = img.tagName == 'VIDEO';
@@ -7679,8 +7733,8 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		// chars and kernings can be stored as csv strings, making the file
 		// size smaller, but they need to be parsed into arrays of objects
 		if (typeof atlas.chars == 'string') {
-			atlas.chars = $.CSV.parse(atlas.chars, ' ');
-			atlas.kernings = $.CSV.parse(atlas.kernings, ' ');
+			atlas.chars = Q5.CSV.parse(atlas.chars, ' ');
+			atlas.kernings = Q5.CSV.parse(atlas.kernings, ' ');
 		}
 
 		let charCount = atlas.chars.length;
@@ -7764,7 +7818,7 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 	$._loadDefaultFont = (fontName, cb) => {
 		fonts[fontName] = null;
 		let url = `https://q5js.org/fonts/${fontName}-msdf.json`;
-		if (!navigator.onLine) {
+		if (Q5.online == false || !navigator.onLine) {
 			url = `/node_modules/q5/builtinFonts/${fontName}-msdf.json`;
 		}
 		return $.loadFont(url, cb);
@@ -7837,13 +7891,20 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 	let charStack = [],
 		textStack = [];
 
+	// Reusable array for line widths to avoid GC
+	let lineWidthsCache = new Array(100);
+
+	// Reusable buffers for text data to avoid creating new arrays
+	let charDataBuffer = new Float32Array(100000); // reusable buffer for char data
+	let textDataBuffer = new Float32Array(10000); // reusable buffer for text metadata
+
 	let measureText = (font, text, charCallback) => {
 		let maxWidth = 0,
 			offsetX = 0,
 			offsetY = 0,
 			line = 0,
 			printedCharCount = 0,
-			lineWidths = [],
+			lineWidths = lineWidthsCache, // reuse array
 			nextCharCode = text.charCodeAt(0);
 
 		for (let i = 0; i < text.length; ++i) {
@@ -7874,12 +7935,14 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 					printedCharCount++;
 			}
 		}
-		lineWidths.push(offsetX);
+		lineWidths[line] = offsetX;
 		maxWidth = Math.max(maxWidth, offsetX);
+		let lineCount = line + 1;
 		return {
 			width: maxWidth,
-			height: lineWidths.length * font.lineHeight * leadPercent,
+			height: lineCount * font.lineHeight * leadPercent,
 			lineWidths,
+			lineCount,
 			printedCharCount
 		};
 	};
@@ -7888,9 +7951,11 @@ fn fragMain(f : FragParams) -> @location(0) vec4f {
 		if (!$._font) {
 			// if the default font hasn't been loaded yet, try to load it
 			if ($._font !== null) $.textFont('sans-serif');
-			return;
+			if (_textSize >= 1) return $.textImage(str, x, y, w, h);
 		}
 
+		if (_textSize < 1) return;
+
 		let type = typeof str;
 		if (type != 'string') {
 			if (type == 'object') str = str.toString();