From 49c9326fb86fab271277cbc6cf508c6a7524d557 Mon Sep 17 00:00:00 2001
From: Matthew Savage <github@bluepichu.com>
Date: Mon, 17 Jul 2017 11:57:17 -0700
Subject: [PATCH] Feat: Add more valign options and a debug mode (#51)

BREAKING CHANGE: The default text style changed from `bottom` to `baseline`.

Closes #41
Closes #48
---
 demo/index.html         | 100 ++++++++++++++++----
 pixi-multistyle-text.ts | 201 +++++++++++++++++++++++++++++++++++-----
 2 files changed, 263 insertions(+), 38 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 31e1efb..6f5d4d2 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -44,8 +44,7 @@ <h2>Nesting Tags</h2>
 	&quot;default&quot;: {
 		fontFamily: &quot;Arial&quot;,
 		fontSize: &quot;24px&quot;,
-		fill: &quot;#cccccc&quot;,
-		valign: &quot;bottom&quot;
+		fill: &quot;#cccccc&quot;
 	},
 	&quot;outline&quot;: { stroke: &quot;black&quot;, strokeThickness: 2 },
 	&quot;b&quot;: { fontWeight: 700 },
@@ -57,17 +56,25 @@ <h2>Nesting Tags</h2>
 });</code></pre>
 
 <h2>Vertical Alignment</h2>
-<pre><code class="js">let valign = new MultiStyleText(&quot;You can use &lt;code&gt;valign&lt;/code&gt; to control the &lt;top&gt;vertical&lt;/top&gt; &lt;middle&gt;alignment&lt;/middle&gt; of &lt;bottom&gt;text&lt;/bottom&gt;.&quot;,
+<pre><code class="js">let valign = new MultiStyleText(&quot;You can use &lt;code&gt;valign&lt;/code&gt; &lt;top&gt;to&lt;/top&gt; &lt;middle&gt;control&lt;/middle&gt; &lt;baseline&gt;the&lt;/baseline&gt; &lt;bottom&gt;vertical&lt;/bottom&gt; &lt;custom1&gt;alignment&lt;/custom1&gt; &lt;custom2&gt;of&lt;/custom2&gt; &lt;custom3&gt;text&lt;/custom3&gt;.&quot;,
 {
 	&quot;default&quot;: {
 		fontFamily: &quot;Arial&quot;,
 		fontSize: &quot;24px&quot;,
 		fill: &quot;#cccccc&quot;
 	},
-	&quot;code&quot;: { fontFamily: &quot;Inconsolata&quot;, fill: &quot;#ff8888&quot;, valign: &quot;bottom&quot; },
+	&quot;code&quot;: {
+		fontFamily: &quot;Inconsolata&quot;,
+		fontSize: &quot;36px&quot;,
+		fill: &quot;#ff8888&quot;
+	},
 	&quot;top&quot;: { fontSize: &quot;14px&quot;, valign: &quot;top&quot; },
 	&quot;middle&quot;: { fontSize: &quot;14px&quot;, valign: &quot;middle&quot; },
-	&quot;bottom&quot;: { fontSize: &quot;14px&quot;, valign: &quot;bottom&quot; }
+	&quot;bottom&quot;: { fontSize: &quot;14px&quot;, valign: &quot;bottom&quot; },
+	&quot;baseline&quot;: { fontSize: &quot;14px&quot;, valign: &quot;baseline&quot; },
+	&quot;custom1&quot;: { fontSize: &quot;14px&quot;, valign: 5 },
+	&quot;custom2&quot;: { fontSize: &quot;14px&quot;, valign: -70 },
+	&quot;custom3&quot;: { fontSize: &quot;14px&quot;, valign: 25 }
 });</code></pre>
 
 <h2>Wrapping and Alignment</h2>
@@ -84,7 +91,10 @@ <h2>Wrapping and Alignment</h2>
 });</code></pre>
 
 <h2>Wrapping and Alignment II</h2>
