q5 1.4.1 → 1.4.3

package/q5.js

@@ -59,217 +59,17 @@ function Q5(scope, parent) {
 
 	defaultStyle();
 
-	//================================================================
-	// CONSTANTS
-	//================================================================
 	$.MAGIC = 0x9a0ce55;
 
-	$.RGB = 0;
-	$.HSV = 1;
-	$.HSB = 1;
-
-	$.CHORD = 0;
-	$.PIE = 1;
-	$.OPEN = 2;
-
-	$.RADIUS = 'radius';
-	$.CORNER = 'corner';
-	$.CORNERS = 'corners';
-
-	$.ROUND = 'round';
-	$.SQUARE = 'butt';
-	$.PROJECT = 'square';
-	$.MITER = 'miter';
-	$.BEVEL = 'bevel';
-
-	$.CLOSE = 1;
-
-	$.BLEND = 'source-over';
-	$.REMOVE = 'destination-out';
-	$.ADD = 'lighter';
-	$.DARKEST = 'darken';
-	$.LIGHTEST = 'lighten';
-	$.DIFFERENCE = 'difference';
-	$.SUBTRACT = 'subtract';
-	$.EXCLUSION = 'exclusion';
-	$.MULTIPLY = 'multiply';
-	$.SCREEN = 'screen';
-	$.REPLACE = 'copy';
-	$.OVERLAY = 'overlay';
-	$.HARD_LIGHT = 'hard-light';
-	$.SOFT_LIGHT = 'soft-light';
-	$.DODGE = 'color-dodge';
-	$.BURN = 'color-burn';
-
-	$.NORMAL = 'normal';
-	$.ITALIC = 'italic';
-	$.BOLD = 'bold';
-	$.BOLDITALIC = 'italic bold';
-
-	$.CENTER = 'center';
-	$.LEFT = 'left';
-	$.RIGHT = 'right';
-	$.TOP = 'top';
-	$.BOTTOM = 'bottom';
-	$.BASELINE = 'alphabetic';
-
-	$.LANDSCAPE = 'landscape';
-	$.PORTRAIT = 'portrait';
-
-	$.ALT = 18;
-	$.BACKSPACE = 8;
-	$.CONTROL = 17;
-	$.DELETE = 46;
-	$.DOWN_ARROW = 40;
-	$.ENTER = 13;
-	$.ESCAPE = 27;
-	$.LEFT_ARROW = 37;
-	$.OPTION = 18;
-	$.RETURN = 13;
-	$.RIGHT_ARROW = 39;
-	$.SHIFT = 16;
-	$.TAB = 9;
-	$.UP_ARROW = 38;
-
-	$.DEGREES = 'degrees';
-	$.RADIANS = 'radians';
-
-	$.HALF_PI = Math.PI / 2;
-	$.PI = Math.PI;
-	$.QUARTER_PI = Math.PI / 4;
-	$.TAU = Math.PI * 2;
-	$.TWO_PI = Math.PI * 2;
-
-	$.THRESHOLD = 1;
-	$.GRAY = 2;
-	$.OPAQUE = 3;
-	$.INVERT = 4;
-	$.POSTERIZE = 5;
-	$.DILATE = 6;
-	$.ERODE = 7;
-	$.BLUR = 8;
-
-	$.ARROW = 'default';
-	$.CROSS = 'crosshair';
-	$.HAND = 'pointer';
-	$.MOVE = 'move';
-	$.TEXT = 'text';
-
-	$.VIDEO = { video: true, audio: false };
-	$.AUDIO = { video: false, audio: true };
-
-	$.SHR3 = 1;
-	$.LCG = 2;
-
-	$.HARDWARE_FILTERS = true;
-	$.hint = (prop, val) => {
-		$[prop] = val;
-	};
-
-	//================================================================
-	// PUBLIC PROPERTIES
-	//================================================================
-	$.frameCount = 0;
-	$.deltaTime = 16;
-	$.mouseX = 0;
-	$.mouseY = 0;
-	$.mouseButton = null;
-	$.keyIsPressed = false;
-	$.mouseIsPressed = false;
-	$.key = null;
-	$.keyCode = null;
-	$.pixels = [];
-	$.accelerationX = 0;
-	$.accelerationY = 0;
-	$.accelerationZ = 0;
-	$.rotationX = 0;
-	$.rotationY = 0;
-	$.rotationZ = 0;
-	$.relRotationX = 0;
-	$.relRotationY = 0;
-	$.relRotationZ = 0;
-
-	$.pmouseX = 0;
-	$.pmouseY = 0;
-	$.pAccelerationX = 0;
-	$.pAccelerationY = 0;
-	$.pAccelerationZ = 0;
-	$.pRotationX = 0;
-	$.pRotationY = 0;
-	$.pRotationZ = 0;
-	$.pRelRotationX = 0;
-	$.pRelRotationY = 0;
-	$.pRelRotationZ = 0;
-
-	$.touches = [];
-
-	$._colorMode = $.RGB;
-	$._doStroke = true;
-	$._doFill = true;
-	$._strokeSet = false;
-	$._fillSet = false;
-	$._ellipseMode = $.CENTER;
-	$._rectMode = $.CORNER;
-	$._curveDetail = 20;
-	$._curveAlpha = 0.0;
-	$._loop = true;
-
-	$._textFont = 'sans-serif';
-	$._textSize = 12;
-	$._textLeading = 15;
-	$._textLeadDiff = 3;
-	$._textStyle = 'normal';
-
-	$._pixelDensity = 1;
-	$._lastFrameTime = 0;
-	$._targetFrameRate = null;
-	$._frameRate = $._fps = 60;
-
-	$._tint = null;
-
-	//================================================================
-	// PRIVATE VARS
-	//================================================================
-	let looper = null;
-	let firstVertex = true;
-	let curveBuff = [];
-	let imgData = null;
-	let preloadCnt = 0;
-	let keysHeld = {};
-	let millisStart = 0;
-	let tmpCtx = null;
-	let tmpCt2 = null;
-	let tmpBuf = null;
-
-	//================================================================
-	// ALIAS PROPERTIES
-	//================================================================
-
-	Object.defineProperty($, 'deviceOrientation', {
-		get: () => window.screen?.orientation?.type
-	});
-
-	Object.defineProperty($, 'windowWidth', {
-		get: () => window.innerWidth
-	});
-
-	Object.defineProperty($, 'windowHeight', {
-		get: () => window.innerHeight
-	});
-
-	Object.defineProperty($, 'drawingContext', {
-		get: () => ctx
-	});
-
-	//================================================================
-	// CANVAS
-	//================================================================
-
 	$.createCanvas = (width, height) => {
 		$.width = width;
 		$.height = height;
-		$.canvas.width = width * $._pixelDensity;
-		$.canvas.height = height * $._pixelDensity;
+		$.canvas.width = width;
+		$.canvas.height = height;
+		if (scope != 'image') {
+			$.canvas.width *= $._pixelDensity;
+			$.canvas.height *= $._pixelDensity;
+		}
 		defaultStyle();
 		if (scope != 'graphics' && scope != 'image') {
 			$.pixelDensity(Math.ceil($.displayDensity()));
@@ -277,1230 +77,1437 @@ function Q5(scope, parent) {
 		return $.canvas;
 	};
 
-	function cloneCtx() {
-		let c = {};
-		for (let prop in ctx) {
-			if (typeof ctx[prop] != 'function') c[prop] = ctx[prop];
-		}
-		delete c.canvas;
-		return c;
-	}
+	//================================================================
+	// IMAGE
+	//================================================================
 
-	$.resizeCanvas = (width, height) => {
-		$.width = width;
-		$.height = height;
-		let c = cloneCtx();
-		$.canvas.width = width * $._pixelDensity;
-		$.canvas.height = height * $._pixelDensity;
-		ctx = $._ctx = $.canvas.getContext('2d');
-		for (let prop in c) $._ctx[prop] = c[prop];
-		if (scope != 'graphics' && scope != 'image') $.pixelDensity($._pixelDensity);
+	$.loadPixels = () => {
+		imgData = ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
+		$.pixels = imgData.data;
+	};
+	$.updatePixels = () => {
+		if (imgData != null) ctx.putImageData(imgData, 0, 0);
 	};
 
-	$.createGraphics = (width, height) => {
-		let g = new Q5('graphics');
-		g.createCanvas(width, height);
-		return g;
+	let filterImpl = {};
+	filterImpl[$.THRESHOLD] = (data, thresh) => {
+		if (thresh === undefined) thresh = 127.5;
+		else thresh *= 255;
+		for (let i = 0; i < data.length; i += 4) {
+			const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
+			data[i] = data[i + 1] = data[i + 2] = gray >= thresh ? 255 : 0;
+		}
 	};
-	$.createImage = (width, height) => {
-		return new Q5.Image(width, height);
+	filterImpl[$.GRAY] = (data) => {
+		for (let i = 0; i < data.length; i += 4) {
+			const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
+			data[i] = data[i + 1] = data[i + 2] = gray;
+		}
+	};
+	filterImpl[$.OPAQUE] = (data) => {
+		for (let i = 0; i < data.length; i += 4) {
+			data[i + 3] = 255;
+		}
+	};
+	filterImpl[$.INVERT] = (data) => {
+		for (let i = 0; i < data.length; i += 4) {
+			data[i] = 255 - data[i];
+			data[i + 1] = 255 - data[i + 1];
+			data[i + 2] = 255 - data[i + 2];
+		}
+	};
+	filterImpl[$.POSTERIZE] = (data, lvl) => {
+		let lvl1 = lvl - 1;
+		for (let i = 0; i < data.length; i += 4) {
+			data[i] = (((data[i] * lvl) >> 8) * 255) / lvl1;
+			data[i + 1] = (((data[i + 1] * lvl) >> 8) * 255) / lvl1;
+			data[i + 2] = (((data[i + 2] * lvl) >> 8) * 255) / lvl1;
+		}
 	};
-	$.displayDensity = () => window.devicePixelRatio;
-	$.pixelDensity = (n) => {
-		if (n === undefined) return $._pixelDensity;
-		$._pixelDensity = n;
-
-		let c = cloneCtx();
-		$.canvas.width = Math.ceil($.width * n);
-		$.canvas.height = Math.ceil($.height * n);
-		$.canvas.style.width = $.width + 'px';
-		$.canvas.style.height = $.height + 'px';
-		ctx = $._ctx = $.canvas.getContext('2d');
-		for (let prop in c) $._ctx[prop] = c[prop];
 
-		ctx.scale($._pixelDensity, $._pixelDensity);
-		return $._pixelDensity;
+	filterImpl[$.DILATE] = (data) => {
+		makeTmpBuf();
+		tmpBuf.set(data);
+		let [w, h] = [ctx.canvas.width, ctx.canvas.height];
+		for (let i = 0; i < h; i++) {
+			for (let j = 0; j < w; j++) {
+				let l = 4 * Math.max(j - 1, 0);
+				let r = 4 * Math.min(j + 1, w - 1);
+				let t = 4 * Math.max(i - 1, 0) * w;
+				let b = 4 * Math.min(i + 1, h - 1) * w;
+				let oi = 4 * i * w;
+				let oj = 4 * j;
+				for (let k = 0; k < 4; k++) {
+					let kt = k + t;
+					let kb = k + b;
+					let ko = k + oi;
+					data[oi + oj + k] = Math.max(
+						/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
+						tmpBuf[ko + l],
+						tmpBuf[ko + oj],
+						tmpBuf[ko + r],
+						/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
+					);
+				}
+			}
+		}
+	};
+	filterImpl[$.ERODE] = (data) => {
+		makeTmpBuf();
+		tmpBuf.set(data);
+		let [w, h] = [ctx.canvas.width, ctx.canvas.height];
+		for (let i = 0; i < h; i++) {
+			for (let j = 0; j < w; j++) {
+				let l = 4 * Math.max(j - 1, 0);
+				let r = 4 * Math.min(j + 1, w - 1);
+				let t = 4 * Math.max(i - 1, 0) * w;
+				let b = 4 * Math.min(i + 1, h - 1) * w;
+				let oi = 4 * i * w;
+				let oj = 4 * j;
+				for (let k = 0; k < 4; k++) {
+					let kt = k + t;
+					let kb = k + b;
+					let ko = k + oi;
+					data[oi + oj + k] = Math.min(
+						/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
+						tmpBuf[ko + l],
+						tmpBuf[ko + oj],
+						tmpBuf[ko + r],
+						/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
+					);
+				}
+			}
+		}
 	};
 
-	//================================================================
-	// MATH
-	//================================================================
+	filterImpl[$.BLUR] = (data, rad) => {
+		rad = rad || 1;
+		rad = Math.floor(rad * $._pixelDensity);
+		makeTmpBuf();
+		tmpBuf.set(data);
 
-	$.map = (value, istart, istop, ostart, ostop, clamp) => {
-		let val = ostart + (ostop - ostart) * (((value - istart) * 1.0) / (istop - istart));
-		if (!clamp) {
-			return val;
+		let ksize = rad * 2 + 1;
+
+		function gauss1d(ksize) {
+			let im = new Float32Array(ksize);
+			let sigma = 0.3 * rad + 0.8;
+			let ss2 = sigma * sigma * 2;
+			for (let i = 0; i < ksize; i++) {
+				let x = i - ksize / 2;
+				let z = Math.exp(-(x * x) / ss2) / (2.5066282746 * sigma);
+				im[i] = z;
+			}
+			return im;
 		}
-		if (ostart < ostop) {
-			return Math.min(Math.max(val, ostart), ostop);
-		} else {
-			return Math.min(Math.max(val, ostop), ostart);
+
+		let kern = gauss1d(ksize);
+		let [w, h] = [ctx.canvas.width, ctx.canvas.height];
+		for (let i = 0; i < h; i++) {
+			for (let j = 0; j < w; j++) {
+				let s0 = 0,
+					s1 = 0,
+					s2 = 0,
+					s3 = 0;
+				for (let k = 0; k < ksize; k++) {
+					let jk = Math.min(Math.max(j - rad + k, 0), w - 1);
+					let idx = 4 * (i * w + jk);
+					s0 += tmpBuf[idx] * kern[k];
+					s1 += tmpBuf[idx + 1] * kern[k];
+					s2 += tmpBuf[idx + 2] * kern[k];
+					s3 += tmpBuf[idx + 3] * kern[k];
+				}
+				let idx = 4 * (i * w + j);
+				data[idx] = s0;
+				data[idx + 1] = s1;
+				data[idx + 2] = s2;
+				data[idx + 3] = s3;
+			}
+		}
+		tmpBuf.set(data);
+		for (let i = 0; i < h; i++) {
+			for (let j = 0; j < w; j++) {
+				let s0 = 0,
+					s1 = 0,
+					s2 = 0,
+					s3 = 0;
+				for (let k = 0; k < ksize; k++) {
+					let ik = Math.min(Math.max(i - rad + k, 0), h - 1);
+					let idx = 4 * (ik * w + j);
+					s0 += tmpBuf[idx] * kern[k];
+					s1 += tmpBuf[idx + 1] * kern[k];
+					s2 += tmpBuf[idx + 2] * kern[k];
+					s3 += tmpBuf[idx + 3] * kern[k];
+				}
+				let idx = 4 * (i * w + j);
+				data[idx] = s0;
+				data[idx + 1] = s1;
+				data[idx + 2] = s2;
+				data[idx + 3] = s3;
+			}
 		}
 	};
-	$.lerp = (a, b, t) => a * (1 - t) + b * t;
-	$.constrain = (x, lo, hi) => Math.min(Math.max(x, lo), hi);
-	$.dist = function () {
-		if (arguments.length == 4) {
-			return Math.hypot(arguments[0] - arguments[2], arguments[1] - arguments[3]);
+
+	function makeTmpCtx(w, h) {
+		if (tmpCtx == null) {
+			tmpCtx = document.createElement('canvas').getContext('2d');
+		}
+		h ??= w || ctx.canvas.height;
+		w ??= ctx.canvas.width;
+		if (tmpCtx.canvas.width != w || tmpCtx.canvas.height != h) {
+			tmpCtx.canvas.width = w;
+			tmpCtx.canvas.height = h;
+		}
+	}
+	function makeTmpCt2(w, h) {
+		if (tmpCt2 == null) {
+			tmpCt2 = document.createElement('canvas').getContext('2d');
+		}
+		h ??= w || ctx.canvas.height;
+		w ??= ctx.canvas.width;
+		if (tmpCt2.canvas.width != w || tmpCt2.canvas.height != h) {
+			tmpCt2.canvas.width = w;
+			tmpCt2.canvas.height = h;
+		}
+	}
+
+	function makeTmpBuf() {
+		let l = ctx.canvas.width * ctx.canvas.height * 4;
+		if (!tmpBuf || l != tmpBuf.length) {
+			tmpBuf = new Uint8ClampedArray(l);
+		}
+	}
+
+	function nativeFilter(filtstr) {
+		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
+		tmpCtx.filter = filtstr;
+		tmpCtx.drawImage(ctx.canvas, 0, 0);
+		ctx.save();
+		ctx.resetTransform();
+		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+		ctx.drawImage(tmpCtx.canvas, 0, 0);
+		ctx.restore();
+	}
+
+	$.filter = (typ, x) => {
+		let support = $.HARDWARE_FILTERS && ctx.filter != undefined;
+		if (support) {
+			makeTmpCtx();
+			if (typ == $.THRESHOLD) {
+				x ??= 0.5;
+				x = Math.max(x, 0.00001);
+				let b = Math.floor((0.5 / x) * 100);
+				nativeFilter(`saturate(0%) brightness(${b}%) contrast(1000000%)`);
+			} else if (typ == $.GRAY) {
+				nativeFilter(`saturate(0%)`);
+			} else if (typ == $.OPAQUE) {
+				tmpCtx.fillStyle = 'black';
+				tmpCtx.fillRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
+				tmpCtx.drawImage(ctx.canvas, 0, 0);
+				ctx.save();
+				ctx.resetTransform();
+				ctx.drawImage(tmpCtx.canvas, 0, 0);
+				ctx.restore();
+			} else if (typ == $.INVERT) {
+				nativeFilter(`invert(100%)`);
+			} else if (typ == $.BLUR) {
+				nativeFilter(`blur(${Math.ceil((x * $._pixelDensity) / 1) || 1}px)`);
+			} else {
+				let imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+				filterImpl[typ](imgData.data, x);
+				ctx.putImageData(imgData, 0, 0);
+			}
 		} else {
-			return Math.hypot(arguments[0] - arguments[3], arguments[1] - arguments[4], arguments[2] - arguments[5]);
+			let imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+			filterImpl[typ](imgData.data, x);
+			ctx.putImageData(imgData, 0, 0);
 		}
 	};
-	$.norm = (value, start, stop) => $.map(value, start, stop, 0, 1);
-	$.sq = (x) => x * x;
-	$.fract = (x) => x - Math.floor(x);
-	$.angleMode = (mode) => ($._angleMode = mode);
-	$._DEGTORAD = Math.PI / 180;
-	$._RADTODEG = 180 / Math.PI;
-	$.degrees = (x) => x * $._RADTODEG;
-	$.radians = (x) => x * $._DEGTORAD;
-	$.abs = Math.abs;
-	$.ceil = Math.ceil;
-	$.exp = Math.exp;
-	$.floor = Math.floor;
-	$.log = Math.log;
-	$.mag = Math.hypot;
-	$.max = Math.max;
-	$.min = Math.min;
-	$.round = Math.round;
-	$.pow = Math.pow;
-	$.sqrt = Math.sqrt;
-	$.sin = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.sin(a);
-	};
-	$.cos = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.cos(a);
-	};
-	$.tan = (a) => {
-		if ($._angleMode == 'degrees') a = $.radians(a);
-		return Math.tan(a);
-	};
-	$.asin = (x) => {
-		let a = Math.asin(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
-	};
-	$.acos = (x) => {
-		let a = Math.acos(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
-	};
-	$.atan = (x) => {
-		let a = Math.atan(x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
+
+	$.resize = (w, h) => {
+		makeTmpCtx();
+		tmpCtx.drawImage(ctx.canvas, 0, 0);
+		$.width = w;
+		$.height = h;
+		ctx.canvas.width = w * $._pixelDensity;
+		ctx.canvas.height = h * $._pixelDensity;
+		ctx.save();
+		ctx.resetTransform();
+		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+		ctx.drawImage(tmpCtx.canvas, 0, 0, ctx.canvas.width, ctx.canvas.height);
+		ctx.restore();
 	};
-	$.atan2 = (y, x) => {
-		let a = Math.atan2(y, x);
-		if ($._angleMode == 'degrees') a = $.degrees(a);
-		return a;
+
+	$.get = (x, y, w, h) => {
+		if (x !== undefined && w === undefined) {
+			let c = ctx.getImageData(x, y, 1, 1).data;
+			return new Q5.Color(c[0], c[1], c[2], c[3] / 255);
+		}
+		x = x || 0;
+		y = y || 0;
+		w = w || $.width;
+		h = h || $.height;
+		let img = $.createImage(w, h);
+		let imgData = ctx.getImageData(x * $._pixelDensity, y * $._pixelDensity, w * $._pixelDensity, h * $._pixelDensity);
+		img.canvas.getContext('2d').putImageData(imgData, 0, 0);
+		return img;
 	};
-	$.nf = (n, l, r) => {
-		let neg = n < 0;
-		let s = n.toString();
-		if (neg) s = s.slice(1);
-		s = s.padStart(l, '0');
-		if (r > 0) {
-			if (s.indexOf('.') == -1) s += '.';
-			s = s.padEnd(l + 1 + r, '0');
+
+	$.set = (x, y, c) => {
+		if (c.MAGIC == $.MAGIC) {
+			let old = $._tint;
+			$._tint = null;
+			$.image(c, x, y);
+			$._tint = old;
+			return;
+		}
+		for (let i = 0; i < $._pixelDensity; i++) {
+			for (let j = 0; j < $._pixelDensity; j++) {
+				let idx = 4 * ((y * $._pixelDensity + i) * ctx.canvas.width + x * $._pixelDensity + j);
+				$.pixels[idx] = c._r;
+				$.pixels[idx + 1] = c._g;
+				$.pixels[idx + 2] = c._b;
+				$.pixels[idx + 3] = c._a * 255;
+			}
 		}
-		if (neg) s = '-' + s;
-		return s;
 	};
-	$.createVector = (x, y, z) => new Q5.Vector(x, y, z, $);
 
-	//================================================================
-	// CURVE QUERY
-	//================================================================
-	//https://github.com/processing/p5.js/blob/1.1.9/src/core/shape/curves.js
+	$.tinted = function () {
+		let col = $.color(...Array.from(arguments));
+		let alpha = col._a;
+		col._a = 1;
+		makeTmpCtx();
+		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
+		tmpCtx.fillStyle = col;
+		tmpCtx.fillRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
+		tmpCtx.globalCompositeOperation = 'multiply';
+		tmpCtx.drawImage(ctx.canvas, 0, 0);
+		tmpCtx.globalCompositeOperation = 'source-over';
 
-	$.curvePoint = (a, b, c, d, t) => {
-		const t3 = t * t * t,
-			t2 = t * t,
-			f1 = -0.5 * t3 + t2 - 0.5 * t,
-			f2 = 1.5 * t3 - 2.5 * t2 + 1.0,
-			f3 = -1.5 * t3 + 2.0 * t2 + 0.5 * t,
-			f4 = 0.5 * t3 - 0.5 * t2;
-		return a * f1 + b * f2 + c * f3 + d * f4;
-	};
-	$.bezierPoint = (a, b, c, d, t) => {
-		const adjustedT = 1 - t;
-		return (
-			Math.pow(adjustedT, 3) * a +
-			3 * Math.pow(adjustedT, 2) * t * b +
-			3 * adjustedT * Math.pow(t, 2) * c +
-			Math.pow(t, 3) * d
-		);
-	};
-	$.curveTangent = (a, b, c, d, t) => {
-		const t2 = t * t,
-			f1 = (-3 * t2) / 2 + 2 * t - 0.5,
-			f2 = (9 * t2) / 2 - 5 * t,
-			f3 = (-9 * t2) / 2 + 4 * t + 0.5,
-			f4 = (3 * t2) / 2 - t;
-		return a * f1 + b * f2 + c * f3 + d * f4;
-	};
-	$.bezierTangent = (a, b, c, d, t) => {
-		const adjustedT = 1 - t;
-		return (
-			3 * d * Math.pow(t, 2) -
-			3 * c * Math.pow(t, 2) +
-			6 * c * adjustedT * t -
-			6 * b * adjustedT * t +
-			3 * b * Math.pow(adjustedT, 2) -
-			3 * a * Math.pow(adjustedT, 2)
-		);
-	};
+		ctx.save();
+		ctx.resetTransform();
+		let old = ctx.globalCompositeOperation;
+		ctx.globalCompositeOperation = 'source-in';
+		ctx.drawImage(tmpCtx.canvas, 0, 0);
+		ctx.globalCompositeOperation = old;
+		ctx.restore();
 
-	//================================================================
-	// COLORS
-	//================================================================
+		tmpCtx.globalAlpha = alpha;
+		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
+		tmpCtx.drawImage(ctx.canvas, 0, 0);
+		tmpCtx.globalAlpha = 1;
 
-	$.Color = Q5.Color;
-	$.colorMode = (mode) => {
-		$._colorMode = mode;
+		ctx.save();
+		ctx.resetTransform();
+		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+		ctx.drawImage(tmpCtx.canvas, 0, 0);
+		ctx.restore();
+	};
+	$.tint = function () {
+		$._tint = $.color(...Array.from(arguments));
 	};
+	$.noTint = () => ($._tint = null);
 
-	let basicColors = {
-		aqua: [0, 255, 255],
-		black: [0, 0, 0],
-		blue: [0, 0, 255],
-		brown: [165, 42, 42],
-		crimson: [220, 20, 60],
-		darkviolet: [148, 0, 211],
-		gold: [255, 215, 0],
-		green: [0, 128, 0],
-		gray: [128, 128, 128],
-		hotpink: [255, 105, 180],
-		indigo: [75, 0, 130],
-		khaki: [240, 230, 140],
-		lightgreen: [144, 238, 144],
-		lime: [0, 255, 0],
-		magenta: [255, 0, 255],
-		navy: [0, 0, 128],
-		orange: [255, 165, 0],
-		olive: [128, 128, 0],
-		peachpuff: [255, 218, 185],
-		pink: [255, 192, 203],
-		purple: [128, 0, 128],
-		red: [255, 0, 0],
-		skyblue: [135, 206, 235],
-		tan: [210, 180, 140],
-		turquoise: [64, 224, 208],
-		transparent: [0, 0, 0, 0],
-		white: [255, 255, 255],
-		violet: [238, 130, 238],
-		yellow: [255, 255, 0]
+	$.mask = (img) => {
+		ctx.save();
+		ctx.resetTransform();
+		let old = ctx.globalCompositeOperation;
+		ctx.globalCompositeOperation = 'destination-in';
+		ctx.drawImage(img.canvas, 0, 0);
+		ctx.globalCompositeOperation = old;
+		ctx.restore();
 	};
 
-	$.color = function () {
-		let args = arguments;
-		if (args.length == 1) {
-			if (typeof args[0] == 'string') {
-				if (args[0][0] == '#') {
-					return new Q5.Color(
-						parseInt(args[0].slice(1, 3), 16),
-						parseInt(args[0].slice(3, 5), 16),
-						parseInt(args[0].slice(5, 7), 16),
-						1
-					);
-				} else {
-					if (basicColors[args[0]]) {
-						return new Q5.Color(...basicColors[args[0]], 1);
-					}
-					return new Q5.Color(0, 0, 0, 1);
-				}
-			}
-			if (typeof args[0] != 'number' && args[0].MAGIC == 0xc010a) {
-				return args[0];
-			}
-		}
-		if ($._colorMode == $.RGB) {
-			if (args.length == 1) {
-				return new Q5.Color(args[0], args[0], args[0], 1);
-			} else if (args.length == 2) {
-				return new Q5.Color(args[0], args[0], args[0], args[1] / 255);
-			} else if (args.length == 3) {
-				return new Q5.Color(args[0], args[1], args[2], 1);
-			} else if (args.length == 4) {
-				return new Q5.Color(args[0], args[1], args[2], args[3] / 255);
-			}
-		} else {
-			if (args.length == 1) {
-				return new Q5.Color(...Q5.Color._hsv2rgb(0, 0, args[0] / 100), 1);
-			} else if (args.length == 2) {
-				return new Q5.Color(...Q5.Color._hsv2rgb(0, 0, args[0] / 100), args[1] / 255);
-			} else if (args.length == 3) {
-				return new Q5.Color(...Q5.Color._hsv2rgb(args[0], args[1] / 100, args[2] / 100), 1);
-			} else if (args.length == 4) {
-				return new Q5.Color(...Q5.Color._hsv2rgb(args[0], args[1] / 100, args[2] / 100), args[3]);
+	$._save = (data, name, ext) => {
+		name = name || 'untitled';
+		ext = ext || 'png';
+		if (ext == 'jpg' || ext == 'png') data = data.toDataURL();
+		else {
+			let type = 'text/plain';
+			if (ext == 'json') {
+				if (typeof data != 'string') data = JSON.stringify(data);
+				type = 'text/json';
 			}
+			data = new Blob([data], { type });
+			data = URL.createObjectURL(data);
 		}
-		return null;
-	};
-
-	$.red = (c) => {
-		return c._r;
-	};
-	$.green = (c) => {
-		return c._g;
-	};
-	$.blue = (c) => {
-		return c._b;
-	};
-	$.alpha = (c) => {
-		return c._a * 255;
-	};
-	$.hue = (c) => {
-		c._inferHSV();
-		return c._h;
-	};
-	$.saturation = (c) => {
-		c._inferHSV();
-		return c._s;
-	};
-	$.brightness = (c) => {
-		c._inferHSV();
-		return c._v;
+		let a = document.createElement('a');
+		a.href = data;
+		a.download = name + '.' + ext;
+		document.body.append(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(a.href);
 	};
-	$.lightness = (c) => {
-		return ((0.2126 * c._r + 0.7152 * c._g + 0.0722 * c._b) * 100) / 255;
+	$.save = (a, b, c) => {
+		if (!a || (typeof a == 'string' && (!b || (!c && b.length < 5)))) {
+			c = b;
+			b = a;
+			a = ctx.canvas;
+		}
+		if (c) return $._save(a, b, c);
+		if (b) {
+			b = b.split('.');
+			$._save(a, b[0], b.at(-1));
+		} else $._save(a);
 	};
+	$.canvas.save = $.save;
+	$.saveCanvas = $.save;
 
-	function lerpHue(h0, h1, t) {
-		var methods = [
-			[Math.abs(h1 - h0), $.map(t, 0, 1, h0, h1)],
-			[Math.abs(h1 + 360 - h0), $.map(t, 0, 1, h0, h1 + 360)],
-			[Math.abs(h1 - 360 - h0), $.map(t, 0, 1, h0, h1 - 360)]
-		];
-		methods.sort((x, y) => x[0] - y[0]);
-		return (methods[0][1] + 720) % 360;
-	}
+	if (scope == 'image') return;
 
-	$.lerpColor = (a, b, t) => {
-		if ($._colorMode == $.RGB) {
-			return new Q5.Color(
-				$.constrain($.lerp(a._r, b._r, t), 0, 255),
-				$.constrain($.lerp(a._g, b._g, t), 0, 255),
-				$.constrain($.lerp(a._b, b._b, t), 0, 255),
-				$.constrain($.lerp(a._a, b._a, t), 0, 1)
-			);
-		} else {
-			a._inferHSV();
-			b._inferHSV();
-			return new Q5.Color(
-				$.constrain(lerpHue(a._h, b._h, t), 0, 360),
-				$.constrain($.lerp(a._s, b._s, t), 0, 100),
-				$.constrain($.lerp(a._v, b._v, t), 0, 100),
-				$.constrain($.lerp(a._a, b._a, t), 0, 1)
-			);
-		}
+	$.remove = () => {
+		$.noLoop();
+		$.canvas.remove();
 	};
 
 	//================================================================
-	// DRAWING SETTING
+	// CONSTANTS
 	//================================================================
 
-	function defaultStyle() {
-		ctx.fillStyle = 'white';
-		ctx.strokeStyle = 'black';
-		ctx.lineCap = 'round';
-		ctx.lineJoin = 'miter';
-		ctx.textAlign = 'left';
-	}
+	$.RGB = 0;
+	$.HSV = 1;
+	$.HSB = 1;
 
-	$.strokeWeight = (n) => {
-		if (n > 0) $._doStroke = true;
-		else $._doStroke = false;
-		ctx.lineWidth = n;
-	};
-	$.stroke = function () {
-		$._doStroke = true;
-		$._strokeSet = true;
-		if (typeof arguments[0] == 'string') {
-			ctx.strokeStyle = arguments[0];
-			return;
-		}
-		let col = $.color(...arguments);
-		if (col._a <= 0) {
-			$._doStroke = false;
-			return;
-		}
-		ctx.strokeStyle = col;
-	};
-	$.noStroke = () => ($._doStroke = false);
-	$.fill = function () {
-		$._doFill = true;
-		$._fillSet = true;
-		if (typeof arguments[0] == 'string') {
-			ctx.fillStyle = arguments[0];
-			return;
-		}
-		let col = $.color(...arguments);
-		if (col._a <= 0) {
-			$._doFill = false;
-			return;
-		}
-		ctx.fillStyle = col;
+	$.CHORD = 0;
+	$.PIE = 1;
+	$.OPEN = 2;
+
+	$.RADIUS = 'radius';
+	$.CORNER = 'corner';
+	$.CORNERS = 'corners';
+
+	$.ROUND = 'round';
+	$.SQUARE = 'butt';
+	$.PROJECT = 'square';
+	$.MITER = 'miter';
+	$.BEVEL = 'bevel';
+
+	$.CLOSE = 1;
+
+	$.BLEND = 'source-over';
+	$.REMOVE = 'destination-out';
+	$.ADD = 'lighter';
+	$.DARKEST = 'darken';
+	$.LIGHTEST = 'lighten';
+	$.DIFFERENCE = 'difference';
+	$.SUBTRACT = 'subtract';
+	$.EXCLUSION = 'exclusion';
+	$.MULTIPLY = 'multiply';
+	$.SCREEN = 'screen';
+	$.REPLACE = 'copy';
+	$.OVERLAY = 'overlay';
+	$.HARD_LIGHT = 'hard-light';
+	$.SOFT_LIGHT = 'soft-light';
+	$.DODGE = 'color-dodge';
+	$.BURN = 'color-burn';
+
+	$.NORMAL = 'normal';
+	$.ITALIC = 'italic';
+	$.BOLD = 'bold';
+	$.BOLDITALIC = 'italic bold';
+
+	$.CENTER = 'center';
+	$.LEFT = 'left';
+	$.RIGHT = 'right';
+	$.TOP = 'top';
+	$.BOTTOM = 'bottom';
+	$.BASELINE = 'alphabetic';
+
+	$.LANDSCAPE = 'landscape';
+	$.PORTRAIT = 'portrait';
+
+	$.ALT = 18;
+	$.BACKSPACE = 8;
+	$.CONTROL = 17;
+	$.DELETE = 46;
+	$.DOWN_ARROW = 40;
+	$.ENTER = 13;
+	$.ESCAPE = 27;
+	$.LEFT_ARROW = 37;
+	$.OPTION = 18;
+	$.RETURN = 13;
+	$.RIGHT_ARROW = 39;
+	$.SHIFT = 16;
+	$.TAB = 9;
+	$.UP_ARROW = 38;
+
+	$.DEGREES = 'degrees';
+	$.RADIANS = 'radians';
+
+	$.HALF_PI = Math.PI / 2;
+	$.PI = Math.PI;
+	$.QUARTER_PI = Math.PI / 4;
+	$.TAU = Math.PI * 2;
+	$.TWO_PI = Math.PI * 2;
+
+	$.THRESHOLD = 1;
+	$.GRAY = 2;
+	$.OPAQUE = 3;
+	$.INVERT = 4;
+	$.POSTERIZE = 5;
+	$.DILATE = 6;
+	$.ERODE = 7;
+	$.BLUR = 8;
+
+	$.ARROW = 'default';
+	$.CROSS = 'crosshair';
+	$.HAND = 'pointer';
+	$.MOVE = 'move';
+	$.TEXT = 'text';
+
+	$.VIDEO = { video: true, audio: false };
+	$.AUDIO = { video: false, audio: true };
+
+	$.SHR3 = 1;
+	$.LCG = 2;
+
+	$.HARDWARE_FILTERS = true;
+	$.hint = (prop, val) => {
+		$[prop] = val;
 	};
-	$.noFill = () => ($._doFill = false);
-	$.smooth = () => ($._smooth = true);
-	$.noSmooth = () => ($._smooth = false);
-	$.blendMode = (x) => (ctx.globalCompositeOperation = x);
-	$.strokeCap = (x) => (ctx.lineCap = x);
-	$.strokeJoin = (x) => (ctx.lineJoin = x);
-	$.ellipseMode = (x) => ($._ellipseMode = x);
-	$.rectMode = (x) => ($._rectMode = x);
-	$.curveDetail = (x) => ($._curveDetail = x);
-	$.curveAlpha = (x) => ($._curveAlpha = x);
-	$.curveTightness = (x) => ($._curveAlpha = x);
 
 	//================================================================
-	// DRAWING
+	// PUBLIC PROPERTIES
+	//================================================================
+	$.frameCount = 0;
+	$.deltaTime = 16;
+	$.mouseX = 0;
+	$.mouseY = 0;
+	$.mouseButton = null;
+	$.keyIsPressed = false;
+	$.mouseIsPressed = false;
+	$.key = null;
+	$.keyCode = null;
+	$.pixels = [];
+	$.accelerationX = 0;
+	$.accelerationY = 0;
+	$.accelerationZ = 0;
+	$.rotationX = 0;
+	$.rotationY = 0;
+	$.rotationZ = 0;
+	$.relRotationX = 0;
+	$.relRotationY = 0;
+	$.relRotationZ = 0;
+
+	$.pmouseX = 0;
+	$.pmouseY = 0;
+	$.pAccelerationX = 0;
+	$.pAccelerationY = 0;
+	$.pAccelerationZ = 0;
+	$.pRotationX = 0;
+	$.pRotationY = 0;
+	$.pRotationZ = 0;
+	$.pRelRotationX = 0;
+	$.pRelRotationY = 0;
+	$.pRelRotationZ = 0;
+
+	$.touches = [];
+
+	$._colorMode = $.RGB;
+	$._doStroke = true;
+	$._doFill = true;
+	$._strokeSet = false;
+	$._fillSet = false;
+	$._ellipseMode = $.CENTER;
+	$._rectMode = $.CORNER;
+	$._curveDetail = 20;
+	$._curveAlpha = 0.0;
+	$._loop = true;
+
+	$._textFont = 'sans-serif';
+	$._textSize = 12;
+	$._textLeading = 15;
+	$._textLeadDiff = 3;
+	$._textStyle = 'normal';
+
+	$._pixelDensity = 1;
+	$._lastFrameTime = 0;
+	$._targetFrameRate = null;
+	$._frameRate = $._fps = 60;
+
+	$._tint = null;
+
+	//================================================================
+	// PRIVATE VARS
 	//================================================================
+	let looper = null;
+	let firstVertex = true;
+	let curveBuff = [];
+	let imgData = null;
+	let preloadCnt = 0;
+	let keysHeld = {};
+	let millisStart = 0;
+	let tmpCtx = null;
+	let tmpCt2 = null;
+	let tmpBuf = null;
 
-	$.clear = () => {
-		ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
-	};
+	//================================================================
+	// ALIAS PROPERTIES
+	//================================================================
 
-	$.background = function () {
-		if (arguments[0] && arguments[0].MAGIC == $.MAGIC) {
-			return $.image(arguments[0], 0, 0, $.width, $.height);
-		}
-		ctx.save();
-		ctx.resetTransform();
-		if (typeof arguments[0] == 'string') {
-			ctx.fillStyle = arguments[0];
-		} else {
-			ctx.fillStyle = $.color(...Array.from(arguments));
-		}
-		ctx.fillRect(0, 0, $.canvas.width, $.canvas.height);
-		ctx.restore();
-	};
+	Object.defineProperty($, 'deviceOrientation', {
+		get: () => window.screen?.orientation?.type
+	});
 
-	$.line = (x0, y0, x1, y1) => {
-		if ($._doStroke) {
-			ctx.beginPath();
-			ctx.moveTo(x0, y0);
-			ctx.lineTo(x1, y1);
-			ctx.stroke();
-		}
-	};
+	Object.defineProperty($, 'windowWidth', {
+		get: () => window.innerWidth
+	});
 
-	function normAng(x) {
-		let mid = $._angleMode == $.DEGREES ? 180 : Math.PI;
-		let full = mid * 2;
-		if (0 <= x && x <= full) return x;
-		while (x < 0) {
-			x += full;
-		}
-		while (x >= mid) {
-			x -= full;
-		}
-		return x;
-	}
+	Object.defineProperty($, 'windowHeight', {
+		get: () => window.innerHeight
+	});
 
-	function arcImpl(x, y, w, h, start, stop, mode, detail) {
-		if (!$._doFill && !$._doStroke) return;
-		let lo = normAng(start);
-		let hi = normAng(stop);
-		if (lo > hi) [lo, hi] = [hi, lo];
-		if (lo == 0) {
-			if (hi == 0) return;
-			if (($._angleMode == $.DEGREES && hi == 360) || hi == $.TAU) {
-				return $.ellipse(x, y, w, h);
-			}
-		}
-		ctx.beginPath();
-		for (let i = 0; i < detail + 1; i++) {
-			let t = i / detail;
-			let a = $.lerp(lo, hi, t);
-			let dx = ($.cos(a) * w) / 2;
-			let dy = ($.sin(a) * h) / 2;
-			ctx[i ? 'lineTo' : 'moveTo'](x + dx, y + dy);
-		}
-		if (mode == $.CHORD) {
-			ctx.closePath();
-		} else if (mode == $.PIE) {
-			ctx.lineTo(x, y);
-			ctx.closePath();
+	Object.defineProperty($, 'drawingContext', {
+		get: () => ctx
+	});
+
+	//================================================================
+	// CANVAS
+	//================================================================
+
+	function cloneCtx() {
+		let c = {};
+		for (let prop in ctx) {
+			if (typeof ctx[prop] != 'function') c[prop] = ctx[prop];
 		}
-		if ($._doFill) ctx.fill();
-		if ($._doStroke) ctx.stroke();
+		delete c.canvas;
+		return c;
 	}
-	$.arc = (x, y, w, h, start, stop, mode, detail) => {
-		if (start == stop) return $.ellipse(x, y, w, h);
-		detail ??= 25;
-		mode ??= $.PIE;
-		if ($._ellipseMode == $.CENTER) {
-			arcImpl(x, y, w, h, start, stop, mode, detail);
-		} else if ($._ellipseMode == $.RADIUS) {
-			arcImpl(x, y, w * 2, h * 2, start, stop, mode, detail);
-		} else if ($._ellipseMode == $.CORNER) {
-			arcImpl(x + w / 2, y + h / 2, w, h, start, stop, mode, detail);
-		} else if ($._ellipseMode == $.CORNERS) {
-			arcImpl((x + w) / 2, (y + h) / 2, w - x, h - y, start, stop, mode, detail);
-		}
+
+	$.resizeCanvas = (width, height) => {
+		$.width = width;
+		$.height = height;
+		let c = cloneCtx();
+		$.canvas.width = width * $._pixelDensity;
+		$.canvas.height = height * $._pixelDensity;
+		ctx = $._ctx = $.canvas.getContext('2d');
+		for (let prop in c) $._ctx[prop] = c[prop];
+		if (scope != 'graphics' && scope != 'image') $.pixelDensity($._pixelDensity);
 	};
 
-	function ellipseImpl(x, y, w, h) {
-		if (!$._doFill && !$._doStroke) return;
-		ctx.beginPath();
-		ctx.ellipse(x, y, w / 2, h / 2, 0, 0, $.TAU);
-		if ($._doFill) ctx.fill();
-		if ($._doStroke) ctx.stroke();
-	}
-	$.ellipse = (x, y, w, h) => {
-		h ??= w;
-		if ($._ellipseMode == $.CENTER) {
-			ellipseImpl(x, y, w, h);
-		} else if ($._ellipseMode == $.RADIUS) {
-			ellipseImpl(x, y, w * 2, h * 2);
-		} else if ($._ellipseMode == $.CORNER) {
-			ellipseImpl(x + w / 2, y + h / 2, w, h);
-		} else if ($._ellipseMode == $.CORNERS) {
-			ellipseImpl((x + w) / 2, (y + h) / 2, w - x, h - y);
-		}
+	$.createGraphics = (width, height) => {
+		let g = new Q5('graphics');
+		g.createCanvas(width, height);
+		return g;
 	};
-	$.circle = (x, y, r) => {
-		return $.ellipse(x, y, r, r);
+	$.createImage = (width, height) => {
+		return new Q5.Image(width, height);
 	};
-	$.point = (x, y) => {
-		if (x.x) {
-			y = x.y;
-			x = x.x;
-		}
-		ctx.beginPath();
-		ctx.ellipse(x, y, 0.4, 0.4, 0, 0, $.TAU);
-		ctx.stroke();
+	$.displayDensity = () => window.devicePixelRatio;
+	$.pixelDensity = (n) => {
+		if (n === undefined) return $._pixelDensity;
+		$._pixelDensity = n;
+
+		let c = cloneCtx();
+		$.canvas.width = Math.ceil($.width * n);
+		$.canvas.height = Math.ceil($.height * n);
+		$.canvas.style.width = $.width + 'px';
+		$.canvas.style.height = $.height + 'px';
+		ctx = $._ctx = $.canvas.getContext('2d');
+		for (let prop in c) $._ctx[prop] = c[prop];
+
+		ctx.scale($._pixelDensity, $._pixelDensity);
+		return $._pixelDensity;
 	};
-	function rectImpl(x, y, w, h) {
-		if ($._doFill) ctx.fillRect(x, y, w, h);
-		if ($._doStroke) ctx.strokeRect(x, y, w, h);
-	}
-	function roundedRectImpl(x, y, w, h, tl, tr, br, bl) {
-		if (!$._doFill && !$._doStroke) return;
-		if (tl === undefined) {
-			return rectImpl(x, y, w, h);
-		}
-		if (tr === undefined) {
-			return roundedRectImpl(x, y, w, h, tl, tl, tl, tl);
-		}
-		const hh = Math.min(Math.abs(h), Math.abs(w)) / 2;
-		tl = Math.min(hh, tl);
-		tr = Math.min(hh, tr);
-		bl = Math.min(hh, bl);
-		br = Math.min(hh, br);
-		ctx.beginPath();
-		ctx.moveTo(x + tl, y);
-		ctx.arcTo(x + w, y, x + w, y + h, tr);
-		ctx.arcTo(x + w, y + h, x, y + h, br);
-		ctx.arcTo(x, y + h, x, y, bl);
-		ctx.arcTo(x, y, x + w, y, tl);
-		ctx.closePath();
-		if ($._doFill) ctx.fill();
-		if ($._doStroke) ctx.stroke();
-	}
 
-	$.rect = (x, y, w, h, tl, tr, br, bl) => {
-		if ($._rectMode == $.CENTER) {
-			roundedRectImpl(x - w / 2, y - h / 2, w, h, tl, tr, br, bl);
-		} else if ($._rectMode == $.RADIUS) {
-			roundedRectImpl(x - w, y - h, w * 2, h * 2, tl, tr, br, bl);
-		} else if ($._rectMode == $.CORNER) {
-			roundedRectImpl(x, y, w, h, tl, tr, br, bl);
-		} else if ($._rectMode == $.CORNERS) {
-			roundedRectImpl(x, y, w - x, h - y, tl, tr, br, bl);
+	//================================================================
+	// MATH
+	//================================================================
+
+	$.map = (value, istart, istop, ostart, ostop, clamp) => {
+		let val = ostart + (ostop - ostart) * (((value - istart) * 1.0) / (istop - istart));
+		if (!clamp) {
+			return val;
+		}
+		if (ostart < ostop) {
+			return Math.min(Math.max(val, ostart), ostop);
+		} else {
+			return Math.min(Math.max(val, ostop), ostart);
 		}
 	};
-	$.square = (x, y, s, tl, tr, br, bl) => {
-		return $.rect(x, y, s, s, tl, tr, br, bl);
+	$.lerp = (a, b, t) => a * (1 - t) + b * t;
+	$.constrain = (x, lo, hi) => Math.min(Math.max(x, lo), hi);
+	$.dist = function () {
+		if (arguments.length == 4) {
+			return Math.hypot(arguments[0] - arguments[2], arguments[1] - arguments[3]);
+		} else {
+			return Math.hypot(arguments[0] - arguments[3], arguments[1] - arguments[4], arguments[2] - arguments[5]);
+		}
 	};
-
-	function clearBuff() {
-		curveBuff = [];
-	}
-
-	$.beginShape = () => {
-		clearBuff();
-		ctx.beginPath();
-		firstVertex = true;
+	$.norm = (value, start, stop) => $.map(value, start, stop, 0, 1);
+	$.sq = (x) => x * x;
+	$.fract = (x) => x - Math.floor(x);
+	$.angleMode = (mode) => ($._angleMode = mode);
+	$._DEGTORAD = Math.PI / 180;
+	$._RADTODEG = 180 / Math.PI;
+	$.degrees = (x) => x * $._RADTODEG;
+	$.radians = (x) => x * $._DEGTORAD;
+	$.abs = Math.abs;
+	$.ceil = Math.ceil;
+	$.exp = Math.exp;
+	$.floor = Math.floor;
+	$.log = Math.log;
+	$.mag = Math.hypot;
+	$.max = Math.max;
+	$.min = Math.min;
+	$.round = Math.round;
+	$.pow = Math.pow;
+	$.sqrt = Math.sqrt;
+	$.sin = (a) => {
+		if ($._angleMode == 'degrees') a = $.radians(a);
+		return Math.sin(a);
 	};
-	$.beginContour = () => {
-		ctx.closePath();
-		clearBuff();
-		firstVertex = true;
+	$.cos = (a) => {
+		if ($._angleMode == 'degrees') a = $.radians(a);
+		return Math.cos(a);
 	};
-	$.endContour = () => {
-		clearBuff();
-		firstVertex = true;
+	$.tan = (a) => {
+		if ($._angleMode == 'degrees') a = $.radians(a);
+		return Math.tan(a);
 	};
-	$.vertex = (x, y) => {
-		clearBuff();
-		if (firstVertex) {
-			ctx.moveTo(x, y);
-		} else {
-			ctx.lineTo(x, y);
-		}
-		firstVertex = false;
+	$.asin = (x) => {
+		let a = Math.asin(x);
+		if ($._angleMode == 'degrees') a = $.degrees(a);
+		return a;
 	};
-	$.bezierVertex = (cp1x, cp1y, cp2x, cp2y, x, y) => {
-		clearBuff();
-		ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+	$.acos = (x) => {
+		let a = Math.acos(x);
+		if ($._angleMode == 'degrees') a = $.degrees(a);
+		return a;
 	};
-	$.quadraticVertex = (cp1x, cp1y, x, y) => {
-		clearBuff();
-		ctx.quadraticCurveTo(cp1x, cp1y, x, y);
+	$.atan = (x) => {
+		let a = Math.atan(x);
+		if ($._angleMode == 'degrees') a = $.degrees(a);
+		return a;
 	};
-	$.bezier = (x1, y1, x2, y2, x3, y3, x4, y4) => {
-		$.beginShape();
-		$.vertex(x1, y1);
-		$.bezierVertex(x2, y2, x3, y3, x4, y4);
-		$.endShape();
+	$.atan2 = (y, x) => {
+		let a = Math.atan2(y, x);
+		if ($._angleMode == 'degrees') a = $.degrees(a);
+		return a;
 	};
-	$.triangle = (x1, y1, x2, y2, x3, y3) => {
-		$.beginShape();
-		$.vertex(x1, y1);
-		$.vertex(x2, y2);
-		$.vertex(x3, y3);
-		$.endShape($.CLOSE);
+	$.nf = (n, l, r) => {
+		let neg = n < 0;
+		let s = n.toString();
+		if (neg) s = s.slice(1);
+		s = s.padStart(l, '0');
+		if (r > 0) {
+			if (s.indexOf('.') == -1) s += '.';
+			s = s.padEnd(l + 1 + r, '0');
+		}
+		if (neg) s = '-' + s;
+		return s;
 	};
-	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
-		$.beginShape();
-		$.vertex(x1, y1);
-		$.vertex(x2, y2);
-		$.vertex(x3, y3);
-		$.vertex(x4, y4);
-		$.endShape($.CLOSE);
+	$.createVector = (x, y, z) => new Q5.Vector(x, y, z, $);
+
+	//================================================================
+	// CURVE QUERY
+	//================================================================
+	//https://github.com/processing/p5.js/blob/1.1.9/src/core/shape/curves.js
+
+	$.curvePoint = (a, b, c, d, t) => {
+		const t3 = t * t * t,
+			t2 = t * t,
+			f1 = -0.5 * t3 + t2 - 0.5 * t,
+			f2 = 1.5 * t3 - 2.5 * t2 + 1.0,
+			f3 = -1.5 * t3 + 2.0 * t2 + 0.5 * t,
+			f4 = 0.5 * t3 - 0.5 * t2;
+		return a * f1 + b * f2 + c * f3 + d * f4;
 	};
-	$.endShape = (close) => {
-		clearBuff();
-		if (close) {
-			ctx.closePath();
-		}
-		if ($._doFill) ctx.fill();
-		if ($._doStroke) ctx.stroke();
-		if (!$._doFill && !$._doStroke) {
-			// eh.
-			ctx.save();
-			ctx.fillStyle = 'none';
-			ctx.fill();
-			ctx.restore();
-		}
+	$.bezierPoint = (a, b, c, d, t) => {
+		const adjustedT = 1 - t;
+		return (
+			Math.pow(adjustedT, 3) * a +
+			3 * Math.pow(adjustedT, 2) * t * b +
+			3 * adjustedT * Math.pow(t, 2) * c +
+			Math.pow(t, 3) * d
+		);
+	};
+	$.curveTangent = (a, b, c, d, t) => {
+		const t2 = t * t,
+			f1 = (-3 * t2) / 2 + 2 * t - 0.5,
+			f2 = (9 * t2) / 2 - 5 * t,
+			f3 = (-9 * t2) / 2 + 4 * t + 0.5,
+			f4 = (3 * t2) / 2 - t;
+		return a * f1 + b * f2 + c * f3 + d * f4;
+	};
+	$.bezierTangent = (a, b, c, d, t) => {
+		const adjustedT = 1 - t;
+		return (
+			3 * d * Math.pow(t, 2) -
+			3 * c * Math.pow(t, 2) +
+			6 * c * adjustedT * t -
+			6 * b * adjustedT * t +
+			3 * b * Math.pow(adjustedT, 2) -
+			3 * a * Math.pow(adjustedT, 2)
+		);
 	};
-	function catmullRomSpline(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y, numPts, alpha) {
-		//https://en.wikipedia.org/wiki/Centripetal_Catmull–Rom_spline
-		function catmullromSplineGetT(t, p0x, p0y, p1x, p1y, alpha) {
-			let a = Math.pow(p1x - p0x, 2.0) + Math.pow(p1y - p0y, 2.0);
-			let b = Math.pow(a, alpha * 0.5);
-			return b + t;
-		}
-		let pts = [];
 
-		let t0 = 0.0;
-		let t1 = catmullromSplineGetT(t0, p0x, p0y, p1x, p1y, alpha);
-		let t2 = catmullromSplineGetT(t1, p1x, p1y, p2x, p2y, alpha);
-		let t3 = catmullromSplineGetT(t2, p2x, p2y, p3x, p3y, alpha);
+	//================================================================
+	// COLORS
+	//================================================================
 
-		for (let i = 0; i < numPts; i++) {
-			let t = t1 + (i / (numPts - 1)) * (t2 - t1);
-			let s = [
-				(t1 - t) / (t1 - t0),
-				(t - t0) / (t1 - t0),
-				(t2 - t) / (t2 - t1),
-				(t - t1) / (t2 - t1),
-				(t3 - t) / (t3 - t2),
-				(t - t2) / (t3 - t2),
-				(t2 - t) / (t2 - t0),
-				(t - t0) / (t2 - t0),
-				(t3 - t) / (t3 - t1),
-				(t - t1) / (t3 - t1)
-			];
-			for (let j = 0; j < s.length; j += 2) {
-				if (isNaN(s[j])) {
-					s[j] = 1;
-					s[j + 1] = 0;
-				}
-				if (!isFinite(s[j])) {
-					if (s[j] > 0) {
-						s[j] = 1;
-						s[j + 1] = 0;
-					} else {
-						s[j] = 0;
-						s[j + 1] = 1;
+	$.Color = Q5.Color;
+	$.colorMode = (mode) => {
+		$._colorMode = mode;
+	};
+
+	let basicColors = {
+		aqua: [0, 255, 255],
+		black: [0, 0, 0],
+		blue: [0, 0, 255],
+		brown: [165, 42, 42],
+		crimson: [220, 20, 60],
+		darkviolet: [148, 0, 211],
+		gold: [255, 215, 0],
+		green: [0, 128, 0],
+		gray: [128, 128, 128],
+		hotpink: [255, 105, 180],
+		indigo: [75, 0, 130],
+		khaki: [240, 230, 140],
+		lightgreen: [144, 238, 144],
+		lime: [0, 255, 0],
+		magenta: [255, 0, 255],
+		navy: [0, 0, 128],
+		orange: [255, 165, 0],
+		olive: [128, 128, 0],
+		peachpuff: [255, 218, 185],
+		pink: [255, 192, 203],
+		purple: [128, 0, 128],
+		red: [255, 0, 0],
+		skyblue: [135, 206, 235],
+		tan: [210, 180, 140],
+		turquoise: [64, 224, 208],
+		transparent: [0, 0, 0, 0],
+		white: [255, 255, 255],
+		violet: [238, 130, 238],
+		yellow: [255, 255, 0]
+	};
+
+	$.color = function () {
+		let args = arguments;
+		if (args.length == 1) {
+			if (typeof args[0] == 'string') {
+				if (args[0][0] == '#') {
+					return new Q5.Color(
+						parseInt(args[0].slice(1, 3), 16),
+						parseInt(args[0].slice(3, 5), 16),
+						parseInt(args[0].slice(5, 7), 16),
+						1
+					);
+				} else {
+					if (basicColors[args[0]]) {
+						return new Q5.Color(...basicColors[args[0]], 1);
 					}
+					return new Q5.Color(0, 0, 0, 1);
 				}
 			}
-			let a1x = p0x * s[0] + p1x * s[1];
-			let a1y = p0y * s[0] + p1y * s[1];
-			let a2x = p1x * s[2] + p2x * s[3];
-			let a2y = p1y * s[2] + p2y * s[3];
-			let a3x = p2x * s[4] + p3x * s[5];
-			let a3y = p2y * s[4] + p3y * s[5];
-			let b1x = a1x * s[6] + a2x * s[7];
-			let b1y = a1y * s[6] + a2y * s[7];
-			let b2x = a2x * s[8] + a3x * s[9];
-			let b2y = a2y * s[8] + a3y * s[9];
-			let cx = b1x * s[2] + b2x * s[3];
-			let cy = b1y * s[2] + b2y * s[3];
-			pts.push([cx, cy]);
-		}
-		return pts;
-	}
-
-	$.curveVertex = (x, y) => {
-		curveBuff.push([x, y]);
-		if (curveBuff.length < 4) {
-			return;
+			if (typeof args[0] != 'number' && args[0].MAGIC == 0xc010a) {
+				return args[0];
+			}
 		}
-		let p0 = curveBuff[curveBuff.length - 4];
-		let p1 = curveBuff[curveBuff.length - 3];
-		let p2 = curveBuff[curveBuff.length - 2];
-		let p3 = curveBuff[curveBuff.length - 1];
-		let pts = catmullRomSpline(...p0, ...p1, ...p2, ...p3, $._curveDetail, $._curveAlpha);
-		for (let i = 0; i < pts.length; i++) {
-			if (firstVertex) {
-				ctx.moveTo(...pts[i]);
-			} else {
-				ctx.lineTo(...pts[i]);
+		if ($._colorMode == $.RGB) {
+			if (args.length == 1) {
+				return new Q5.Color(args[0], args[0], args[0], 1);
+			} else if (args.length == 2) {
+				return new Q5.Color(args[0], args[0], args[0], args[1] / 255);
+			} else if (args.length == 3) {
+				return new Q5.Color(args[0], args[1], args[2], 1);
+			} else if (args.length == 4) {
+				return new Q5.Color(args[0], args[1], args[2], args[3] / 255);
+			}
+		} else {
+			if (args.length == 1) {
+				return new Q5.Color(...Q5.Color._hsv2rgb(0, 0, args[0] / 100), 1);
+			} else if (args.length == 2) {
+				return new Q5.Color(...Q5.Color._hsv2rgb(0, 0, args[0] / 100), args[1] / 255);
+			} else if (args.length == 3) {
+				return new Q5.Color(...Q5.Color._hsv2rgb(args[0], args[1] / 100, args[2] / 100), 1);
+			} else if (args.length == 4) {
+				return new Q5.Color(...Q5.Color._hsv2rgb(args[0], args[1] / 100, args[2] / 100), args[3]);
 			}
-			firstVertex = false;
 		}
-	};
-	$.curve = (x1, y1, x2, y2, x3, y3, x4, y4) => {
-		$.beginShape();
-		$.curveVertex(x1, y1);
-		$.curveVertex(x2, y2);
-		$.curveVertex(x3, y3);
-		$.curveVertex(x4, y4);
-		$.endShape();
+		return null;
 	};
 
-	//================================================================
-	// DRAWING MATRIX
-	//================================================================
-	$.translate = (x, y) => ctx.translate(x, y);
-	$.rotate = (r) => {
-		if ($._angleMode == 'degrees') r = $.radians(r);
-		ctx.rotate(r);
+	$.red = (c) => {
+		return c._r;
 	};
-
-	$.scale = (x, y) => {
-		y ??= x;
-		ctx.scale(x, y);
+	$.green = (c) => {
+		return c._g;
 	};
-	$.applyMatrix = (a, b, c, d, e, f) => {
-		ctx.transform(a, b, c, d, e, f);
+	$.blue = (c) => {
+		return c._b;
 	};
-	$.shearX = (ang) => {
-		ctx.transform(1, 0, $.tan(ang), 1, 0, 0);
+	$.alpha = (c) => {
+		return c._a * 255;
 	};
-	$.shearY = (ang) => {
-		ctx.transform(1, $.tan(ang), 0, 1, 0, 0);
+	$.hue = (c) => {
+		c._inferHSV();
+		return c._h;
 	};
-
-	$.resetMatrix = () => {
-		ctx.resetTransform();
-		ctx.scale($._pixelDensity, $._pixelDensity);
+	$.saturation = (c) => {
+		c._inferHSV();
+		return c._s;
 	};
-
-	$._styleNames = [
-		'_doStroke',
-		'_doFill',
-		'_strokeSet',
-		'_fillSet',
-		'_tint',
-		'_imageMode',
-		'_rectMode',
-		'_ellipseMode',
-		'_textFont',
-		'_textLeading',
-		'_leadingSet',
-		'_textSize',
-		'_textAlign',
-		'_textBaseline',
-		'_textStyle',
-		'_textWrap'
-	];
-
-	$._ctxStyleNames = ['strokeStyle', 'fillStyle', 'lineWidth', 'lineCap', 'lineJoin'];
-
-	$._styles = [];
-	$._ctxStyles = [];
-
-	$.pushMatrix = $.push = () => {
-		ctx.save();
-		let styles = {};
-		for (let s of $._styleNames) styles[s] = $[s];
-		$._styles.push(styles);
-		let ctxStyles = {};
-		for (let s of $._ctxStyleNames) ctxStyles[s] = ctx[s];
-		$._ctxStyles.push(ctxStyles);
+	$.brightness = (c) => {
+		c._inferHSV();
+		return c._v;
 	};
-	$.popMatrix = $.pop = () => {
-		ctx.restore();
-		let styles = $._styles.pop();
-		for (let s of $._styleNames) $[s] = styles[s];
-		let ctxStyles = $._ctxStyles.pop();
-		for (let s of $._ctxStyleNames) ctx[s] = ctxStyles[s];
+	$.lightness = (c) => {
+		return ((0.2126 * c._r + 0.7152 * c._g + 0.0722 * c._b) * 100) / 255;
 	};
 
-	//================================================================
-	// IMAGING
-	//================================================================
-	$.imageMode = (mode) => ($._imageMode = mode); // TODO
-	$.image = (img, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight) => {
-		let drawable = img.MAGIC == $.MAGIC ? img.canvas : img;
-		function reset() {
-			if (img.MAGIC != $.MAGIC || !$._tint) return;
-			let c = img.canvas.getContext('2d');
-			c.save();
-			c.resetTransform();
-			c.clearRect(0, 0, c.canvas.width, c.canvas.height);
-			c.drawImage(tmpCt2.canvas, 0, 0);
-			c.restore();
-		}
-		if (img.MAGIC == $.MAGIC && $._tint != null) {
-			makeTmpCt2(img.canvas.width, img.canvas.height);
-			tmpCt2.drawImage(img.canvas, 0, 0);
-			img.tinted($._tint);
-		}
-		if (!dWidth) {
-			if (img.MAGIC == $.MAGIC || img.width) {
-				dWidth = img.width;
-				dHeight = img.height;
-			} else {
-				dWidth = img.videoWidth;
-				dHeight = img.videoHeight;
-			}
-		}
-		if ($._imageMode == 'center') {
-			dx -= dWidth * 0.5;
-			dy -= dHeight * 0.5;
-		}
-		if (sx === undefined) {
-			ctx.drawImage(drawable, dx, dy, dWidth, dHeight);
-			reset();
-			return;
-		}
-		sWidth ??= drawable.width;
-		sHeight ??= drawable.height;
-		ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-		reset();
-	};
+	function lerpHue(h0, h1, t) {
+		var methods = [
+			[Math.abs(h1 - h0), $.map(t, 0, 1, h0, h1)],
+			[Math.abs(h1 + 360 - h0), $.map(t, 0, 1, h0, h1 + 360)],
+			[Math.abs(h1 - 360 - h0), $.map(t, 0, 1, h0, h1 - 360)]
+		];
+		methods.sort((x, y) => x[0] - y[0]);
+		return (methods[0][1] + 720) % 360;
+	}
 
-	$.loadPixels = () => {
-		imgData = ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
-		$.pixels = imgData.data;
-	};
-	$.updatePixels = () => {
-		if (imgData != null) ctx.putImageData(imgData, 0, 0);
+	$.lerpColor = (a, b, t) => {
+		if ($._colorMode == $.RGB) {
+			return new Q5.Color(
+				$.constrain($.lerp(a._r, b._r, t), 0, 255),
+				$.constrain($.lerp(a._g, b._g, t), 0, 255),
+				$.constrain($.lerp(a._b, b._b, t), 0, 255),
+				$.constrain($.lerp(a._a, b._a, t), 0, 1)
+			);
+		} else {
+			a._inferHSV();
+			b._inferHSV();
+			return new Q5.Color(
+				$.constrain(lerpHue(a._h, b._h, t), 0, 360),
+				$.constrain($.lerp(a._s, b._s, t), 0, 100),
+				$.constrain($.lerp(a._v, b._v, t), 0, 100),
+				$.constrain($.lerp(a._a, b._a, t), 0, 1)
+			);
+		}
 	};
 
-	$._incrementPreload = () => preloadCnt++;
-	$._decrementPreload = () => preloadCnt--;
+	//================================================================
+	// DRAWING SETTING
+	//================================================================
 
-	$.loadImage = (url, cb) => {
-		preloadCnt++;
-		let g = $.createImage(100, 100);
-		let c = g.canvas.getContext('2d');
-		let img = new window.Image();
-		img.src = url;
-		img.crossOrigin = 'Anonymous';
-		img.onload = () => {
-			g.width = c.canvas.width = img.naturalWidth;
-			g.height = c.canvas.height = img.naturalHeight;
-			c.drawImage(img, 0, 0);
-			preloadCnt--;
-			if (cb) cb(g);
-		};
-		img.onerror = (e) => {
-			preloadCnt--;
-			throw e;
-		};
-		return g;
-	};
+	function defaultStyle() {
+		ctx.fillStyle = 'white';
+		ctx.strokeStyle = 'black';
+		ctx.lineCap = 'round';
+		ctx.lineJoin = 'miter';
+		ctx.textAlign = 'left';
+	}
 
-	let filterImpl = {};
-	filterImpl[$.THRESHOLD] = (data, thresh) => {
-		if (thresh === undefined) thresh = 127.5;
-		else thresh *= 255;
-		for (let i = 0; i < data.length; i += 4) {
-			const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
-			data[i] = data[i + 1] = data[i + 2] = gray >= thresh ? 255 : 0;
-		}
+	$.strokeWeight = (n) => {
+		if (n > 0) $._doStroke = true;
+		else $._doStroke = false;
+		ctx.lineWidth = n;
 	};
-	filterImpl[$.GRAY] = (data) => {
-		for (let i = 0; i < data.length; i += 4) {
-			const gray = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];
-			data[i] = data[i + 1] = data[i + 2] = gray;
+	$.stroke = function () {
+		$._doStroke = true;
+		$._strokeSet = true;
+		if (typeof arguments[0] == 'string') {
+			ctx.strokeStyle = arguments[0];
+			return;
 		}
-	};
-	filterImpl[$.OPAQUE] = (data) => {
-		for (let i = 0; i < data.length; i += 4) {
-			data[i + 3] = 255;
+		let col = $.color(...arguments);
+		if (col._a <= 0) {
+			$._doStroke = false;
+			return;
 		}
+		ctx.strokeStyle = col;
 	};
-	filterImpl[$.INVERT] = (data) => {
-		for (let i = 0; i < data.length; i += 4) {
-			data[i] = 255 - data[i];
-			data[i + 1] = 255 - data[i + 1];
-			data[i + 2] = 255 - data[i + 2];
+	$.noStroke = () => ($._doStroke = false);
+	$.fill = function () {
+		$._doFill = true;
+		$._fillSet = true;
+		if (typeof arguments[0] == 'string') {
+			ctx.fillStyle = arguments[0];
+			return;
 		}
-	};
-	filterImpl[$.POSTERIZE] = (data, lvl) => {
-		let lvl1 = lvl - 1;
-		for (let i = 0; i < data.length; i += 4) {
-			data[i] = (((data[i] * lvl) >> 8) * 255) / lvl1;
-			data[i + 1] = (((data[i + 1] * lvl) >> 8) * 255) / lvl1;
-			data[i + 2] = (((data[i + 2] * lvl) >> 8) * 255) / lvl1;
+		let col = $.color(...arguments);
+		if (col._a <= 0) {
+			$._doFill = false;
+			return;
 		}
+		ctx.fillStyle = col;
 	};
+	$.noFill = () => ($._doFill = false);
+	$.smooth = () => ($._smooth = true);
+	$.noSmooth = () => ($._smooth = false);
+	$.blendMode = (x) => (ctx.globalCompositeOperation = x);
+	$.strokeCap = (x) => (ctx.lineCap = x);
+	$.strokeJoin = (x) => (ctx.lineJoin = x);
+	$.ellipseMode = (x) => ($._ellipseMode = x);
+	$.rectMode = (x) => ($._rectMode = x);
+	$.curveDetail = (x) => ($._curveDetail = x);
+	$.curveAlpha = (x) => ($._curveAlpha = x);
+	$.curveTightness = (x) => ($._curveAlpha = x);
 
-	filterImpl[$.DILATE] = (data) => {
-		makeTmpBuf();
-		tmpBuf.set(data);
-		let [w, h] = [ctx.canvas.width, ctx.canvas.height];
-		for (let i = 0; i < h; i++) {
-			for (let j = 0; j < w; j++) {
-				let l = 4 * Math.max(j - 1, 0);
-				let r = 4 * Math.min(j + 1, w - 1);
-				let t = 4 * Math.max(i - 1, 0) * w;
-				let b = 4 * Math.min(i + 1, h - 1) * w;
-				let oi = 4 * i * w;
-				let oj = 4 * j;
-				for (let k = 0; k < 4; k++) {
-					let kt = k + t;
-					let kb = k + b;
-					let ko = k + oi;
-					data[oi + oj + k] = Math.max(
-						/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
-						tmpBuf[ko + l],
-						tmpBuf[ko + oj],
-						tmpBuf[ko + r],
-						/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
-					);
-				}
-			}
-		}
+	//================================================================
+	// DRAWING
+	//================================================================
+
+	$.clear = () => {
+		ctx.clearRect(0, 0, $.canvas.width, $.canvas.height);
 	};
-	filterImpl[$.ERODE] = (data) => {
-		makeTmpBuf();
-		tmpBuf.set(data);
-		let [w, h] = [ctx.canvas.width, ctx.canvas.height];
-		for (let i = 0; i < h; i++) {
-			for (let j = 0; j < w; j++) {
-				let l = 4 * Math.max(j - 1, 0);
-				let r = 4 * Math.min(j + 1, w - 1);
-				let t = 4 * Math.max(i - 1, 0) * w;
-				let b = 4 * Math.min(i + 1, h - 1) * w;
-				let oi = 4 * i * w;
-				let oj = 4 * j;
-				for (let k = 0; k < 4; k++) {
-					let kt = k + t;
-					let kb = k + b;
-					let ko = k + oi;
-					data[oi + oj + k] = Math.min(
-						/*tmpBuf[kt+l],*/ tmpBuf[kt + oj] /*tmpBuf[kt+r],*/,
-						tmpBuf[ko + l],
-						tmpBuf[ko + oj],
-						tmpBuf[ko + r],
-						/*tmpBuf[kb+l],*/ tmpBuf[kb + oj] /*tmpBuf[kb+r],*/
-					);
-				}
-			}
+
+	$.background = function () {
+		if (arguments[0] && arguments[0].MAGIC == $.MAGIC) {
+			return $.image(arguments[0], 0, 0, $.width, $.height);
+		}
+		ctx.save();
+		ctx.resetTransform();
+		if (typeof arguments[0] == 'string') {
+			ctx.fillStyle = arguments[0];
+		} else {
+			ctx.fillStyle = $.color(...Array.from(arguments));
 		}
+		ctx.fillRect(0, 0, $.canvas.width, $.canvas.height);
+		ctx.restore();
 	};
 
-	filterImpl[$.BLUR] = (data, rad) => {
-		rad = rad || 1;
-		rad = Math.floor(rad * $._pixelDensity);
-		makeTmpBuf();
-		tmpBuf.set(data);
-
-		let ksize = rad * 2 + 1;
+	$.line = (x0, y0, x1, y1) => {
+		if ($._doStroke) {
+			ctx.beginPath();
+			ctx.moveTo(x0, y0);
+			ctx.lineTo(x1, y1);
+			ctx.stroke();
+		}
+	};
 
-		function gauss1d(ksize) {
-			let im = new Float32Array(ksize);
-			let sigma = 0.3 * rad + 0.8;
-			let ss2 = sigma * sigma * 2;
-			for (let i = 0; i < ksize; i++) {
-				let x = i - ksize / 2;
-				let z = Math.exp(-(x * x) / ss2) / (2.5066282746 * sigma);
-				im[i] = z;
-			}
-			return im;
+	function normAng(x) {
+		let mid = $._angleMode == $.DEGREES ? 180 : Math.PI;
+		let full = mid * 2;
+		if (0 <= x && x <= full) return x;
+		while (x < 0) {
+			x += full;
+		}
+		while (x >= mid) {
+			x -= full;
 		}
+		return x;
+	}
 
-		let kern = gauss1d(ksize);
-		let [w, h] = [ctx.canvas.width, ctx.canvas.height];
-		for (let i = 0; i < h; i++) {
-			for (let j = 0; j < w; j++) {
-				let s0 = 0,
-					s1 = 0,
-					s2 = 0,
-					s3 = 0;
-				for (let k = 0; k < ksize; k++) {
-					let jk = Math.min(Math.max(j - rad + k, 0), w - 1);
-					let idx = 4 * (i * w + jk);
-					s0 += tmpBuf[idx] * kern[k];
-					s1 += tmpBuf[idx + 1] * kern[k];
-					s2 += tmpBuf[idx + 2] * kern[k];
-					s3 += tmpBuf[idx + 3] * kern[k];
-				}
-				let idx = 4 * (i * w + j);
-				data[idx] = s0;
-				data[idx + 1] = s1;
-				data[idx + 2] = s2;
-				data[idx + 3] = s3;
+	function arcImpl(x, y, w, h, start, stop, mode, detail) {
+		if (!$._doFill && !$._doStroke) return;
+		let lo = normAng(start);
+		let hi = normAng(stop);
+		if (lo > hi) [lo, hi] = [hi, lo];
+		if (lo == 0) {
+			if (hi == 0) return;
+			if (($._angleMode == $.DEGREES && hi == 360) || hi == $.TAU) {
+				return $.ellipse(x, y, w, h);
 			}
 		}
-		tmpBuf.set(data);
-		for (let i = 0; i < h; i++) {
-			for (let j = 0; j < w; j++) {
-				let s0 = 0,
-					s1 = 0,
-					s2 = 0,
-					s3 = 0;
-				for (let k = 0; k < ksize; k++) {
-					let ik = Math.min(Math.max(i - rad + k, 0), h - 1);
-					let idx = 4 * (ik * w + j);
-					s0 += tmpBuf[idx] * kern[k];
-					s1 += tmpBuf[idx + 1] * kern[k];
-					s2 += tmpBuf[idx + 2] * kern[k];
-					s3 += tmpBuf[idx + 3] * kern[k];
-				}
-				let idx = 4 * (i * w + j);
-				data[idx] = s0;
-				data[idx + 1] = s1;
-				data[idx + 2] = s2;
-				data[idx + 3] = s3;
-			}
+		ctx.beginPath();
+		for (let i = 0; i < detail + 1; i++) {
+			let t = i / detail;
+			let a = $.lerp(lo, hi, t);
+			let dx = ($.cos(a) * w) / 2;
+			let dy = ($.sin(a) * h) / 2;
+			ctx[i ? 'lineTo' : 'moveTo'](x + dx, y + dy);
+		}
+		if (mode == $.CHORD) {
+			ctx.closePath();
+		} else if (mode == $.PIE) {
+			ctx.lineTo(x, y);
+			ctx.closePath();
+		}
+		if ($._doFill) ctx.fill();
+		if ($._doStroke) ctx.stroke();
+	}
+	$.arc = (x, y, w, h, start, stop, mode, detail) => {
+		if (start == stop) return $.ellipse(x, y, w, h);
+		detail ??= 25;
+		mode ??= $.PIE;
+		if ($._ellipseMode == $.CENTER) {
+			arcImpl(x, y, w, h, start, stop, mode, detail);
+		} else if ($._ellipseMode == $.RADIUS) {
+			arcImpl(x, y, w * 2, h * 2, start, stop, mode, detail);
+		} else if ($._ellipseMode == $.CORNER) {
+			arcImpl(x + w / 2, y + h / 2, w, h, start, stop, mode, detail);
+		} else if ($._ellipseMode == $.CORNERS) {
+			arcImpl((x + w) / 2, (y + h) / 2, w - x, h - y, start, stop, mode, detail);
 		}
 	};
 
-	function makeTmpCtx(w, h) {
-		if (tmpCtx == null) {
-			tmpCtx = document.createElement('canvas').getContext('2d');
+	function ellipseImpl(x, y, w, h) {
+		if (!$._doFill && !$._doStroke) return;
+		ctx.beginPath();
+		ctx.ellipse(x, y, w / 2, h / 2, 0, 0, $.TAU);
+		if ($._doFill) ctx.fill();
+		if ($._doStroke) ctx.stroke();
+	}
+	$.ellipse = (x, y, w, h) => {
+		h ??= w;
+		if ($._ellipseMode == $.CENTER) {
+			ellipseImpl(x, y, w, h);
+		} else if ($._ellipseMode == $.RADIUS) {
+			ellipseImpl(x, y, w * 2, h * 2);
+		} else if ($._ellipseMode == $.CORNER) {
+			ellipseImpl(x + w / 2, y + h / 2, w, h);
+		} else if ($._ellipseMode == $.CORNERS) {
+			ellipseImpl((x + w) / 2, (y + h) / 2, w - x, h - y);
 		}
-		h ??= w || ctx.canvas.height;
-		w ??= ctx.canvas.width;
-		if (tmpCtx.canvas.width != w || tmpCtx.canvas.height != h) {
-			tmpCtx.canvas.width = w;
-			tmpCtx.canvas.height = h;
+	};
+	$.circle = (x, y, r) => {
+		return $.ellipse(x, y, r, r);
+	};
+	$.point = (x, y) => {
+		if (x.x) {
+			y = x.y;
+			x = x.x;
 		}
+		ctx.beginPath();
+		ctx.ellipse(x, y, 0.4, 0.4, 0, 0, $.TAU);
+		ctx.stroke();
+	};
+	function rectImpl(x, y, w, h) {
+		if ($._doFill) ctx.fillRect(x, y, w, h);
+		if ($._doStroke) ctx.strokeRect(x, y, w, h);
 	}
-	function makeTmpCt2(w, h) {
-		if (tmpCt2 == null) {
-			tmpCt2 = document.createElement('canvas').getContext('2d');
+	function roundedRectImpl(x, y, w, h, tl, tr, br, bl) {
+		if (!$._doFill && !$._doStroke) return;
+		if (tl === undefined) {
+			return rectImpl(x, y, w, h);
 		}
-		h ??= w || ctx.canvas.height;
-		w ??= ctx.canvas.width;
-		if (tmpCt2.canvas.width != w || tmpCt2.canvas.height != h) {
-			tmpCt2.canvas.width = w;
-			tmpCt2.canvas.height = h;
+		if (tr === undefined) {
+			return roundedRectImpl(x, y, w, h, tl, tl, tl, tl);
 		}
+		const hh = Math.min(Math.abs(h), Math.abs(w)) / 2;
+		tl = Math.min(hh, tl);
+		tr = Math.min(hh, tr);
+		bl = Math.min(hh, bl);
+		br = Math.min(hh, br);
+		ctx.beginPath();
+		ctx.moveTo(x + tl, y);
+		ctx.arcTo(x + w, y, x + w, y + h, tr);
+		ctx.arcTo(x + w, y + h, x, y + h, br);
+		ctx.arcTo(x, y + h, x, y, bl);
+		ctx.arcTo(x, y, x + w, y, tl);
+		ctx.closePath();
+		if ($._doFill) ctx.fill();
+		if ($._doStroke) ctx.stroke();
 	}
 
-	function makeTmpBuf() {
-		let l = ctx.canvas.width * ctx.canvas.height * 4;
-		if (!tmpBuf || l != tmpBuf.length) {
-			tmpBuf = new Uint8ClampedArray(l);
+	$.rect = (x, y, w, h, tl, tr, br, bl) => {
+		if ($._rectMode == $.CENTER) {
+			roundedRectImpl(x - w / 2, y - h / 2, w, h, tl, tr, br, bl);
+		} else if ($._rectMode == $.RADIUS) {
+			roundedRectImpl(x - w, y - h, w * 2, h * 2, tl, tr, br, bl);
+		} else if ($._rectMode == $.CORNER) {
+			roundedRectImpl(x, y, w, h, tl, tr, br, bl);
+		} else if ($._rectMode == $.CORNERS) {
+			roundedRectImpl(x, y, w - x, h - y, tl, tr, br, bl);
 		}
+	};
+	$.square = (x, y, s, tl, tr, br, bl) => {
+		return $.rect(x, y, s, s, tl, tr, br, bl);
+	};
+
+	function clearBuff() {
+		curveBuff = [];
 	}
 
-	function nativeFilter(filtstr) {
-		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-		tmpCtx.filter = filtstr;
-		tmpCtx.drawImage(ctx.canvas, 0, 0);
-		ctx.save();
-		ctx.resetTransform();
-		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-		ctx.drawImage(tmpCtx.canvas, 0, 0);
-		ctx.restore();
+	$.beginShape = () => {
+		clearBuff();
+		ctx.beginPath();
+		firstVertex = true;
+	};
+	$.beginContour = () => {
+		ctx.closePath();
+		clearBuff();
+		firstVertex = true;
+	};
+	$.endContour = () => {
+		clearBuff();
+		firstVertex = true;
+	};
+	$.vertex = (x, y) => {
+		clearBuff();
+		if (firstVertex) {
+			ctx.moveTo(x, y);
+		} else {
+			ctx.lineTo(x, y);
+		}
+		firstVertex = false;
+	};
+	$.bezierVertex = (cp1x, cp1y, cp2x, cp2y, x, y) => {
+		clearBuff();
+		ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+	};
+	$.quadraticVertex = (cp1x, cp1y, x, y) => {
+		clearBuff();
+		ctx.quadraticCurveTo(cp1x, cp1y, x, y);
+	};
+	$.bezier = (x1, y1, x2, y2, x3, y3, x4, y4) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.bezierVertex(x2, y2, x3, y3, x4, y4);
+		$.endShape();
+	};
+	$.triangle = (x1, y1, x2, y2, x3, y3) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.endShape($.CLOSE);
+	};
+	$.quad = (x1, y1, x2, y2, x3, y3, x4, y4) => {
+		$.beginShape();
+		$.vertex(x1, y1);
+		$.vertex(x2, y2);
+		$.vertex(x3, y3);
+		$.vertex(x4, y4);
+		$.endShape($.CLOSE);
+	};
+	$.endShape = (close) => {
+		clearBuff();
+		if (close) {
+			ctx.closePath();
+		}
+		if ($._doFill) ctx.fill();
+		if ($._doStroke) ctx.stroke();
+		if (!$._doFill && !$._doStroke) {
+			// eh.
+			ctx.save();
+			ctx.fillStyle = 'none';
+			ctx.fill();
+			ctx.restore();
+		}
+	};
+	function catmullRomSpline(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y, numPts, alpha) {
+		//https://en.wikipedia.org/wiki/Centripetal_Catmull–Rom_spline
+		function catmullromSplineGetT(t, p0x, p0y, p1x, p1y, alpha) {
+			let a = Math.pow(p1x - p0x, 2.0) + Math.pow(p1y - p0y, 2.0);
+			let b = Math.pow(a, alpha * 0.5);
+			return b + t;
+		}
+		let pts = [];
+
+		let t0 = 0.0;
+		let t1 = catmullromSplineGetT(t0, p0x, p0y, p1x, p1y, alpha);
+		let t2 = catmullromSplineGetT(t1, p1x, p1y, p2x, p2y, alpha);
+		let t3 = catmullromSplineGetT(t2, p2x, p2y, p3x, p3y, alpha);
+
+		for (let i = 0; i < numPts; i++) {
+			let t = t1 + (i / (numPts - 1)) * (t2 - t1);
+			let s = [
+				(t1 - t) / (t1 - t0),
+				(t - t0) / (t1 - t0),
+				(t2 - t) / (t2 - t1),
+				(t - t1) / (t2 - t1),
+				(t3 - t) / (t3 - t2),
+				(t - t2) / (t3 - t2),
+				(t2 - t) / (t2 - t0),
+				(t - t0) / (t2 - t0),
+				(t3 - t) / (t3 - t1),
+				(t - t1) / (t3 - t1)
+			];
+			for (let j = 0; j < s.length; j += 2) {
+				if (isNaN(s[j])) {
+					s[j] = 1;
+					s[j + 1] = 0;
+				}
+				if (!isFinite(s[j])) {
+					if (s[j] > 0) {
+						s[j] = 1;
+						s[j + 1] = 0;
+					} else {
+						s[j] = 0;
+						s[j + 1] = 1;
+					}
+				}
+			}
+			let a1x = p0x * s[0] + p1x * s[1];
+			let a1y = p0y * s[0] + p1y * s[1];
+			let a2x = p1x * s[2] + p2x * s[3];
+			let a2y = p1y * s[2] + p2y * s[3];
+			let a3x = p2x * s[4] + p3x * s[5];
+			let a3y = p2y * s[4] + p3y * s[5];
+			let b1x = a1x * s[6] + a2x * s[7];
+			let b1y = a1y * s[6] + a2y * s[7];
+			let b2x = a2x * s[8] + a3x * s[9];
+			let b2y = a2y * s[8] + a3y * s[9];
+			let cx = b1x * s[2] + b2x * s[3];
+			let cy = b1y * s[2] + b2y * s[3];
+			pts.push([cx, cy]);
+		}
+		return pts;
 	}
 
-	$.filter = (typ, x) => {
-		let support = $.HARDWARE_FILTERS && ctx.filter != undefined;
-		if (support) {
-			makeTmpCtx();
-			if (typ == $.THRESHOLD) {
-				x ??= 0.5;
-				x = Math.max(x, 0.00001);
-				let b = Math.floor((0.5 / x) * 100);
-				nativeFilter(`saturate(0%) brightness(${b}%) contrast(1000000%)`);
-			} else if (typ == $.GRAY) {
-				nativeFilter(`saturate(0%)`);
-			} else if (typ == $.OPAQUE) {
-				tmpCtx.fillStyle = 'black';
-				tmpCtx.fillRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-				tmpCtx.drawImage(ctx.canvas, 0, 0);
-				ctx.save();
-				ctx.resetTransform();
-				ctx.drawImage(tmpCtx.canvas, 0, 0);
-				ctx.restore();
-			} else if (typ == $.INVERT) {
-				nativeFilter(`invert(100%)`);
-			} else if (typ == $.BLUR) {
-				nativeFilter(`blur(${Math.ceil((x * $._pixelDensity) / 1) || 1}px)`);
+	$.curveVertex = (x, y) => {
+		curveBuff.push([x, y]);
+		if (curveBuff.length < 4) {
+			return;
+		}
+		let p0 = curveBuff[curveBuff.length - 4];
+		let p1 = curveBuff[curveBuff.length - 3];
+		let p2 = curveBuff[curveBuff.length - 2];
+		let p3 = curveBuff[curveBuff.length - 1];
+		let pts = catmullRomSpline(...p0, ...p1, ...p2, ...p3, $._curveDetail, $._curveAlpha);
+		for (let i = 0; i < pts.length; i++) {
+			if (firstVertex) {
+				ctx.moveTo(...pts[i]);
 			} else {
-				let imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-				filterImpl[typ](imgData.data, x);
-				ctx.putImageData(imgData, 0, 0);
+				ctx.lineTo(...pts[i]);
 			}
-		} else {
-			let imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
-			filterImpl[typ](imgData.data, x);
-			ctx.putImageData(imgData, 0, 0);
+			firstVertex = false;
 		}
 	};
+	$.curve = (x1, y1, x2, y2, x3, y3, x4, y4) => {
+		$.beginShape();
+		$.curveVertex(x1, y1);
+		$.curveVertex(x2, y2);
+		$.curveVertex(x3, y3);
+		$.curveVertex(x4, y4);
+		$.endShape();
+	};
 
-	$.resize = (w, h) => {
-		makeTmpCtx();
-		tmpCtx.drawImage(ctx.canvas, 0, 0);
-		$.width = w;
-		$.height = h;
-		ctx.canvas.width = w * $._pixelDensity;
-		ctx.canvas.height = h * $._pixelDensity;
-		ctx.save();
-		ctx.resetTransform();
-		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-		ctx.drawImage(tmpCtx.canvas, 0, 0, ctx.canvas.width, ctx.canvas.height);
-		ctx.restore();
+	//================================================================
+	// DRAWING MATRIX
+	//================================================================
+	$.translate = (x, y) => ctx.translate(x, y);
+	$.rotate = (r) => {
+		if ($._angleMode == 'degrees') r = $.radians(r);
+		ctx.rotate(r);
 	};
 
-	$.get = (x, y, w, h) => {
-		if (x !== undefined && w === undefined) {
-			let c = ctx.getImageData(x, y, 1, 1).data;
-			return new Q5.Color(c[0], c[1], c[2], c[3] / 255);
-		}
-		x = x || 0;
-		y = y || 0;
-		w = w || $.width;
-		h = h || $.height;
-		let g = $.createGraphics(w, h);
-		g.pixelDensity($._pixelDensity);
-		let imgData = ctx.getImageData(x * $._pixelDensity, y * $._pixelDensity, w * $._pixelDensity, h * $._pixelDensity);
-		g.canvas.getContext('2d').putImageData(imgData, 0, 0);
-		return g;
+	$.scale = (x, y) => {
+		y ??= x;
+		ctx.scale(x, y);
+	};
+	$.applyMatrix = (a, b, c, d, e, f) => {
+		ctx.transform(a, b, c, d, e, f);
+	};
+	$.shearX = (ang) => {
+		ctx.transform(1, 0, $.tan(ang), 1, 0, 0);
+	};
+	$.shearY = (ang) => {
+		ctx.transform(1, $.tan(ang), 0, 1, 0, 0);
 	};
 
-	$.set = (x, y, c) => {
-		if (c.MAGIC == $.MAGIC) {
-			let old = $._tint;
-			$._tint = null;
-			$.image(c, x, y);
-			$._tint = old;
-			return;
-		}
-		for (let i = 0; i < $._pixelDensity; i++) {
-			for (let j = 0; j < $._pixelDensity; j++) {
-				let idx = 4 * ((y * $._pixelDensity + i) * ctx.canvas.width + x * $._pixelDensity + j);
-				$.pixels[idx] = c._r;
-				$.pixels[idx + 1] = c._g;
-				$.pixels[idx + 2] = c._b;
-				$.pixels[idx + 3] = c._a * 255;
-			}
-		}
+	$.resetMatrix = () => {
+		ctx.resetTransform();
+		ctx.scale($._pixelDensity, $._pixelDensity);
 	};
 
-	$.tinted = function () {
-		let col = $.color(...Array.from(arguments));
-		let alpha = col._a;
-		col._a = 1;
-		makeTmpCtx();
-		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-		tmpCtx.fillStyle = col;
-		tmpCtx.fillRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-		tmpCtx.globalCompositeOperation = 'multiply';
-		tmpCtx.drawImage(ctx.canvas, 0, 0);
-		tmpCtx.globalCompositeOperation = 'source-over';
+	$._styleNames = [
+		'_doStroke',
+		'_doFill',
+		'_strokeSet',
+		'_fillSet',
+		'_tint',
+		'_imageMode',
+		'_rectMode',
+		'_ellipseMode',
+		'_textFont',
+		'_textLeading',
+		'_leadingSet',
+		'_textSize',
+		'_textAlign',
+		'_textBaseline',
+		'_textStyle',
+		'_textWrap'
+	];
 
-		ctx.save();
-		ctx.resetTransform();
-		let old = ctx.globalCompositeOperation;
-		ctx.globalCompositeOperation = 'source-in';
-		ctx.drawImage(tmpCtx.canvas, 0, 0);
-		ctx.globalCompositeOperation = old;
-		ctx.restore();
+	$._ctxStyleNames = ['strokeStyle', 'fillStyle', 'lineWidth', 'lineCap', 'lineJoin'];
 
-		tmpCtx.globalAlpha = alpha;
-		tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
-		tmpCtx.drawImage(ctx.canvas, 0, 0);
-		tmpCtx.globalAlpha = 1;
+	$._styles = [];
+	$._ctxStyles = [];
 
+	$.pushMatrix = $.push = () => {
 		ctx.save();
-		ctx.resetTransform();
-		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-		ctx.drawImage(tmpCtx.canvas, 0, 0);
+		let styles = {};
+		for (let s of $._styleNames) styles[s] = $[s];
+		$._styles.push(styles);
+		let ctxStyles = {};
+		for (let s of $._ctxStyleNames) ctxStyles[s] = ctx[s];
+		$._ctxStyles.push(ctxStyles);
+	};
+	$.popMatrix = $.pop = () => {
 		ctx.restore();
+		let styles = $._styles.pop();
+		for (let s of $._styleNames) $[s] = styles[s];
+		let ctxStyles = $._ctxStyles.pop();
+		for (let s of $._ctxStyleNames) ctx[s] = ctxStyles[s];
 	};
 
-	$.tint = function () {
-		$._tint = $.color(...Array.from(arguments));
+	//================================================================
+	// IMAGING
+	//================================================================
+	$.imageMode = (mode) => ($._imageMode = mode); // TODO
+	$.image = (img, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight) => {
+		let drawable = img.MAGIC == $.MAGIC ? img.canvas : img;
+		function reset() {
+			if (img.MAGIC != $.MAGIC || !$._tint) return;
+			let c = img.canvas.getContext('2d');
+			c.save();
+			c.resetTransform();
+			c.clearRect(0, 0, c.canvas.width, c.canvas.height);
+			c.drawImage(tmpCt2.canvas, 0, 0);
+			c.restore();
+		}
+		if (img.MAGIC == $.MAGIC && $._tint != null) {
+			makeTmpCt2(img.canvas.width, img.canvas.height);
+			tmpCt2.drawImage(img.canvas, 0, 0);
+			img.tinted($._tint);
+		}
+		if (!dWidth) {
+			if (img.MAGIC == $.MAGIC || img.width) {
+				dWidth = img.width;
+				dHeight = img.height;
+			} else {
+				dWidth = img.videoWidth;
+				dHeight = img.videoHeight;
+			}
+		}
+		if ($._imageMode == 'center') {
+			dx -= dWidth * 0.5;
+			dy -= dHeight * 0.5;
+		}
+		if (sx === undefined) {
+			ctx.drawImage(drawable, dx, dy, dWidth, dHeight);
+			reset();
+			return;
+		}
+		sWidth ??= drawable.width;
+		sHeight ??= drawable.height;
+		ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+		reset();
 	};
 
-	$.noTint = () => ($._tint = null);
+	$._incrementPreload = () => preloadCnt++;
+	$._decrementPreload = () => preloadCnt--;
 
-	$.mask = (img) => {
-		ctx.save();
-		ctx.resetTransform();
-		let old = ctx.globalCompositeOperation;
-		ctx.globalCompositeOperation = 'destination-in';
-		ctx.drawImage(img.canvas, 0, 0);
-		ctx.globalCompositeOperation = old;
-		ctx.restore();
+	$.loadImage = (url, cb) => {
+		preloadCnt++;
+		let g = $.createImage(100, 100);
+		let c = g.canvas.getContext('2d');
+		let img = new window.Image();
+		img.src = url;
+		img.crossOrigin = 'Anonymous';
+		img.onload = () => {
+			g.width = c.canvas.width = img.naturalWidth;
+			g.height = c.canvas.height = img.naturalHeight;
+			c.drawImage(img, 0, 0);
+			preloadCnt--;
+			if (cb) cb(g);
+		};
+		img.onerror = (e) => {
+			preloadCnt--;
+			throw e;
+		};
+		return g;
 	};
 
-	$.clearTemporaryBuffers = () => {
+	$._clearTemporaryBuffers = () => {
 		tmpCtx = null;
 		tmpCt2 = null;
 		tmpBuf = null;
 	};
-	$._save = (data, name, ext) => {
-		name = name || 'untitled';
-		ext = ext || 'png';
-		if (ext == 'jpg' || ext == 'png') data = data.toDataURL();
-		else {
-			let type = 'text/plain';
-			if (ext == 'json') {
-				if (typeof data != 'string') data = JSON.stringify(data);
-				type = 'text/json';
-			}
-			data = new Blob([data], { type });
-			data = URL.createObjectURL(data);
-		}
-		let a = document.createElement('a');
-		a.href = data;
-		a.download = name + '.' + ext;
-		document.body.append(a);
-		a.click();
-		document.body.removeChild(a);
-		URL.revokeObjectURL(a.href);
-	};
-	$.save = (a, b, c) => {
-		if (!a || (typeof a == 'string' && (!b || (!c && b.length < 5)))) {
-			c = b;
-			b = a;
-			a = ctx.canvas;
-		}
-		if (c) return $._save(a, b, c);
-		if (b) {
-			b = b.split('.');
-			$._save(a, b[0], b.at(-1));
-		} else $._save(a);
-	};
-	$.canvas.save = $.save;
-	$.saveCanvas = $.save;
-
-	$.remove = () => {
-		$.noLoop();
-		$.canvas.remove();
-	};
-
-	if (scope == 'image') return;
 
 	//================================================================
 	// TYPOGRAPHY
@@ -1623,7 +1630,8 @@ function Q5(scope, parent) {
 		if (str === undefined) return;
 		str = str.toString();
 		if (!$._doFill && !$._doStroke) return;
-		let c, ti, k, cX, cY;
+		let c, ti, tg, k, cX, cY;
+		let mod = 1;
 		let t = ctx.getTransform();
 		let useCache = $._useCache || ($._textCache && (t.b != 0 || t.c != 0));
 		if (!useCache) {
@@ -1637,34 +1645,38 @@ function Q5(scope, parent) {
 				$.textImage(ti, x, y);
 				return;
 			}
-			ti = $.createGraphics(1, 1);
-			c = ti._ctx;
+			tg = $.createGraphics(1, 1);
+			c = tg._ctx;
+			mod = $._pixelDensity;
 		}
-		c.font = `${$._textStyle} ${$._textSize}px ${$._textFont}`;
+		c.font = `${$._textStyle} ${$._textSize * mod}px ${$._textFont}`;
 		let lines = str.split('\n');
 		if (useCache) {
 			cX = 0;
-			cY = $._textLeading * lines.length;
+			cY = $._textLeading * mod * lines.length;
 			let m = c.measureText(' ');
-			ti._ascent = m.fontBoundingBoxAscent;
-			ti._descent = m.fontBoundingBoxDescent;
-			h ??= cY + ti._descent;
-			ti.resizeCanvas(Math.ceil($.textWidth(str)), Math.ceil(h));
-			ti.pixelDensity($._pixelDensity);
+			tg._ascent = m.fontBoundingBoxAscent;
+			tg._descent = m.fontBoundingBoxDescent;
+			h ??= cY + tg._descent;
+			tg.resizeCanvas(Math.ceil(c.measureText(str).width), Math.ceil(h));
 
 			c.fillStyle = ctx.fillStyle;
 			c.strokeStyle = ctx.strokeStyle;
+			c.lineWidth = ctx.lineWidth * mod;
 		}
+		let f = c.fillStyle;
+		if (!$._fillSet) c.fillStyle = 'black';
 		for (let i = 0; i < lines.length; i++) {
 			if ($._doStroke && $._strokeSet) c.strokeText(lines[i], cX, cY);
-			let f = c.fillStyle;
-			if (!$._fillSet) c.fillStyle = 'black';
 			if ($._doFill) c.fillText(lines[i], cX, cY);
-			if (!$._fillSet) c.fillStyle = f;
 			cY += $._textLeading;
 			if (cY > h) break;
 		}
+		if (!$._fillSet) c.fillStyle = f;
 		if (useCache) {
+			ti = tg.get();
+			ti.width /= $._pixelDensity;
+			ti.height /= $._pixelDensity;
 			$._tic.set(k, ti);
 			$.textImage(ti, x, y);
 		}
@@ -2765,6 +2777,7 @@ class _Q5Image extends Q5 {
 	constructor(width, height) {
 		super('image');
 		this.createCanvas(width, height);
+		delete this.createCanvas;
 		this._loop = false;
 	}
 }