q5 3.4.0 → 3.5.0

package/q5.d.ts

@@ -1,6 +1,6 @@
 /**
  * q5.d.ts
- * 
+ *
  * TypeScript definitions for q5.js to use with IDEs like VSCode
  * for autocompletion, hover over documentation, and type checking.
  */
@@ -9,27 +9,76 @@ declare global {
 
 	/** ⭐️
 	 * Welcome to q5's documentation! 🤩
-	 * 
+	 *
 	 * First time coding? Check out the [q5 Beginner's Brief](https://github.com/q5js/q5.js/wiki/q5-Beginner's-Brief).
-	 * 
-	 * On these Learn pages, you can experiment with editing the 
+	 *
+	 * On these Learn pages, you can experiment with editing the
 	 * interactive mini examples. Have fun! 😎
 	 */
 
 	/** ⭐️
 	 * The draw function is run 60 times per second by default.
 	 * @example
-Q5.draw = function () {
+function draw() {
   background('silver');
 	circle(frameCount % 200, 100, 80);
 }
 	 */
 	function draw(): void;
 
+	/** ⭐️
+	 * The setup function is run once, when the program starts.
+	 * 
+	 * It can also be defined as an async function and used to load assets.
+	 * @example
+function setup() {
+	createCanvas(200, 100);
+	background('aqua');
+}
+	* @example
+let logo;
+
+async function setup() {
+	logo = await loadImage('/q5js_logo.avif');
+}
+
+function draw() {
+	background(logo);
+}
+	 */
+	function setup(): void;
+
+	/** ⭐️
+	 * Load assets in the preload function to ensure that they'll be
+	 * ready to use in the setup and draw functions.
+	 * 
+	 * q5's preload system can also be used without a preload function
+	 * if you create a canvas first, as shown in the second example.
+	 * @example
+let logo;
+
+function preload() {
+	logo = loadImage('/q5js_logo.avif');
+}
+
+function draw() {
+	background(logo);
+}
+	 * @example
+createCanvas(200, 100);
+
+let logo = loadImage('/q5js_logo.avif');
+
+function draw() {
+	background(logo);
+}
+	 */
+	function preload(): void;
+
 	/** ⭐️
 	 * The number of frames that have been displayed since the program started.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	textSize(64);
 	text(frameCount, 8, 120);
@@ -40,7 +89,7 @@ Q5.draw = function () {
 	/** ⭐️
 	 * Stops the draw loop.
 	 * @example
-Q5.draw = function () {
+function draw() {
   circle(frameCount * 5, 100, 80);
   noLoop();
 }
@@ -54,13 +103,13 @@ Q5.draw = function () {
 	 * This is an async function.
 	 * @param {number} [n] number of times to redraw the canvas, default is 1
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 noLoop();
 
-Q5.draw = function () {
+function draw() {
   circle(frameCount * 5, 100, 80);
 }
-Q5.mousePressed = function () {
+function mousePressed() {
   redraw(10);
 }
 	 */
@@ -69,13 +118,13 @@ Q5.mousePressed = function () {
 	/** ⭐️
 	 * Starts the draw loop again if it was stopped.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 noLoop();
 
-Q5.draw = function () {
+function draw() {
   circle(frameCount * 5, 100, 80);
 }
-Q5.mousePressed = function () {
+function mousePressed() {
   loop();
 }
 	 */
@@ -91,7 +140,7 @@ Q5.mousePressed = function () {
 	 * @param {number} [hertz] target frame rate, default is 60
 	 * @returns {number} current frame rate
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 
 	if (mouseIsPressed) frameRate(10);
@@ -100,7 +149,7 @@ Q5.draw = function () {
 	circle(frameCount % 200, 100, 80);
 }
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	textSize(64);
 	text(round(frameRate()), 65, 120);
@@ -112,7 +161,7 @@ Q5.draw = function () {
 	 * The desired frame rate of the sketch.
 	 * @returns {number} target frame rate
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	textSize(64);
 
@@ -129,7 +178,7 @@ Q5.draw = function () {
 	 * performance analysis.
 	 * @returns {number} frames per second
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	frameRate(1);
 	textSize(64);
@@ -142,8 +191,8 @@ Q5.draw = function () {
 	/** ⭐️
 	 * Logs a message to the JavaScript console. Alias for the standard
 	 * [`console.log`](https://developer.mozilla.org/docs/Web/API/console/log_static) function.
-	 * 
-	 * You can open web developer tools in most browsers by using the 
+	 *
+	 * You can open web developer tools in most browsers by using the
 	 * keyboard shortcut `Ctrl + Shift + i` or `command + option + i`,
 	 * then click the "Console" tab.
 	 * @param {*} message message to log
@@ -158,12 +207,12 @@ Q5.draw = function () {
 	 * addons like p5play that auto-draw to the canvas after the `draw`
 	 * function is run.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	circle(frameCount % 200, 100, 80);
 }
 
-Q5.postProcess = function () {
+function postProcess() {
 	filter(INVERT);
 }
 	 */
@@ -172,7 +221,7 @@ Q5.postProcess = function () {
 	/** ⭐️
 	 * The width of the window.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	textSize(64);
 	textAlign(CENTER, CENTER);
@@ -184,7 +233,7 @@ Q5.draw = function () {
 	/** ⭐️
 	 * The height of the window.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	textSize(64);
 	textAlign(CENTER, CENTER);
@@ -204,13 +253,13 @@ Q5.draw = function () {
 	 * rates are consistently low, consider reducing the target frame
 	 * rate instead.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	text(deltaTime, 60, 106);
 }
 	 * @example
 let x = 0;
-Q5.draw = function () {
+function draw() {
 	background(200);
 	// simulate frame rate drops
 	frameRate(random(30, 60));
@@ -238,7 +287,7 @@ Q5.draw = function () {
 	 * 
 	 * @param {boolean} [val] Whether load* functions should return promises or not. If this parameter is undefined the value is set to true.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 usePromiseLoading();
 
@@ -316,8 +365,20 @@ q.circle(100, 50, 20);
 		static modules: {};
 
 		static Image: {
-			new(w: number, h: number, opt?: any): Q5.Image;
-		}
+			new (w: number, h: number, opt?: any): Q5.Image;
+		};
+
+		/** ⭐️
+		 * Creates a new Q5 instance that uses [q5's WebGPU renderer](https://github.com/q5js/q5.js/wiki/q5-WebGPU-renderer).
+		 * @example
+let q = await Q5.WebGPU('instance');
+
+q.draw = () => {
+	q.background(0.8);
+	q.circle(q.mouseX, 0, 80);
+}
+		 */
+		static WebGPU(): Q5;
 
 		/** ⭐️
 		 * ___Experimental! Might be changed.___
@@ -338,7 +399,7 @@ Q5.registerAddon((Q5, proto, lifecycles) => {
 });
 
 // sketch.js
-await createCanvas(200);
+createCanvas(200);
 		 */
 		static registerAddon(addon: Function): void; //-
 
@@ -355,14 +416,14 @@ await createCanvas(200);
 		/** ⭐️
 		 * Load assets in the preload function to ensure that they'll be
 		 * ready to use in the setup and draw functions.
-		 * 
+		 *
 		 * q5's preload system can also be used without a preload function
 		 * if you create a canvas first.
 		 */
 		preload(): void; //-
 
 		/** ⭐️
-		 * The number of frames that have been displayed since the program 
+		 * The number of frames that have been displayed since the program
 		 * started.
 		 */
 		postProcess(): void; //-
@@ -385,26 +446,25 @@ await createCanvas(200);
 	 * by the user, a 200x200 canvas will be created automatically before
 	 * the draw loop starts.
 	 * 
-	 * You should create a canvas before using any other q5 functions
-	 * in top level global mode.
-	 * 
-	 * Note! The origin (0, 0) point on a WebGPU canvas is at its center!
+	 * When using q5 WebGPU, create a canvas before using any other
+	 * q5 functions. The origin of a WebGPU canvas is at its center.
 	 * @param {number} [w] width or size of the canvas
 	 * @param {number} [h] height of the canvas
 	 * @param {object} [opt] options for the canvas
 	 * @param {boolean} [opt.alpha] whether the canvas should have an alpha channel that allows it to be seen through, default is false
 	 * @param {string} [opt.colorSpace] color space of the canvas, either "srgb" or "display-p3", default is "display-p3" for devices that support HDR colors
-	 * @returns {Promise<HTMLCanvasElement>} created canvas element
+	 * @returns {HTMLCanvasElement} created canvas element
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 circle(100, 50, 80);
 	 * @example
-await createCanvas(200, 100, GPU);
+await Q5.WebGPU();
+createCanvas(200, 100);
 circle(0, 0, 80);
 	 * @example
-await createCanvas(200, 200, { alpha: true });
+createCanvas(200, 200, { alpha: true });
 
-Q5.draw = function () {
+function draw() {
 	clear();
 	circle(frameCount % 200, 100, 80);
 }
@@ -413,10 +473,10 @@ Q5.draw = function () {
 
 	/** ⬜️
 	 * The canvas element associated with the Q5 instance.
-	 * 
-	 * @prop {number} w width
+	 *
+	 * @prop {number} w
 	 * @prop {number} width
-	 * @prop {number} h height
+	 * @prop {number} h
 	 * @prop {number} height
 	 * @prop {number} hw half the width
 	 * @prop {number} hh half the height
@@ -439,7 +499,7 @@ Q5.draw = function () {
 	 * a `Color` object, grayscale value, or color component values.
 	 * @param {Color} color fill color
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 fill('red');
@@ -458,7 +518,7 @@ square(80, 80, 80);
 	 * a `Color` object, grayscale value, or color component values.
 	 * @param {Color} color stroke color
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 fill(36);
 
@@ -473,7 +533,7 @@ square(80, 80, 80);
 	/** ⬜️
 	 * After calling this function, shapes will not be filled.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 noFill();
@@ -488,7 +548,7 @@ square(80, 80, 80);
 	/** ⬜️
 	 * After calling this function, shapes will not have a stroke (outline).
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 fill(36);
 stroke('red');
@@ -503,7 +563,7 @@ square(80, 80, 80);
 	 * Sets the size of the stroke used for lines and the border around shapes.
 	 * @param {number} weight size of the stroke in pixels
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 stroke('red');
 circle(50, 100, 80);
@@ -519,7 +579,7 @@ circle(150, 100, 80);
 	 * In q5 WebGPU this function only affects images.
 	 * @param {number} alpha opacity level, ranging from 0 to 1
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 opacity(1);
@@ -543,19 +603,21 @@ square(80, 80, 80);
 	 * Not available in q5 WebGPU.
 	 * @param {Color} color shadow color
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 noFill();
 shadow('black');
 rect(64, 60, 80, 80);
 	 * @example
-await createCanvas(200);
-let logo = await load('/assets/p5play_logo.webp');
+createCanvas(200);
+let logo = loadImage('/assets/p5play_logo.webp');
 
-background(200);
-shadow(0);
-image(logo, 36, 36, 128, 128);
+function setup() {
+	background(200);
+	shadow(0);
+	image(logo, 36, 36, 128, 128);
+}
 	 */
 	function shadow(color: string | Color): void;
 
@@ -564,7 +626,7 @@ image(logo, 36, 36, 128, 128);
 	 * 
 	 * Not available in q5 WebGPU.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 noStroke();
 shadow('black');
@@ -586,17 +648,17 @@ rect(104, 104, 80, 80);
 	 * @param {number} offsetY vertical offset of the shadow, defaults to be the same as offsetX
 	 * @param {number} blur blur radius of the shadow, defaults to 0
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 noStroke();
 shadow(50);
 
-Q5.draw = function () {
+function draw() {
   background(200);
 	shadowBox(-20, mouseY, 10);
 	circle(100, 100, 80, 80);
 }
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 noStroke();
 
@@ -633,7 +695,7 @@ text('q5', 60, 115);
 	 * @param {number} x translation along the x-axis
 	 * @param {number} y translation along the y-axis
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	
 	translate(100, 100);
@@ -646,7 +708,7 @@ Q5.draw = function () {
 	 * Rotates the drawing context.
 	 * @param {number} angle rotation angle in radians
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	
 	translate(100, 100);
@@ -666,7 +728,7 @@ Q5.draw = function () {
 	 * @param {number} x scaling factor along the x-axis
 	 * @param {number} [y] scaling factor along the y-axis
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	
 	scale(4);
@@ -679,7 +741,7 @@ Q5.draw = function () {
 	 * Shears the drawing context along the x-axis.
 	 * @param {number} angle shear angle in radians
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	
 	translate(25, 60);
@@ -693,7 +755,7 @@ Q5.draw = function () {
 	 * Shears the drawing context along the y-axis.
 	 * @param {number} angle shear angle in radians
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	
 	translate(25, 60);
@@ -718,7 +780,7 @@ Q5.draw = function () {
 	 * @param {number} e horizontal moving
 	 * @param {number} f vertical moving
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 
 	applyMatrix(2, 1, 1, 1, 100, 100);
@@ -733,7 +795,7 @@ Q5.draw = function () {
 	 * q5 runs this function before every time the `draw` function is run,
 	 * so that transformations don't carry over to the next frame.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 translate(100, 100);
@@ -747,7 +809,7 @@ square(0, 0, 50);
 	/** ⬜️
 	 * Saves the current transformation matrix.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 translate(100, 100);
 pushMatrix();
@@ -761,7 +823,7 @@ ellipse(0, 0, 120, 40);
 	/** ⬜️
 	 * Restores the previously saved transformation matrix.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 translate(100, 100);
 pushMatrix();
@@ -779,7 +841,7 @@ ellipse(0, 0, 120, 40);
 	 * rect mode, ellipse mode, text size, text align, text baseline, and
 	 * shadow settings.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 
 	pushStyles();
@@ -799,7 +861,7 @@ Q5.draw = function () {
 	/** ⬜️
 	 * Saves the current drawing style settings and transformations.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 push();
 fill('blue');
@@ -838,7 +900,7 @@ square(0, 0, 50);
 
 	/** ⬜️
 	 * Creates a graphics buffer.
-	 * 
+	 *
 	 * Disabled by default in q5 WebGPU.
 	 * See issue [#104](https://github.com/q5js/q5.js/issues/104) for details.
 	 * @param {number} w width
@@ -889,7 +951,7 @@ square(0, 0, 50);
 	 * @param {number} [c3] fourth color component (alpha)
 	 * @returns {Color} a new `Color` object
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 rect(0, 0, 100, 200);
 
 //                ( r,   g,   b,   a)
@@ -899,22 +961,22 @@ stroke(bottle);
 strokeWeight(30);
 circle(100, 100, 155);
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 //          (gray, alpha)
 let c = color(200, 50);
 
-Q5.draw = function () {
+function draw() {
 	background(c);
 	circle(mouseX, mouseY, 50);
 	c.g = (c.g + 1) % 256;
 }
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
 
 //           (r, g, b,   a)
 let c = color(0, 1, 1, 0.2);
 
-Q5.draw = function () {
+q.draw = () => {
 	fill(c);
 	circle(mouseX, mouseY, 50);
 };
@@ -935,7 +997,7 @@ Q5.draw = function () {
 	 * @param {1 | 255} format color format (1 for float, 255 for integer)
 	 * @param {'srgb' | 'display-p3'} [gamut] color gamut
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 colorMode(RGB, 1);
 fill(1, 0, 0);
@@ -945,7 +1007,7 @@ rect(66, 0, 67, 200);
 fill(0, 0, 1);
 rect(133, 0, 67, 200);
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 colorMode(OKLCH);
 
@@ -965,7 +1027,7 @@ rect(100, 0, 100, 200);
 	 * rgb colors are mapped to the full P3 gamut, even when they use the
 	 * legacy integer 0-255 format.
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 colorMode(RGB);
 
@@ -997,16 +1059,16 @@ background(255, 0, 0);
 	 * - `hue`: 0 to 360
 	 * - `alpha`: 0 to 1
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 colorMode(OKLCH);
 
 background(0.64, 0.3, 30);
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 colorMode(OKLCH);
 
-Q5.draw = function () {
+function draw() {
 	background(0.7, 0.16, frameCount % 360);
 }
 	 */
@@ -1032,13 +1094,13 @@ Q5.draw = function () {
 	 * - `lightness`: 0 to 100
 	 * - `alpha`: 0 to 1
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 colorMode(HSL);
 
 background(0, 100, 50);
 	 * @example
-await createCanvas(200, 220);
+createCanvas(200, 220);
 noStroke();
 
 colorMode(HSL);
@@ -1065,13 +1127,13 @@ for (let h = 0; h < 360; h += 10) {
 	 * - `brightness`: 0 to 100
 	 * - `alpha`: 0 to 1
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 colorMode(HSB);
 
 background(0, 100, 100);
 	 * @example
-await createCanvas(200, 220);
+createCanvas(200, 220);
 noStroke();
 
 colorMode(HSB);
@@ -1091,7 +1153,7 @@ for (let h = 0; h < 360; h += 10) {
 	 * less saturated and darker in this example, as it would on
 	 * an SDR display.
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 colorMode(RGB, 255, SRGB);
 
@@ -1107,7 +1169,7 @@ background(255, 0, 0);
 	 * If your display is HDR capable, note that full red appears
 	 * fully saturated and bright in the following example.
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 colorMode(RGB, 255, DISPLAY_P3);
 
@@ -1117,12 +1179,12 @@ background(255, 0, 0);
 
 	class Color {
 		/** 🎨
-		 * This constructor strictly accepts 4 numbers, which are the color 
+		 * This constructor strictly accepts 4 numbers, which are the color
 		 * components.
-		 * 
+		 *
 		 * Use the `color` function for greater flexibility, it runs
 		 * this constructor internally.
-		 * 
+		 *
 		 * `Color` is not actually a class itself, it's a reference to a
 		 * Q5 color class based on the color mode, format, and gamut.
 		 */
@@ -1163,7 +1225,7 @@ background(255, 0, 0);
 	 *   - PIXELATED: pixels rendered as sharp squares
 	 * @param {number} scale can also be given as a string (for example "x2")
 	 * @example
-await createCanvas(50, 25);
+createCanvas(50, 25);
 
 displayMode(CENTER, PIXELATED, 4);
 
@@ -1179,7 +1241,7 @@ circle(25, 12.5, 16);
 
 	/** 💻
 	 * A `displayMode` setting.
-	 * 
+	 *
 	 * The canvas will be scaled to fill the parent element,
 	 * with letterboxing if necessary to preserve its aspect ratio.
 	 */
@@ -1187,14 +1249,14 @@ circle(25, 12.5, 16);
 
 	/** 💻
 	 * A `displayMode` render quality.
-	 * 
+	 *
 	 * Smooth upscaling is used if the canvas is scaled.
 	 */
 	const SMOOTH: 'smooth';
 
 	/** 💻
 	 * A `displayMode` render quality.
-	 * 
+	 *
 	 * Pixels are rendered as sharp squares if the canvas is scaled.
 	 */
 	const PIXELATED: 'pixelated';
@@ -1209,12 +1271,12 @@ circle(25, 12.5, 16);
 	 * CSS color string, grayscale value, and color component values.
 	 * @param {Color | Q5.Image} filler a color or image to draw
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background('crimson');
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
 
-Q5.draw = function () {
+q.draw = () => {
 	background(0.5, 0.4);
 	circle(mouseX, mouseY, 20);
 };
@@ -1232,7 +1294,7 @@ Q5.draw = function () {
 	 * @param {number} [br] bottom-right radius
 	 * @param {number} [bl] bottom-left radius
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 rect(30, 20, 40, 60);
@@ -1251,7 +1313,7 @@ rect(130, 120, 40, 60, 30, 2, 8, 20);
 	 * @param {number} [br] bottom-right radius
 	 * @param {number} [bl] bottom-left radius
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 square(30, 30, 40);
@@ -1266,7 +1328,7 @@ square(130, 130, 40, 30, 2, 8, 20);
 	 * @param {number} y y-coordinate
 	 * @param {number} diameter diameter of the circle
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 circle(100, 50, 80);
 	 */
 	function circle(x: number, y: number, diameter: number): void;
@@ -1278,7 +1340,7 @@ circle(100, 50, 80);
 	 * @param {number} width width of the ellipse
 	 * @param {number} [height] height of the ellipse
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 ellipse(100, 50, 160, 80);
 	 */
 	function ellipse(x: number, y: number, width: number, height?: number): void;
@@ -1297,7 +1359,7 @@ ellipse(100, 50, 160, 80);
 	 * @param {number} stop angle to stop the arc
 	 * @param {number} [mode] shape and stroke style setting, default is `PIE_OPEN` for a pie shape with an unclosed stroke, can be `PIE`, `CHORD`, or `CHORD_OPEN`
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 arc(40, 40, 40, 40, 0.8, -0.8);
@@ -1314,7 +1376,7 @@ arc(160, 160, 40, 40, 0.8, -0.8, CHORD);
 	 * @param {number} x2 x-coordinate of the second point
 	 * @param {number} y2 y-coordinate of the second point
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 stroke('lime');
 line(20, 20, 180, 80);
 	 */
@@ -1328,14 +1390,14 @@ line(20, 20, 180, 80);
 	 * @param {number} y2 y-coordinate of the second point
 	 * @param {number} r radius of the capsule semi-circle ends
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 strokeWeight(5);
 capsule(40, 40, 160, 60, 10);
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
 
-Q5.draw = function () {
+q.draw = () => {
 	background(0.8);
 	strokeWeight(10);
 	capsule(0, 0, mouseX, mouseY, 20);
@@ -1348,7 +1410,7 @@ Q5.draw = function () {
 	 * @param {number} x x-coordinate
 	 * @param {number} y y-coordinate
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 stroke('white');
 point(75, 50);
 
@@ -1359,7 +1421,7 @@ point(125, 50);
 
 	/** 🧑‍🎨
 	 * Set the global composite operation for the canvas context.
-	 * 
+	 *
 	 * Not available in q5 WebGPU.
 	 * @param {string} val composite operation
 	 */
@@ -1371,7 +1433,7 @@ point(125, 50);
 	 * Not available in q5 WebGPU.
 	 * @param {CanvasLineCap} val line cap style
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 strokeWeight(20);
 
@@ -1392,7 +1454,7 @@ line(50, 150, 150, 150);
 	 * Not available in q5 WebGPU.
 	 * @param {CanvasLineJoin} val line join style
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 strokeWeight(10);
 
@@ -1414,28 +1476,28 @@ triangle(50, 130, 150, 180, 50, 180);
 	 * `rect` and `square` are interpreted.
 	 * @param {string} mode
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 rectMode(CORNER);
 
 //  ( x,  y,   w,  h)
 rect(50, 25, 100, 50);
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 rectMode(CENTER);
 
 //  ( cX, cY,   w,  h)
 rect(100, 50, 100, 50);
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 rectMode(RADIUS);
 
 //  ( cX, cY, rX, rY)
 rect(100, 50, 50, 25);
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 rectMode(CORNERS);
 
@@ -1444,35 +1506,35 @@ rect(50, 25, 150, 75);
 	 */
 	function rectMode(mode: string): void;
 
-		/** 🧑‍🎨
+	/** 🧑‍🎨
 	 * Set to `CENTER` (default), `RADIUS`, `CORNER`, or `CORNERS`.
 	 * 
 	 * Changes how the first four inputs to
 	 * `ellipse`, `circle`, and `arc` are interpreted.
 	 * @param {string} mode
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 ellipseMode(CENTER);
 
 //     (  x,  y,   w,  h)
 ellipse(100, 50, 100, 50);
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 ellipseMode(RADIUS);
 
 //     (  x,  y, rX, rY)
 ellipse(100, 50, 50, 25);
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 ellipseMode(CORNER);
 
 //     (lX, tY,   w,  h)
 ellipse(50, 25, 100, 50);
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 ellipseMode(CORNERS);
 
@@ -1481,11 +1543,10 @@ ellipse(50, 25, 150, 75);
 	 */
 	function ellipseMode(mode: string): void;
 
-
 	/** 🧑‍🎨
 	 * Draws a curve.
 	 */
-	function curve( x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
+	function curve(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
 
 	/** 🧑‍🎨
 	 * Sets the amount of straight line segments used to make a curve.
@@ -1516,14 +1577,14 @@ curve(-100, -200, -50, 0, 50, 0, 100, -200);
 
 	/** 🧑‍🎨
 	 * Starts storing vertices for a contour.
-	 * 
+	 *
 	 * Not available in q5 WebGPU.
 	 */
 	function beginContour(): void;
 
 	/** 🧑‍🎨
 	 * Ends storing vertices for a contour.
-	 * 
+	 *
 	 * Not available in q5 WebGPU.
 	 */
 	function endContour(): void;
@@ -1593,9 +1654,9 @@ curve(-100, -200, -50, 0, 50, 0, 100, -200);
 	function quad(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
 
 	/** 🧑‍🎨
-	 * Sets the canvas to erase mode, where shapes will erase what's 
+	 * Sets the canvas to erase mode, where shapes will erase what's
 	 * underneath them instead of drawing over it.
-	 * 
+	 *
 	 * Not available in q5 WebGPU.
 	 * @param {number} [fillAlpha] opacity level of the fill color
 	 * @param {number} [strokeAlpha] opacity level of the stroke color
@@ -1604,14 +1665,14 @@ curve(-100, -200, -50, 0, 50, 0, 100, -200);
 
 	/** 🧑‍🎨
 	 * Resets the canvas from erase mode to normal drawing mode.
-	 * 
+	 *
 	 * Not available in q5 WebGPU.
 	 */
 	function noErase(): void;
 
 	/** 🧑‍🎨
 	 * Checks if a given point is within the current path's fill area.
-	 * 
+	 *
 	 * Not available in q5 WebGPU.
 	 * @param {number} x x-coordinate of the point
 	 * @param {number} y y-coordinate of the point
@@ -1621,7 +1682,7 @@ curve(-100, -200, -50, 0, 50, 0, 100, -200);
 
 	/** 🧑‍🎨
 	 * Checks if a given point is within the current path's stroke.
-	 * 
+	 *
 	 * Not available in q5 WebGPU.
 	 * @param {number} x x-coordinate of the point
 	 * @param {number} y y-coordinate of the point
@@ -1651,20 +1712,20 @@ curve(-100, -200, -50, 0, 50, 0, 100, -200);
 	 * @param {string} url url of the image to load
 	 * @returns {Q5.Image | Promise<Q5.Image>} image or promise
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let logo = loadImage('/q5js_logo.avif');
 
-Q5.draw = function () {
+function draw() {
 	background(logo);
 }
 	 * @example
-await createCanvas(200, GPU);
-await createCanvas(200);
+let q = await Q5.WebGPU();
+createCanvas(200);
 
 let logo = loadImage('/q5js_logo.avif');
 
-Q5.draw = function () {
+q.draw = () => {
 	background(logo);
 };
 	 */
@@ -1682,23 +1743,33 @@ Q5.draw = function () {
 	 * @param {number} [sw] width of the subsection of the source image
 	 * @param {number} [sh] height of the subsection of the source image
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let logo = loadImage('/q5js_logo.avif');
 
-Q5.draw = function () {
+function draw() {
 	image(logo, 0, 0, 200, 200);
 }
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let logo = loadImage('/q5js_logo.avif');
 
-Q5.draw = function () {
+function draw() {
   image(logo, 0, 0, 200, 200, 256, 256, 512, 512);
 }
 	 */
-	function image(img: Q5.Image | HTMLVideoElement, dx: number, dy: number, dw?: number, dh?: number, sx?: number, sy?: number, sw?: number, sh?: number): void;
+	function image(
+		img: Q5.Image | HTMLVideoElement,
+		dx: number,
+		dy: number,
+		dw?: number,
+		dh?: number,
+		sx?: number,
+		sy?: number,
+		sw?: number,
+		sh?: number
+	): void;
 
 	/** 🌆
 	 * Set to `CORNER` (default), `CORNERS`, or `CENTER`.
@@ -1706,30 +1777,30 @@ Q5.draw = function () {
 	 * Changes how inputs to `image` are interpreted.
 	 * @param {string} mode
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let logo = loadImage('/q5js_logo.avif');
 
-Q5.draw = function () {
+function draw() {
 	imageMode(CORNER);
 
 	//   ( img,  x,  y,   w,   h)
 	image(logo, 50, 50, 100, 100);
 }
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let logo = loadImage('/q5js_logo.avif');
 
-Q5.draw = function () {
+function draw() {
 	imageMode(CENTER);
 
 	//   ( img,  cX,  cY,   w,   h)
 	image(logo, 100, 100, 100, 100);
 }
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let logo = loadImage('/q5js_logo.avif');
 
-Q5.draw = function () {
+function draw() {
 	imageMode(CORNERS);
 
 	//   ( img, x1, y1,  x2,  y2)
@@ -1741,11 +1812,11 @@ Q5.draw = function () {
 	/** 🌆
 	 * Sets the default image scale, which is applied to images when
 	 * they are drawn without a specified width or height.
-	 * 
+	 *
 	 * By default it is 0.5 so images appear at their actual size
 	 * when pixel density is 2. Images will be drawn at a consistent
 	 * default size relative to the canvas regardless of pixel density.
-	 * 
+	 *
 	 * This function must be called before images are loaded to
 	 * have an effect.
 	 * @param {number} scale
@@ -1758,12 +1829,14 @@ Q5.draw = function () {
 	 * @param {number} w new width
 	 * @param {number} h new height
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
-let logo = await load('/q5js_logo.avif');
+let logo = loadImage('/q5js_logo.avif');
 
-logo.resize(128, 128);
-image(logo, 0, 0, 200, 200);
+function setup() {
+	logo.resize(128, 128);
+	image(logo, 0, 0, 200, 200);
+}
 	 */
 	function resize(w: number, h: number): void;
 
@@ -1778,21 +1851,27 @@ image(logo, 0, 0, 200, 200);
 	 * their actual size. This is the default setting, so running this
 	 * function only has an effect if `noSmooth` has been called.
 	 * @example
-await createCanvas(200);
-let icon = await load('/q5js_icon.png');
-image(icon, 0, 0, 200, 200);
+createCanvas(200);
+
+let icon = loadImage('/q5js_icon.png');
+
+function setup() {
+	image(icon, 0, 0, 200, 200);
+}
 	 */
 	function smooth(): void;
 
 	/** 🌆
 	 * Disables smooth image rendering for a pixelated look.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
-let icon = await load('/q5js_icon.png');
+let icon = loadImage('/q5js_icon.png');
 
-noSmooth();
-image(icon, 0, 0, 200, 200);
+function setup() {
+	noSmooth();
+	image(icon, 0, 0, 200, 200);
+}
 	 */
 	function noSmooth(): void;
 
@@ -1816,12 +1895,14 @@ image(icon, 0, 0, 200, 200);
 	 * each copy separately.
 	 * @param {string | number} color tint color
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
-let logo = await load('/q5js_logo.avif');
+let logo = loadImage('/q5js_logo.avif');
 
-tint(255, 0, 0, 128);
-image(logo, 0, 0, 200, 200);
+function setup() {
+	tint(255, 0, 0, 128);
+	image(logo, 0, 0, 200, 200);
+}
 	 */
 	function tint(color: string | number): void;
 
@@ -1854,12 +1935,14 @@ image(logo, 0, 0, 200, 200);
 	 * @param {number} dw width of the destination region
 	 * @param {number} dh height of the destination region
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
-let logo = await load('/q5js_logo.avif');
+let logo = loadImage('/q5js_logo.avif');
 
-logo.inset(256, 256, 512, 512, 0, 0, 256, 256);
-image(logo, 0, 0, 200, 200);
+function setup() {
+	logo.inset(256, 256, 512, 512, 0, 0, 256, 256);
+	image(logo, 0, 0, 200, 200);
+}
 	 */
 	function inset(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
 
@@ -1879,7 +1962,7 @@ image(logo, 0, 0, 200, 200);
 	 * @param {number} [h] height of the area, default is 1
 	 * @returns {Q5.Image | number[]}
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	noStroke();
 	circle(100, 100, frameCount % 200);
@@ -1889,12 +1972,14 @@ Q5.draw = function () {
   text(col, mouseX, mouseY);
 }
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
-let logo = await load('/q5js_logo.avif');
+let logo = loadImage('/q5js_logo.avif');
 
-let cropped = logo.get(256, 256, 512, 512);
-image(cropped, 0, 0, 200, 200);
+function setup() {
+	let cropped = logo.get(256, 256, 512, 512);
+	image(cropped, 0, 0, 200, 200);
+}
 	 */
 	function get(x: number, y: number, w?: number, h?: number): Q5.Image | number[];
 
@@ -1909,10 +1994,10 @@ image(cropped, 0, 0, 200, 200);
 	 * @param {number} y
 	 * @param {any} val color, canvas, or image
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let c = color('lime');
 
-Q5.draw = function () {
+function draw() {
 	set(random(200), random(200), c);
 	updatePixels();
 }
@@ -1921,14 +2006,14 @@ Q5.draw = function () {
 
 	/** 🌆
 	 * Array of pixel color data from a canvas or image.
-	 * 
+	 *
 	 * Each pixel is represented by four consecutive values in the array,
 	 * corresponding to its red, green, blue, and alpha channels.
-	 * 
+	 *
 	 * The top left pixel's data is at the beginning of the array
 	 * and the bottom right pixel's data is at the end, going from
 	 * left to right and top to bottom.
-	 * 
+	 *
 	 * Use `loadPixels` to load current pixel data from a canvas or image.
 	 */
 	var pixels: number[];
@@ -1942,7 +2027,7 @@ Q5.draw = function () {
 frameRate(5);
 let icon = loadImage('/q5js_icon.png');
 
-Q5.draw = function () {
+function draw() {
   icon.loadPixels();
   for (let i = 0; i < icon.pixels.length; i += 16) {
     icon.pixels[i + 1] = random(255);
@@ -1956,7 +2041,7 @@ Q5.draw = function () {
 	/** 🌆
 	 * Applies changes in the `pixels` array to the canvas or image.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 for (let x = 0; x < 200; x += 5) {
 	for (let y = 0; y < 200; y += 5) {
@@ -1977,10 +2062,13 @@ updatePixels();
 	 * @param {string} type filter type or a CSS filter string
 	 * @param {number} [value] optional value, depends on filter type
 	 * @example
-await createCanvas(200);
-let logo = await load('/q5js_logo.avif');
-logo.filter(INVERT);
-image(logo, 0, 0, 200, 200);
+createCanvas(200);
+let logo = loadImage('/q5js_logo.avif');
+
+function setup() {
+	logo.filter(INVERT);
+	image(logo, 0, 0, 200, 200);
+}
 	 */
 	function filter(type: string, value?: number): void;
 
@@ -2044,13 +2132,13 @@ image(logo, 0, 0, 200, 200);
 	 * @param {number} [wrapWidth] maximum line width in characters
 	 * @param {number} [lineLimit] maximum number of lines
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background('silver');
 
 textSize(32);
 text('Hello, world!', 12, 60);
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 textSize(20);
 
@@ -2085,7 +2173,7 @@ text(info, 12, 30, 20, 6);
 	 * @param {string} url URL of the font to load
 	 * @returns {FontFace | Promise<FontFace>} font or promise
 	 * @example
-await createCanvas(200, 56);
+createCanvas(200, 56);
 
 loadFont('/assets/Robotica.ttf');
 
@@ -2095,7 +2183,7 @@ function setup() {
   text('Hello!', 2, 54);
 }
 	 * @example
-await createCanvas(200, 74);
+createCanvas(200, 74);
 
 loadFont(
   'fonts.googleapis.com/css2?family=Pacifico'
@@ -2107,7 +2195,7 @@ function setup() {
   text('Hello!', 2, 68);
 }
 	 */
-	function loadFont(url: string): FontFace | Promise<FontFace>
+	function loadFont(url: string): FontFace | Promise<FontFace>;
 
 	/** ✍️
 	 * Sets the current font to be used for rendering text.
@@ -2116,7 +2204,7 @@ function setup() {
 	 * "sans-serif" or the last font loaded.
 	 * @param {string} fontName name of the font family or a FontFace object
 	 * @example
-await createCanvas(200, 160);
+createCanvas(200, 160);
 background(200);
 
 textFont('serif');
@@ -2124,13 +2212,13 @@ textFont('serif');
 textSize(32);
 text('Hello, world!', 15, 90);
 	 * @example
-await createCanvas(200, GPU);
-await createCanvas(200);
+let q = await Q5.WebGPU();
+createCanvas(200);
 background(0.8);
 
 textFont('monospace');
 
-Q5.setup = function () {
+q.setup = () => {
   text('Hello, world!', -65, 0);
 }
 	 */
@@ -2141,7 +2229,7 @@ Q5.setup = function () {
 	 * @param {number} [size] size of the font in pixels
 	 * @returns {number | void} current font size when no argument is provided
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 
 	textSize(abs(mouseX));
@@ -2155,7 +2243,7 @@ Q5.draw = function () {
 	 * @param {number} [leading] line height in pixels
 	 * @returns {number | void} current line height when no argument is provided
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 
 	textSize(abs(mouseX));
@@ -2169,7 +2257,7 @@ Q5.draw = function () {
 	 * Sets the current text style.
 	 * @param {'normal' | 'italic' | 'bold' | 'bolditalic'} style font style
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 
 textStyle(ITALIC);
@@ -2184,7 +2272,7 @@ text('Hello, world!', 12, 106);
 	 * @param {'left' | 'center' | 'right'} horiz horizontal alignment
 	 * @param {'top' | 'middle' | 'bottom' | 'alphabetic'} [vert] vertical alignment
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 textSize(32);
 
@@ -2207,7 +2295,7 @@ text('Hello, world!', 100, 100);
 	 * - 900: black/heavy
 	 * @param {number | string} weight font weight
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 textSize(32);
 textAlign(CENTER, MIDDLE);
@@ -2222,7 +2310,7 @@ text('Hello, world!', 100, 100);
 	 * @param {string} str string to measure
 	 * @returns {number} width of the text in pixels
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 
 	textSize(abs(mouseX));
@@ -2237,7 +2325,7 @@ Q5.draw = function () {
 	 * @param {string} str string to measure
 	 * @returns {number} ascent of the text in pixels
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 
 	textSize(abs(mouseX));
@@ -2252,7 +2340,7 @@ Q5.draw = function () {
 	 * @param {string} str string to measure
 	 * @returns {number} descent of the text in pixels
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 	background(200);
 	textSize(64);
 
@@ -2268,13 +2356,13 @@ await createCanvas(200);
 	 * @param {number} [lineLimit] maximum number of lines
 	 * @returns {Q5.Image} an image object representing the rendered text
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 textSize(96);
 
 let img = createTextImage('🐶');
 img.filter(INVERT);
 
-Q5.draw = function () {
+function draw() {
   image(img, 55, 10);
 }
 	 */
@@ -2297,18 +2385,20 @@ Q5.draw = function () {
 	 * @param {number} x x-coordinate where the image should be placed
 	 * @param {number} y y-coordinate where the image should be placed
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
+createCanvas(200);
 background(0.8);
 textSize(96);
 textAlign(CENTER, CENTER);
 
 textImage('🐶', 0, 0);
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
+createCanvas(200);
 
 loadFont('/assets/Robotica.ttf');
 
-Q5.setup = function () {
+q.setup = () => {
 	background(0.8);
 	textSize(66);
 	textImage('Hello!', -100, 100);
@@ -2325,7 +2415,7 @@ Q5.setup = function () {
 	 * @param {number} r number of digits to appear after the decimal point
 	 * @returns {string} a string representation of the number, formatted accordingly
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 
 textSize(32);
@@ -2387,9 +2477,9 @@ text(nf(PI, 4, 5), 10, 60);
 
 	/** 🖲️
 	 * Note that input responses inside `draw` can be delayed by
-	 * up to one frame cycle: from the exact moment an input event occurs 
+	 * up to one frame cycle: from the exact moment an input event occurs
 	 * to the next time a frame is drawn.
-	 * 
+	 *
 	 * Play sounds or trigger other non-visual feedback immediately
 	 * by responding to input events inside functions like
 	 * `mousePressed` and `keyPressed`.
@@ -2398,7 +2488,7 @@ text(nf(PI, 4, 5), 10, 60);
 	/** 🖲️
 	 * Current X position of the mouse.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	textSize(64);
 	text(round(mouseX), 50, 120);
@@ -2409,7 +2499,7 @@ Q5.draw = function () {
 	/** 🖲️
 	 * Current Y position of the mouse.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	circle(100, mouseY, 100);
 }
@@ -2431,7 +2521,7 @@ Q5.draw = function () {
 	 * 
 	 * The default value is an empty string.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	textSize(64);
 	text(mouseButton, 20, 120);
@@ -2442,7 +2532,7 @@ Q5.draw = function () {
 	/** 🖲️
 	 * True if the mouse is currently pressed, false otherwise.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	if (mouseIsPressed) background(100);
 	else background(200);
 }
@@ -2452,10 +2542,10 @@ Q5.draw = function () {
 	/** 🖲️
 	 * Define this function to respond to mouse down events.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let gray = 95;
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	background(gray % 256);
 	gray += 40;
 }
@@ -2465,7 +2555,7 @@ Q5.mousePressed = function () {
 	/** 🖲️
 	 * Define this function to respond to mouse up events.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let gray = 95;
 
 function mouseReleased() {
@@ -2481,7 +2571,7 @@ function mouseReleased() {
 	 * On touchscreen devices this function is not called
 	 * when the user drags their finger on the screen.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let gray = 95;
 
 function mouseMoved() {
@@ -2497,7 +2587,7 @@ function mouseMoved() {
 	 * Dragging the mouse is defined as moving the mouse
 	 * while a mouse button is pressed.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let gray = 95;
 
 function mouseDragged() {
@@ -2510,7 +2600,7 @@ function mouseDragged() {
 	/** 🖲️
 	 * Define this function to respond to mouse double click events.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let gray = 95;
 
 function doubleClicked() {
@@ -2523,7 +2613,7 @@ function doubleClicked() {
 	/** 🖲️
 	 * The name of the last key pressed.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	textSize(64);
 	text(key, 20, 120);
@@ -2534,7 +2624,7 @@ Q5.draw = function () {
 	/** 🖲️
 	 * True if a key is currently pressed, false otherwise.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	if (keyIsPressed) background(100);
 	else background(200);
 }
@@ -2547,7 +2637,7 @@ Q5.draw = function () {
 	 * @param {string} key key to check
 	 * @returns {boolean} true if the key is pressed, false otherwise
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	
 	if (keyIsDown('f') && keyIsDown('j')) {
@@ -2560,7 +2650,7 @@ Q5.draw = function () {
 	/** 🖲️
 	 * Define this function to respond to key down events.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let gray = 95;
 function keyPressed() {
@@ -2573,7 +2663,7 @@ function keyPressed() {
 	/** 🖲️
 	 * Define this function to respond to key up events.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let gray = 95;
 function keyReleased() {
@@ -2588,7 +2678,7 @@ function keyReleased() {
 	 * browser window. Each touch being an object with
 	 * `id`, `x`, and `y` properties.
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	for (let touch of touches) {
 		circle(touch.x, touch.y, 100);
@@ -2604,7 +2694,7 @@ Q5.draw = function () {
 	 * Return true to enable touch gestures like pinch-to-zoom
 	 * and scroll, which q5 disables on the canvas by default.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let gray = 95;
 function touchStarted() {
@@ -2621,7 +2711,7 @@ function touchStarted() {
 	 * Return true to enable touch gestures like pinch-to-zoom
 	 * and scroll, which q5 disables on the canvas by default.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let gray = 95;
 function touchEnded() {
@@ -2638,7 +2728,7 @@ function touchEnded() {
 	 * Return true to enable touch gestures like pinch-to-zoom
 	 * and scroll, which q5 disables on the canvas by default.
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 let gray = 95;
 
 function touchMoved() {
@@ -2659,7 +2749,7 @@ function touchMoved() {
 	 * The `event` property contains the original
 	 * [PointerEvent](https://developer.mozilla.org/docs/Web/API/PointerEvent).
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	for (let pointerID in pointers) {
 		let pointer = pointers[pointerID];
@@ -2677,7 +2767,7 @@ Q5.draw = function () {
 	 * @param {number} [x] x-coordinate of the cursor's point
 	 * @param {number} [y] y-coordinate of the cursor's point
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 cursor('pointer');
 	 */
 	function cursor(name: string, x?: number, y?: number): void;
@@ -2685,7 +2775,7 @@ cursor('pointer');
 	/** 🖲️
 	 * Hides the cursor within the bounds of the canvas.
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 noCursor();
 	 */
 	function noCursor(): void;
@@ -2699,7 +2789,7 @@ noCursor();
 	 * Return true to allow the default behavior of scrolling the page.
 	 * @example
 let x = y = 100;
-Q5.draw = function () {
+function draw() {
 	circle(x, y, 10);
 }
 function mouseWheel(e) {
@@ -2720,7 +2810,7 @@ function mouseWheel(e) {
 	 * 
 	 * @param {boolean} unadjustedMovement set to true to disable OS-level mouse acceleration and access raw mouse input
 	 * @example
-Q5.draw = function () {
+function draw() {
 	circle(mouseX / 10,  mouseY / 10, 10);
 }
 
@@ -2747,15 +2837,15 @@ function doubleClicked() {
 	 * @param {number} [high] upper bound (exclusive)
 	 * @returns {number | any} a random number or element
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 frameRate(5);
 
-Q5.draw = function () {
+function draw() {
 	circle(100, 100, random(20, 200));
 }
 	 * @example
-Q5.draw = function () {
+function draw() {
 	circle(random(200), random(200), 10);
 }
 	 */
@@ -2770,13 +2860,14 @@ Q5.draw = function () {
 	 * @param {number} amount absolute maximum amount of jitter, default is 1
 	 * @returns {number} random number between -val and val
 	 * @example
-Q5.draw = function () {
+function draw() {
 	circle(mouseX + jit(3), mouseY + jit(3), 5);
 }
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
+createCanvas(200, 100);
 
-Q5.draw = function () {
+q.draw = () => {
 	circle(jit(50), 0, random(50));
 };
 	 */
@@ -2791,13 +2882,13 @@ Q5.draw = function () {
 	 * @param {number} [z] z-coordinate input
 	 * @returns {number} a noise value
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	let n = noise(frameCount * 0.01);
 	circle(100, 100, n * 200);
 }
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	let t = (frameCount + mouseX) * 0.02;
 	for (let x = -5; x < 220; x += 10) {
@@ -2806,9 +2897,9 @@ Q5.draw = function () {
 	}
 }
 	 * @example
-await createCanvas(200);
+let q = await Q5.WebGPU();
 
-Q5.draw = () => {
+q.draw = () => {
 	noStroke();
 	let t = millis() * 0.002;
 	for (let x = -100; x < 100; x += 5) {
@@ -2831,7 +2922,7 @@ Q5.draw = () => {
 	 * @param {number} y2 y-coordinate of the second point
 	 * @returns {number} distance between the points
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(200);
 	circle(100, 100, 20);
 	circle(mouseX, mouseY, 20);
@@ -2920,7 +3011,7 @@ Q5.draw = function () {
 	 * @param {number} [d] number of decimal places to round to
 	 * @returns {number} rounded number
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 textSize(32);
 text(round(PI, 5), 10, 60);
@@ -2932,7 +3023,7 @@ text(round(PI, 5), 10, 60);
 	 * @param {number} n a number
 	 * @returns {number} rounded number
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 textSize(32);
 text(ceil(PI), 10, 60);
@@ -2944,7 +3035,7 @@ text(ceil(PI), 10, 60);
 	 * @param {number} n a number
 	 * @returns {number} rounded number
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 background(200);
 textSize(32);
 text(floor(-PI), 10, 60);
@@ -2956,7 +3047,7 @@ text(floor(-PI), 10, 60);
 	 * @param {...number} args numbers to compare
 	 * @returns {number} minimum
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(min(mouseX, 100));
 }
 	 */
@@ -2967,7 +3058,7 @@ Q5.draw = function () {
 	 * @param {...number} args numbers to compare
 	 * @returns {number} maximum
 	 * @example
-Q5.draw = function () {
+function draw() {
 	background(max(mouseX, 100));
 }
 	 */
@@ -2975,7 +3066,7 @@ Q5.draw = function () {
 
 	/** 🧮
 	 * Calculates the value of a base raised to a power.
-	 * 
+	 *
 	 * For example, `pow(2, 3)` calculates 2 * 2 * 2 which is 8.
 	 * @param {number} base base
 	 * @param {number} exponent exponent
@@ -3039,8 +3130,8 @@ Q5.draw = function () {
 
 	/** 🧮
 	 * Sets the noise generation mode.
-	 * 
-	 * Only the default mode, "perlin", is included in q5.js. Use of the 
+	 *
+	 * Only the default mode, "perlin", is included in q5.js. Use of the
 	 * other modes requires the q5-noiser module.
 	 * @param {'perlin' | 'simplex' | 'blocky'} mode noise generation mode
 	 */
@@ -3094,7 +3185,7 @@ Q5.draw = function () {
 	/** 🔊
 	 * q5.js includes low latency sound playback and basic mixing powered
 	 * by WebAudio.
-	 * 
+	 *
 	 * For audio filtering, synthesis, and analysis, consider using
 	 * [p5.sound](https://p5js.org/reference/p5.sound/).
 	 */
@@ -3124,12 +3215,12 @@ Q5.draw = function () {
 	 * @param {string} url sound file
 	 * @returns {Sound | Promise<Sound>} a new `Sound` object or promise
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let sound = loadSound('/assets/jump.wav');
 sound.volume = 0.3;
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	sound.play();
 }
 	 */
@@ -3148,12 +3239,12 @@ Q5.mousePressed = function () {
 	 * @param url audio file
 	 * @returns {HTMLAudioElement | Promise<HTMLAudioElement>} an HTMLAudioElement or promise
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let audio = loadAudio('/assets/retro.flac');
 audio.volume = 0.4;
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	audio.play();
 }
 	 */
@@ -3210,10 +3301,10 @@ Q5.mousePressed = function () {
 
 		/** 🔊
 		 * Plays the sound.
-		 * 
+		 *
 		 * If this function is run when the sound is already playing,
 		 * a new playback will start, causing a layering effect.
-		 * 
+		 *
 		 * If this function is run when the sound is paused,
 		 * all playback instances will be resumed.
 		 */
@@ -3227,7 +3318,7 @@ Q5.mousePressed = function () {
 		/** 🔊
 		 * Stops the sound, resetting its playback position
 		 * to the beginning.
-		 * 
+		 *
 		 * Removes all playback instances.
 		 */
 		stop(): void;
@@ -3262,7 +3353,7 @@ Q5.mousePressed = function () {
 	 * @param {string} [content] content of the element
 	 * @returns {HTMLElement} element
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let el = createEl('div', '*');
 el.position(50, 50);
@@ -3280,7 +3371,7 @@ el.style.color = 'white';
 	 * @param {string} [text] text content
 	 * @param {boolean} [newTab] whether to open the link in a new tab
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let link = createA('https://q5js.org', 'q5.js');
 link.position(16, 42);
@@ -3296,7 +3387,7 @@ link.addEventListener('mouseover', () => {
 	 * Creates a button element.
 	 * @param {string} [content] text content
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 let btn = createButton('Click me!');
 
@@ -3315,7 +3406,7 @@ btn.addEventListener('click', () => {
 	 * @param {string} [label] text label placed next to the checkbox
 	 * @param {boolean} [checked] initial state
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 let box = createCheckbox('Check me!');
 box.label.style.color = 'lime';
@@ -3333,12 +3424,12 @@ box.addEventListener('input', () => {
 	 * Use the `value` property to get or set the color value.
 	 * @param {string} [value] initial color value
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 let picker = createColorPicker();
 picker.value = '#fd7575';
 
-Q5.draw = function () {
+function draw() {
 	background(picker.value);
 }
 	 */
@@ -3348,7 +3439,7 @@ Q5.draw = function () {
 	 * Creates an image element.
 	 * @param {string} src url of the image
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 let img = createImg('/assets/p5play_logo.webp')
 	.position(0, 0)
@@ -3368,7 +3459,7 @@ let img = createImg('/assets/p5play_logo.webp')
 	 * @param {string} [value] initial value
 	 * @param {string} [type] text input type, can be 'text', 'password', 'email', 'number', 'range', 'search', 'tel', 'url'
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 textSize(64);
 
 let input = createInput();
@@ -3386,7 +3477,7 @@ input.addEventListener('input', () => {
 	 * Creates a paragraph element.
 	 * @param {string} [content] text content
 	 * @example
-await createCanvas(200, 50);
+createCanvas(200, 50);
 background('coral');
 
 let p = createP('Hello, world!');
@@ -3403,19 +3494,19 @@ p.style.color = 'pink';
 	 * Use the `value` property to get or set the value of the selected radio button.
 	 * @param {string} [groupName]
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 let radio = createRadio()
 	.option('square', '1')
 	.option('circle', '2');
 
-Q5.draw = function () {
+function draw() {
 	background(200);
 	if (radio.value == '1') square(75, 25, 50);
 	if (radio.value == '2') circle(100, 50, 50);
 }
 	 */
-	function createRadio(groupName): HTMLDivElement;
+	function createRadio(groupName?: string): HTMLDivElement;
 
 	/** 📑
 	 * Creates a select element.
@@ -3432,7 +3523,7 @@ Q5.draw = function () {
 	 * string or an array of strings.
 	 * @param {string} [placeholder] optional placeholder text that appears before an option is selected
 	 * @example
-await createCanvas(200, 100);
+createCanvas(200, 100);
 
 let sel = createSelect('Select a color')
 	.option('Red', '#f55')
@@ -3442,7 +3533,7 @@ sel.addEventListener('change', () => {
 	background(sel.value);
 });
 	 */
-	function createSelect(placeholder): HTMLSelectElement;
+	function createSelect(placeholder?: string): HTMLSelectElement;
 
 	/** 📑
 	 * Creates a slider element.
@@ -3455,13 +3546,13 @@ sel.addEventListener('change', () => {
 	 * @param {number} [value] initial value
 	 * @param {number} [step] step size
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let slider = createSlider(0, 255)
 	.position(10, 10)
 	.size(180);
 
-Q5.draw = function () {
+function draw() {
 	background(slider.val());
 }
 	 */
@@ -3481,7 +3572,7 @@ Q5.draw = function () {
 	 * @param {string} src url of the video
 	 * @returns {HTMLVideoElement | Promise<HTMLVideoElement>} a new video element or promise
 	 * @example
-await createCanvas(0);
+createCanvas(0);
 
 let vid = createVideo('/assets/apollo4.mp4');
 vid.size(200, 150);
@@ -3489,15 +3580,15 @@ vid.autoplay = vid.muted = vid.loop = true;
 vid.controls = true;
 
 	 * @example
-await createCanvas(200, 150);
+createCanvas(200, 150);
 let vid = createVideo('/assets/apollo4.mp4');
 vid.hide();
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	vid.currentTime = 0;
 	vid.play();
 }
-Q5.draw = function () {
+function draw() {
 	image(vid, 0, 0, 200, 150);
 	filter(HUE_ROTATE, 90);
 }
@@ -3524,30 +3615,30 @@ Q5.draw = function () {
 	 * @param {boolean} [flipped] whether to mirror the video vertically, true by default
 	 * @returns {HTMLVideoElement | Promise<HTMLVideoElement>} a new video element or promise
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	let cap = createCapture(VIDEO);
 	cap.size(200, 112.5);
 	canvas.remove();
 }
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let cap;
-Q5.mousePressed = function () {
+function mousePressed() {
   cap = createCapture(VIDEO);
   cap.hide();
 }
 
-Q5.draw = function () {
+function draw() {
   let y = frameCount % height;
   image(cap, 0, y, 200, 200);
 }
 	* @example
-await createCanvas(200);
+createCanvas(200);
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	let cap = createCapture({
 		video: { width: 640, height: 480 }
 	});
@@ -3594,12 +3685,12 @@ Q5.mousePressed = function () {
 	 * 
 	 * @returns {HTMLElement} a recorder, q5 DOM element
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 let rec = createRecorder();
 rec.bitrate = 10;
 
-Q5.draw = function () {
+function draw() {
 	circle(mouseX, random(height), 10);
 }
 	 */
@@ -3607,7 +3698,7 @@ Q5.draw = function () {
 
 	/** 🎞️
 	 * Starts recording the canvas or resumes recording if it was paused.
-	 * 
+	 *
 	 * If no recorder exists, one is created but not displayed.
 	 */
 	function record(): void;
@@ -3626,16 +3717,16 @@ Q5.draw = function () {
 	 * Saves the current recording as a video file.
 	 * @param {string} fileName
 	 * @example
-Q5.draw = function () {
+function draw() {
 	square(mouseX, random(200), 10);
 }
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	if (!recording) record();
 	else saveRecording('squares');
 }
 	 */
-	function saveRecording(fileName): void;
+	function saveRecording(fileName: string): void;
 
 	/** 🎞️
 	 * True if the canvas is currently being recorded.
@@ -3655,15 +3746,17 @@ Q5.mousePressed = function () {
 	 * @param {...string} urls
 	 * @returns {Promise<any[]>} a promise that resolves with objects
 	 * @example
-await createCanvas(200);
+let logo;
 
-let logo = await load('/q5js_logo.avif');
+async function setup() {
+	logo = await load('/q5js_logo.avif');
+}
 
-Q5.draw = function () {
+function draw() {
 	image(logo, 0, 0, 200, 200);
 }
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 // use with top level await in a module
 await load('/assets/Robotica.ttf');
@@ -3672,26 +3765,16 @@ background(255);
 textSize(24);
 text('Hello, world!', 16, 100);
 	 * @example
-await createCanvas(200);
+let q = await Q5.WebGPU();
+createCanvas(200);
 
 let [jump, retro] = await load(
 		'/assets/jump.wav', '/assets/retro.flac'
 	);
 
-Q5.mousePressed = () => {
+q.mousePressed = () => {
 	mouseButton == 'left' ? jump.play() : retro.play();
 };
-	 * @example
-await createCanvas(200);
-background(200);
-textSize(32);
-
-let myXML = await load('/assets/animals.xml');
-let mammals = myXML.getElementsByTagName('mammal');
-let y = 64;
-for (let mammal of mammals) {
-	text(mammal.textContent, 20, (y += 32));
-}
 	 */
 	function load(...urls: string[]): Promise<any[]>;
 
@@ -3705,21 +3788,21 @@ for (let mammal of mammals) {
 	 * @param {object} [data] canvas, image, or JS object
 	 * @param {string} [fileName] filename to save as
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 background(200);
 circle(100, 100, 50);
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	save('circle.png');
 }
 	 * @example
-await createCanvas(200);
+createCanvas(200);
 
 textSize(180);
 let bolt = createTextImage('⚡️');
 image(bolt, 16, -56);
 
-Q5.mousePressed = function () {
+function mousePressed() {
 	save(bolt, 'bolt.png');
 }
 	 */
@@ -3727,9 +3810,9 @@ Q5.mousePressed = function () {
 
 	/** 🛠️
 	 * Loads a text file from the specified url.
-	 * 
+	 *
 	 * Returns a promise if used in async `setup`.
-	 * 
+	 *
 	 * @param {string} url text file
 	 * @returns {object | Promise} an object containing the loaded text in the property `obj.text` or a promise
 	 */
@@ -3737,9 +3820,9 @@ Q5.mousePressed = function () {
 
 	/** 🛠️
 	 * Loads a JSON file from the specified url.
-	 * 
+	 *
 	 * Returns a promise if used in async `setup`.
-	 * 
+	 *
 	 * @param {string} url JSON file
 	 * @returns {any | Promise} an object or array containing the loaded JSON or a promise
 	 */
@@ -3747,9 +3830,9 @@ Q5.mousePressed = function () {
 
 	/** 🛠️
 	 * Loads a CSV file from the specified url.
-	 * 
+	 *
 	 * Returns a promise if used in async `setup`.
-	 * 
+	 *
 	 * @param {string} url CSV file
 	 * @returns {object[] | Promise<object[]>} an array of objects containing the loaded CSV or a promise
 	 */
@@ -3762,6 +3845,20 @@ Q5.mousePressed = function () {
 	 * 
 	 * @param {string} url xml file
 	 * @returns {Element | Promise<Element>} an object containing the loaded XML in a property called `obj.DOM` or a promise
+	 * @example
+async function setup() {
+	createCanvas(200);
+	background(200);
+	textSize(32);
+
+	let myXML = await loadXML('/assets/animals.xml');
+
+	let mammals = myXML.getElementsByTagName('mammal');
+	let y = 64;
+	for (let mammal of mammals) {
+		text(mammal.textContent, 20, (y += 32));
+	}
+}
 	 */
 	function loadXML(url: string): object | Promise<Element>;
 
@@ -3776,7 +3873,7 @@ Q5.mousePressed = function () {
 
 	/** 🛠
 	 * Shuffles the elements of an array.
-	 * 
+	 *
 	 * @param {any[]} arr array to shuffle
 	 * @param {boolean} [modify] whether to modify the original array, false by default which copies the array before shuffling
 	 * @returns {any[]} shuffled array
@@ -4028,7 +4125,7 @@ Q5.mousePressed = function () {
 	 * @param {string} code WGSL shader code excerpt
 	 * @returns {GPUShaderModule} a shader program
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
 
 let wobble = createShader(`
 @vertex
@@ -4044,13 +4141,13 @@ fn vertexMain(v: VertexParams) -> FragParams {
 	return f;
 }`);
 
-Q5.draw = function () {
+q.draw = () => {
 	clear();
 	shader(wobble);
 	plane(0, 0, 100);
 };
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
 
 let stripes = createShader(`
 @fragment
@@ -4059,7 +4156,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	return vec4(r, 0.0, 1, 1);
 }`);
 
-Q5.draw = function () {
+q.draw = () => {
 	shader(stripes);
 	triangle(-50, -50, 0, 50, 50, -50);
 };
@@ -4073,7 +4170,8 @@ Q5.draw = function () {
 	 * @param {number} w width or side length
 	 * @param {number} [h] height
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
+createCanvas(200);
 plane(0, 0, 100);
 	 */
 	function plane(x: number, y: number, w: number, h?: number): void;
@@ -4087,7 +4185,7 @@ plane(0, 0, 100);
 	/** ⚡️
 	 * Make q5 use the default shapes shader.
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
 
 let stripes = createShader(`
 @fragment
@@ -4096,7 +4194,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	return vec4(1, g, 0, 1);
 }`);
 
-Q5.draw = function () {
+q.draw = () => {
 	shader(stripes);
 	background(0);
 
@@ -4139,7 +4237,8 @@ Q5.draw = function () {
 	 * Use this function to customize a copy of the
 	 * [default frame shader](https://github.com/q5js/q5.js/blob/main/src/shaders/frame.wgsl).
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
+createCanvas(200);
 
 let boxy = createFrameShader(`
 @fragment
@@ -4150,7 +4249,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	return textureSample(tex, samp, uv);
 }`);
 
-Q5.draw = function () {
+q.draw = () => {
 	stroke(1);
 	strokeWeight(8);
 	line(mouseX, mouseY, pmouseX, pmouseY);
@@ -4167,7 +4266,7 @@ Q5.draw = function () {
 	 * @param {string} code WGSL shader code excerpt
 	 * @returns {GPUShaderModule} a shader program
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
 imageMode(CENTER);
 
 let logo = loadImage('/q5js_logo.avif');
@@ -4180,7 +4279,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	return texColor;
 }`);
 
-Q5.draw = function () {
+q.draw = () => {
 	background(0.7);
 	shader(grate);
 	image(logo, 0, 0, 180, 180);
@@ -4196,7 +4295,8 @@ Q5.draw = function () {
 	 * @param {string} code WGSL shader code excerpt
 	 * @returns {GPUShaderModule} a shader program
 	 * @example
-await createCanvas(200, 600, GPU);
+let q = await Q5.WebGPU();
+createCanvas(200, 600);
 
 let vid = createVideo('/assets/apollo4.mp4');
 vid.hide();
@@ -4224,7 +4324,7 @@ fn fragMain(f: FragParams) -> @location(0) vec4f {
 	return texColor;
 }`);
 
-Q5.draw = function () {
+q.draw = () => {
 	clear();
 	if (mouseIsPressed) vid.play();
 	shader(flipper);
@@ -4241,7 +4341,7 @@ Q5.draw = function () {
 	 * @param {string} code WGSL shader code excerpt
 	 * @returns {GPUShaderModule} a shader program
 	 * @example
-await createCanvas(200, GPU);
+let q = await Q5.WebGPU();
 textAlign(CENTER, CENTER);
 
 let spin = createTextShader(`
@@ -4267,7 +4367,7 @@ fn vertexMain(v : VertexParams) -> FragParams {
 	return f;
 }`);
 
-Q5.draw = function () {
+q.draw = () => {
 	clear();
 	shader(spin);
 	fill(1, 0, 1);