-<pre><code class="js">let wrapping2 = new MultiStyleText(&quot;全局设置的&lt;blue&gt;对齐&lt;/blue&gt;属性由「默认」来&lt;big&gt;控制&lt;/big&gt;。而且不能被&lt;blue&gt;别的样式&lt;/blue&gt;所&lt;red&gt;覆盖&lt;/red&gt;。&quot;,
+<pre><code class="js">// breakWords allows newlines to be inserted anywhere - not just at whitespaces.
+// This is useful for some languages like Chinese.
+
+let wrapping2 = new MultiStyleText(&quot;全局设置的&lt;blue&gt;对齐&lt;/blue&gt;属性由「默认」来&lt;big&gt;控制&lt;/big&gt;。而且不能被&lt;blue&gt;别的样式&lt;/blue&gt;所&lt;red&gt;覆盖&lt;/red&gt;。&quot;,
 {
 	&quot;default&quot;: {
 		fontFamily: &quot;Arial&quot;,
@@ -99,6 +109,29 @@ <h2>Wrapping and Alignment II</h2>
 	&quot;big&quot;: { fill: 0x88ff88, stroke: 0x44cc44, fontSize: &quot;36px&quot; }
 });</code></pre>
 
+<h2>Debug Mode</h2>
+<pre><code class="js">MultiStyleText.debugOptions.spans.enabled = true;
+MultiStyleText.debugOptions.objects.enabled = true;
+
+let debug = new MultiStyleText(&quot;You can use &lt;code&gt;debug mode&lt;/code&gt; to help you figure out what your text is doing.  You can use &lt;blue&gt;global, &lt;/blue&gt;&lt;red&gt;static&lt;/red&gt; settings or &lt;no-debug&gt;override those with the &lt;code&gt;debug&lt;/code&gt; style option.&lt;/no-debug&gt;&quot;,
+{
+	&quot;default&quot;: {
+		fontFamily: &quot;Arial&quot;,
+		fontSize: &quot;24px&quot;,
+		fill: &quot;#cccccc&quot;,
+		wordWrap: true,
+		wordWrapWidth: 500,
+	},
+	&quot;code&quot;: {
+		fontFamily: &quot;Inconsolata&quot;,
+		fontSize: &quot;36px&quot;,
+		fill: &quot;#ff8888&quot;
+	},
+	&quot;blue&quot;: { fill: 0x4488ff, stroke: 0x2244cc },
+	&quot;red&quot;: { fill: 0xff8888, stroke: 0xcc4444 },
+	&quot;no-debug&quot;: { debug: false }
+});</code></pre>
+
 <h2>Have Fun</h2>
 <pre><code class="js">let funStyles = {
 	&quot;default&quot;: {
@@ -132,7 +165,7 @@ <h2>Have Fun</h2>
 			<div id="pixi-container">
 				<script>
 PIXI.settings.RESOLUTION = 2;
-let renderer = PIXI.autoDetectRenderer(600, 2400);
+let renderer = PIXI.autoDetectRenderer(600, 2680);
 renderer.backgroundColor = 0x333333;
 document.getElementById("pixi-container").appendChild(renderer.view);
 let stage = new PIXI.Container();
@@ -170,8 +203,7 @@ <h2>Have Fun</h2>
 	"default": {
 		fontFamily: "Arial",
 		fontSize: "24px",
-		fill: "#cccccc",
-		valign: "bottom"
+		fill: "#cccccc"
 	},
 	"outline": { stroke: "black", strokeThickness: 2 },
 	"b": { fontWeight: 700 },
@@ -187,17 +219,25 @@ <h2>Have Fun</h2>
 stage.addChild(nested);
 
 // Vertical Alignment
-let valign = new MultiStyleText("You can use <code>valign</code> to control the <top>vertical</top> <middle>alignment</middle> of <bottom>text</bottom>.",
+let valign = new MultiStyleText("You can use <code>valign</code> <top>to</top> <middle>control</middle> <baseline>the</baseline> <bottom>vertical</bottom> <custom1>alignment</custom1> <custom2>of</custom2> <custom3>text</custom3>.",
 {
 	"default": {
 		fontFamily: "Arial",
 		fontSize: "24px",
 		fill: "#cccccc"
 	},
-	"code": { fontFamily: "Inconsolata", fill: "#ff8888", valign: "bottom" },
+	"code": {
+		fontFamily: "Inconsolata",
+		fontSize: "36px",
+		fill: "#ff8888"
+	},
 	"top": { fontSize: "14px", valign: "top" },
 	"middle": { fontSize: "14px", valign: "middle" },
-	"bottom": { fontSize: "14px", valign: "bottom" }
+	"bottom": { fontSize: "14px", valign: "bottom" },
+	"baseline": { fontSize: "14px", valign: "baseline" },
+	"custom1": { fontSize: "14px", valign: 5 },
+	"custom2": { fontSize: "14px", valign: -70 },
+	"custom3": { fontSize: "14px", valign: 25 }
 });
 
 valign.x = 300 - valign.width / 2;
@@ -221,9 +261,7 @@ <h2>Have Fun</h2>
 wrapping.y = 1220;
 stage.addChild(wrapping);
 
-// Wrapping and Alignment with "breakWords" set
-// Once breakWords is set, line breaks may happen at any position(not just whitespaces) of the text when the width is full.
-// This is useful for some languages like Chinese.
+// Wrapping and Alignment II
 let wrapping2 = new MultiStyleText("全局设置的<blue>对齐</blue>属性由「默认」来<big>控制</big>。而且不能被<blue>别的样式</blue>所<red>覆盖</red>。",
 {
 	"default": {
@@ -243,6 +281,36 @@ <h2>Have Fun</h2>
 wrapping2.y = 1700;
 stage.addChild(wrapping2);
 
+// Debug Mode
+let debug = new MultiStyleText("You can use <code>debug mode</code> to help you figure out what your text is doing.  You can use <blue>global, </blue><red>static</red> settings or <no-debug>override those with the <code>debug</code> style option.</no-debug>",
+{
+	"default": {
+		fontFamily: "Arial",
+		fontSize: "24px",
+		fill: "#cccccc",
+		wordWrap: true,
+		wordWrapWidth: 500,
+	},
+	"code": {
+		fontFamily: "Inconsolata",
+		fontSize: "36px",
+		fill: "#ff8888"
+	},
+	"blue": { fill: 0x4488ff, stroke: 0x2244cc },
+	"red": { fill: 0xff8888, stroke: 0xcc4444 },
+	"no-debug": { debug: false }
+});
+
+MultiStyleText.debugOptions.spans.enabled = true;
+MultiStyleText.debugOptions.objects.enabled = true;
+
+debug.x = 300 - debug.width / 2;
+debug.y = 2050;
+stage.addChild(debug);
+
+MultiStyleText.debugOptions.spans.enabled = false;
+MultiStyleText.debugOptions.objects.enabled = false;
+
 // Have Fun
 let funStyles = {
 	"default": {
@@ -263,7 +331,7 @@ <h2>Have Fun</h2>
 let fun = new MultiStyleText("Now have fun making some <blue>beautiful</blue> <red>multistyle</red> text!", funStyles);
 
 fun.x = 300 - fun.width / 2;
-fun.y = 2180;
+fun.y = 2480;
 stage.addChild(fun);
 
 // Animate
diff --git a/pixi-multistyle-text.ts b/pixi-multistyle-text.ts
index a7e5c50..9fe5ab2 100644
--- a/pixi-multistyle-text.ts
+++ b/pixi-multistyle-text.ts
@@ -3,7 +3,8 @@
 "use strict";
 
 export interface ExtendedTextStyle extends PIXI.TextStyleOptions {
-	valign?: "top" | "middle" | "bottom";
+	valign?: "top" | "middle" | "bottom" | "baseline" | number;
+	debug?: boolean;
 }
 
 export interface TextStyleSet {
@@ -22,6 +23,7 @@ interface TextData {
 	width: number;
 	height: number;
 	fontProperties: FontProperties;
+	tagName: string;
 }
 
 interface TextDrawingData {
@@ -29,12 +31,33 @@ interface TextDrawingData {
 	style: ExtendedTextStyle;
 	x: number;
 	y: number;
+	width: number;
+	ascent: number;
+	descent: number;
+	tagName: string;
+}
+
+export interface MstDebugOptions {
+	spans: {
+		enabled?: boolean;
+		baseline?: string;
+		top?: string;
+		bottom?: string;
+		bounding?: string;
+		text?: boolean;
+	};
+	objects: {
+		enabled?: boolean;
+		bounding?: string;
+		text?: boolean;
+	}
 }
 
 export default class MultiStyleText extends PIXI.Text {
 	private static DEFAULT_TAG_STYLE: ExtendedTextStyle = {
 		align: "left",
 		breakWords: false,
+		// debug intentionally not included
 		dropShadow: false,
 		dropShadowAngle: Math.PI / 6,
 		dropShadowBlur: 0,
@@ -55,10 +78,27 @@ export default class MultiStyleText extends PIXI.Text {
 		stroke: "black",
 		strokeThickness: 0,
 		textBaseline: "alphabetic",
+		valign: "baseline",
 		wordWrap: false,
 		wordWrapWidth: 100
 	};
 
+	public static debugOptions: MstDebugOptions = {
+		spans: {
+			enabled: false,
+			baseline: "#44BB44",
+			top: "#BB4444",
+			bottom: "#4444BB",
+			bounding: "rgba(255, 255, 255, 0.1)",
+			text: true
+		},
+		objects: {
+			enabled: false,
+			bounding: "rgba(255, 255, 255, 0.05)",
+			text: true
+		}
+	};
+
 	private textStyles: TextStyleSet;
 
 	constructor(text: string, styles: TextStyleSet) {
@@ -112,6 +152,7 @@ export default class MultiStyleText extends PIXI.Text {
 		let re = new RegExp(`<\/?(${tags})>`, "g");
 
 		let styleStack = [this.assign({}, this.textStyles["default"])];
+		let tagNameStack = ["default"];
 
 		// determine the group of word for each line
 		for (let i = 0; i < lines.length; i++) {
@@ -127,7 +168,7 @@ export default class MultiStyleText extends PIXI.Text {
 
 			// if there is no match, we still need to add the line with the default style
 			if (matches.length === 0) {
-				lineTextData.push(this.createTextData(lines[i], styleStack[styleStack.length - 1]));
+				lineTextData.push(this.createTextData(lines[i], styleStack[styleStack.length - 1], tagNameStack[tagNameStack.length - 1]));
 			}
 			else {
 				// We got a match! add the text with the needed style
@@ -138,16 +179,19 @@ export default class MultiStyleText extends PIXI.Text {
 					if (matches[j].index > currentSearchIdx) {
 						lineTextData.push(this.createTextData(
 							lines[i].substring(currentSearchIdx, matches[j].index),
-							styleStack[styleStack.length - 1]
+							styleStack[styleStack.length - 1],
+							tagNameStack[tagNameStack.length - 1]
 						));
 					}
 
 					if (matches[j][0][1] === "/") { // reset the style if end of tag
 						if (styleStack.length > 1) {
 							styleStack.pop();
+							tagNameStack.pop();
 						}
 					} else { // set the current style
 						styleStack.push(this.assign({}, styleStack[styleStack.length - 1], this.textStyles[matches[j][1]]));
+						tagNameStack.push(matches[j][1]);
 					}
 
 					// update the current search index
@@ -158,7 +202,8 @@ export default class MultiStyleText extends PIXI.Text {
 				if (currentSearchIdx < lines[i].length) {
 					lineTextData.push(this.createTextData(
 						lines[i].substring(currentSearchIdx),
-						styleStack[styleStack.length - 1]
+						styleStack[styleStack.length - 1],
+						tagNameStack[tagNameStack.length - 1]
 					));
 				}
 			}
@@ -173,13 +218,14 @@ export default class MultiStyleText extends PIXI.Text {
 		return new PIXI.TextStyle(style).toFontString();
 	}
 
-	private createTextData(text: string, style: ExtendedTextStyle): TextData {
+	private createTextData(text: string, style: ExtendedTextStyle, tagName: string): TextData {
 		return {
 			text,
 			style,
 			width: 0,
 			height: 0,
-			fontProperties: undefined
+			fontProperties: undefined,
+			tagName
 		};
 	}
 
@@ -217,12 +263,16 @@ export default class MultiStyleText extends PIXI.Text {
 
 		// calculate text width and height
 		let lineWidths: number[] = [];
-		let lineHeights: number[] = [];
+		let lineYMins: number[] = [];
+		let lineYMaxs: number[] = [];
+		let baselines: number[] = [];
 		let maxLineWidth = 0;
 
 		for (let i = 0; i < lines.length; i++) {
 			let lineWidth = 0;
-			let lineHeight = 0;
+			let lineYMin = 0;
+			let lineYMax = 0;
+			let baseline = 0;
 			for (let j = 0; j < outputTextData[i].length; j++) {
 				let sty = outputTextData[i][j].style;
 
@@ -251,26 +301,34 @@ export default class MultiStyleText extends PIXI.Text {
 				// save the height
 				outputTextData[i][j].height =
 						outputTextData[i][j].fontProperties.fontSize + outputTextData[i][j].style.strokeThickness;
-				lineHeight = Math.max(lineHeight, outputTextData[i][j].height);
+
+				if (typeof sty.valign === "number") {
+					lineYMin = Math.min(lineYMin, sty.valign - outputTextData[i][j].fontProperties.descent);
+					lineYMax = Math.max(lineYMax, sty.valign + outputTextData[i][j].fontProperties.ascent);
+				} else {
+					lineYMin = Math.min(lineYMin, -outputTextData[i][j].fontProperties.descent);
+					lineYMax = Math.max(lineYMax, outputTextData[i][j].fontProperties.ascent);
+				}
 			}
 
 			lineWidths[i] = lineWidth;
-			lineHeights[i] = lineHeight;
+			lineYMins[i] = lineYMin;
+			lineYMaxs[i] = lineYMax;
 			maxLineWidth = Math.max(maxLineWidth, lineWidth);
 		}
 
 		// transform styles in array
 		let stylesArray = Object.keys(textStyles).map((key) => textStyles[key]);
 
-		let maxStrokeThickness = stylesArray.reduce((prev, curr) => Math.max(prev, curr.strokeThickness || 0), 0);
+		let maxStrokeThickness = stylesArray.reduce((prev, cur) => Math.max(prev, cur.strokeThickness || 0), 0);
 
 		let dropShadowPadding = this.getDropShadowPadding();
 
-		let maxLineHeight = lineHeights.reduce((prev, curr) => Math.max(prev, curr), 0);
+		let totalHeight = lineYMaxs.reduce((prev, cur) => prev + cur, 0) - lineYMins.reduce((prev, cur) => prev + cur, 0);
 
 		// define the right width and height
 		let width = maxLineWidth + maxStrokeThickness + 2 * dropShadowPadding;
-		let height = (maxLineHeight * lines.length) + 2 * dropShadowPadding;
+		let height = totalHeight + 2 * dropShadowPadding;
 
 		this.canvas.width = (width + this.context.lineWidth) * this.resolution;
 		this.canvas.height = height * this.resolution;
@@ -304,16 +362,33 @@ export default class MultiStyleText extends PIXI.Text {
 			}
 
 			for (let j = 0; j < line.length; j++) {
-				let { style, text, fontProperties } = line[j];
+				let { style, text, fontProperties, width, height, tagName } = line[j];
 
 				linePositionX += maxStrokeThickness / 2;
 
 				let linePositionY = maxStrokeThickness / 2 + basePositionY + fontProperties.ascent;
 
-				if (style.valign === "bottom") {
-					linePositionY += lineHeights[i] - line[j].height - (maxStrokeThickness - style.strokeThickness) / 2;
-				} else if (style.valign === "middle") {
-					linePositionY += (lineHeights[i] - line[j].height) / 2 - (maxStrokeThickness - style.strokeThickness) / 2;
+				switch (style.valign) {
+					case "top":
+						// no need to do anything
+						break;
+
+					case "baseline":
+						linePositionY += lineYMaxs[i] - fontProperties.ascent;
+						break;
+
+					case "middle":
+						linePositionY += (lineYMaxs[i] - lineYMins[i] - fontProperties.ascent - fontProperties.descent) / 2;
+						break;
+
+					case "bottom":
+						linePositionY += lineYMaxs[i] - lineYMins[i] - fontProperties.ascent - fontProperties.descent;
+						break;
+
+					default:
+						// A number - offset from baseline, positive is higher
+						linePositionY += lineYMaxs[i] - fontProperties.ascent - style.valign;
+						break;
 				}
 
 				if (style.letterSpacing === 0) {
@@ -321,7 +396,11 @@ export default class MultiStyleText extends PIXI.Text {
 						text,
 						style,
 						x: linePositionX,
-						y: linePositionY
+						y: linePositionY,
+						width,
+						ascent: fontProperties.ascent,
+						descent: fontProperties.descent,
+						tagName
 					});
 
 					linePositionX += line[j].width;
@@ -337,7 +416,11 @@ export default class MultiStyleText extends PIXI.Text {
 							text: text.charAt(k),
 							style,
 							x: linePositionX,
-							y: linePositionY
+							y: linePositionY,
+							width,
+							ascent: fontProperties.ascent,
+							descent: fontProperties.descent,
+							tagName
 						});
 
 						linePositionX += this.context.measureText(text.charAt(k)).width;
@@ -351,7 +434,7 @@ export default class MultiStyleText extends PIXI.Text {
 				linePositionX -= maxStrokeThickness / 2;
 			}
 
-			basePositionY += lineHeights[i];
+			basePositionY += lineYMaxs[i] - lineYMins[i];
 		}
 
 		this.context.save();
@@ -379,7 +462,7 @@ export default class MultiStyleText extends PIXI.Text {
 		this.context.restore();
 
 		// Second pass: draw strokes and fills
-		drawingData.forEach(({ style, text, x, y }) => {
+		drawingData.forEach(({ style, text, x, y, width, ascent, descent, tagName }) => {
 			this.context.font = this.getFontString(style);
 
 			let strokeStyle = style.stroke;
@@ -412,8 +495,82 @@ export default class MultiStyleText extends PIXI.Text {
 			if (style.fill) {
 				this.context.fillText(text, x, y);
 			}
+
+			let debugSpan = style.debug === undefined
+				? MultiStyleText.debugOptions.spans.enabled
+				: style.debug;
+
+			if (debugSpan) {
+				this.context.lineWidth = 1;
+
+				if (MultiStyleText.debugOptions.spans.bounding) {
+					this.context.fillStyle = MultiStyleText.debugOptions.spans.bounding;
+					this.context.strokeStyle = MultiStyleText.debugOptions.spans.bounding;
+					this.context.beginPath();
+					this.context.rect(x, y - ascent, width, ascent + descent);
+					this.context.fill();
+					this.context.stroke();
+					this.context.stroke(); // yes, twice
+				}
+
+				if (MultiStyleText.debugOptions.spans.baseline) {
+					this.context.strokeStyle = MultiStyleText.debugOptions.spans.baseline;
+					this.context.beginPath();
+					this.context.moveTo(x, y);
+					this.context.lineTo(x + width, y);
+					this.context.closePath();
+					this.context.stroke();
+				}
+
+				if (MultiStyleText.debugOptions.spans.top) {
+					this.context.strokeStyle = MultiStyleText.debugOptions.spans.top;
+					this.context.beginPath();
+					this.context.moveTo(x, y - ascent);
+					this.context.lineTo(x + width, y - ascent);
+					this.context.closePath();
+					this.context.stroke();
+				}
+
+				if (MultiStyleText.debugOptions.spans.bottom) {
+					this.context.strokeStyle = MultiStyleText.debugOptions.spans.bottom;
+					this.context.beginPath();
+					this.context.moveTo(x, y + descent);
+					this.context.lineTo(x + width, y + descent);
+					this.context.closePath();
+					this.context.stroke();
+				}
+
+				if (MultiStyleText.debugOptions.spans.text) {
+					this.context.fillStyle = "#ffffff";
+					this.context.strokeStyle = "#000000";
+					this.context.lineWidth = 2;
+					this.context.font = "8px monospace";
+					this.context.strokeText(tagName, x, y - ascent + 8);
+					this.context.fillText(tagName, x, y - ascent + 8);
+					this.context.strokeText(`${width.toFixed(2)}x${(ascent + descent).toFixed(2)}`, x, y - ascent + 16);
+					this.context.fillText(`${width.toFixed(2)}x${(ascent + descent).toFixed(2)}`, x, y - ascent + 16);
+				}
+			}
 		});
 
+		if (MultiStyleText.debugOptions.objects.enabled) {
+			if (MultiStyleText.debugOptions.objects.bounding) {
+				this.context.fillStyle = MultiStyleText.debugOptions.objects.bounding;
+				this.context.beginPath();
+				this.context.rect(0, 0, width, height);
+				this.context.fill();
+			}
+
+			if (MultiStyleText.debugOptions.objects.text) {
+				this.context.fillStyle = "#ffffff";
+				this.context.strokeStyle = "#000000";
+				this.context.lineWidth = 2;
+				this.context.font = "8px monospace";
+				this.context.strokeText(`${width.toFixed(2)}x${height.toFixed(2)}`, 0, 8, width);
+				this.context.fillText(`${width.toFixed(2)}x${height.toFixed(2)}`, 0, 8, width);
+			}
+		}
+
 		this.updateTexture();
 	}