js-draw 0.6.0 → 0.7.0

package/src/components/Text.ts

@@ -1,6 +1,7 @@
 import LineSegment2 from '../math/LineSegment2';
 import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
+import { Vec2 } from '../math/Vec2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
@@ -15,16 +16,23 @@ export interface TextStyle {
 }
 
 const componentTypeId = 'text';
-export default class Text extends AbstractComponent {
+export default class TextComponent extends AbstractComponent {
 	protected contentBBox: Rect2;
 
 	public constructor(
-		protected readonly textObjects: Array<string|Text>,
+		protected readonly textObjects: Array<string|TextComponent>,
 		private transform: Mat33,
-		private readonly style: TextStyle,
+		private style: TextStyle,
 	) {
 		super(componentTypeId);
 		this.recomputeBBox();
+
+		// If this has no direct children, choose a style representative of this' content
+		// (useful for estimating the style of the TextComponent).
+		const hasDirectContent = textObjects.some(obj => typeof obj === 'string');
+		if (!hasDirectContent && textObjects.length > 0) {
+			this.style = (textObjects[0] as TextComponent).getTextStyle();
+		}
 	}
 
 	public static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle) {
@@ -55,13 +63,13 @@ export default class Text extends AbstractComponent {
 
 	// Returns the bounding box of `text`. This is approximate if no Canvas is available.
 	private static getTextDimens(text: string, style: TextStyle): Rect2 {
-		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d') ?? null;
-		if (!Text.textMeasuringCtx) {
+		TextComponent.textMeasuringCtx ??= document.createElement('canvas').getContext('2d') ?? null;
+		if (!TextComponent.textMeasuringCtx) {
 			return this.estimateTextDimens(text, style);
 		}
 
-		const ctx = Text.textMeasuringCtx;
-		Text.applyTextStyles(ctx, style);
+		const ctx = TextComponent.textMeasuringCtx;
+		TextComponent.applyTextStyles(ctx, style);
 
 		const measure = ctx.measureText(text);
 
@@ -71,9 +79,9 @@ export default class Text extends AbstractComponent {
 		return new Rect2(0, textY, measure.width, textHeight);
 	}
 
-	private computeBBoxOfPart(part: string|Text) {
+	private computeBBoxOfPart(part: string|TextComponent) {
 		if (typeof part === 'string') {
-			const textBBox = Text.getTextDimens(part, this.style);
+			const textBBox = TextComponent.getTextDimens(part, this.style);
 			return textBBox.transformedBoundingBox(this.transform);
 		} else {
 			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
@@ -93,19 +101,23 @@ export default class Text extends AbstractComponent {
 		this.contentBBox = bbox ?? Rect2.empty;
 	}
 
-	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+	private renderInternal(canvas: AbstractRenderer) {
 		const cursor = this.transform;
 
-		canvas.startObject(this.contentBBox);
 		for (const textObject of this.textObjects) {
 			if (typeof textObject === 'string') {
 				canvas.drawText(textObject, cursor, this.style);
 			} else {
 				canvas.pushTransform(cursor);
-				textObject.render(canvas);
+				textObject.renderInternal(canvas);
 				canvas.popTransform();
 			}
 		}
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.startObject(this.contentBBox);
+		this.renderInternal(canvas);
 		canvas.endObject(this.getLoadSaveData());
 	}
 
@@ -119,7 +131,7 @@ export default class Text extends AbstractComponent {
 
 		for (const subObject of this.textObjects) {
 			if (typeof subObject === 'string') {
-				const textBBox = Text.getTextDimens(subObject, this.style);
+				const textBBox = TextComponent.getTextDimens(subObject, this.style);
 
 				// TODO: Use a better intersection check. Perhaps draw the text onto a CanvasElement and
 				// use pixel-testing to check for intersection with its contour.
@@ -136,13 +148,25 @@ export default class Text extends AbstractComponent {
 		return false;
 	}
 
+	public getBaselinePos() {
+		return this.transform.transformVec2(Vec2.zero);
+	}
+
+	public getTextStyle() {
+		return this.style;
+	}
+
+	public getTransform(): Mat33 {
+		return this.transform;
+	}
+
 	protected applyTransformation(affineTransfm: Mat33): void {
 		this.transform = affineTransfm.rightMul(this.transform);
 		this.recomputeBBox();
 	}
 
 	protected createClone(): AbstractComponent {
-		return new Text(this.textObjects, this.transform, this.style);
+		return new TextComponent(this.textObjects, this.transform, this.style);
 	}
 
 	public getText() {
@@ -188,7 +212,7 @@ export default class Text extends AbstractComponent {
 		};
 	}
 
-	public static deserializeFromString(json: any): Text {
+	public static deserializeFromString(json: any): TextComponent {
 		const style: TextStyle = {
 			renderingStyle: styleFromJSON(json.style.renderingStyle),
 			size: json.style.size,
@@ -197,12 +221,12 @@ export default class Text extends AbstractComponent {
 			fontFamily: json.style.fontFamily,
 		};
 
-		const textObjects: Array<string|Text> = json.textObjects.map((data: any) => {
+		const textObjects: Array<string|TextComponent> = json.textObjects.map((data: any) => {
 			if ((data.text ?? null) !== null) {
 				return data.text;
 			}
 
-			return Text.deserializeFromString(data.json);
+			return TextComponent.deserializeFromString(data.json);
 		});
 
 		json.transform = json.transform.filter((elem: any) => typeof elem === 'number');
@@ -213,8 +237,27 @@ export default class Text extends AbstractComponent {
 		const transformData = json.transform as Mat33Array;
 		const transform = new Mat33(...transformData);
 
-		return new Text(textObjects, transform, style);
+		return new TextComponent(textObjects, transform, style);
+	}
+
+	public static fromLines(lines: string[], transform: Mat33, style: TextStyle): AbstractComponent {
+		let lastComponent: TextComponent|null = null;
+		const components: TextComponent[] = [];
+
+		for (const line of lines) {
+			let position = Vec2.zero;
+			if (lastComponent) {
+				const lineMargin = Math.floor(style.size);
+				position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
+			}
+
+			const component = new TextComponent([ line ], Mat33.translation(position), style);
+			components.push(component);
+			lastComponent = component;
+		}
+
+		return new TextComponent(components, transform, style);
 	}
 }
 
-AbstractComponent.registerComponent(componentTypeId, (data: string) => Text.deserializeFromString(data));
+AbstractComponent.registerComponent(componentTypeId, (data: string) => TextComponent.deserializeFromString(data));

package/src/components/builders/FreehandLineBuilder.ts

@@ -11,21 +11,24 @@ import { ComponentBuilder, ComponentBuilderFactory } from './types';
 import RenderingStyle from '../../rendering/RenderingStyle';
 
 export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
-	// Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
+	// Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
 	// less than ±1 px from the curve.
-	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
+	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
 	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
 
 	return new FreehandLineBuilder(
-		initialPoint, minSmoothingDist, maxSmoothingDist
+		initialPoint, minSmoothingDist, maxSmoothingDist, viewport
 	);
 };
 
 type CurrentSegmentToPathResult = {
-	upperCurve: QuadraticBezierPathCommand,
+	upperCurveCommand: QuadraticBezierPathCommand,
 	lowerToUpperConnector: PathCommand,
 	upperToLowerConnector: PathCommand,
-	lowerCurve: QuadraticBezierPathCommand,
+	lowerCurveCommand: QuadraticBezierPathCommand,
+
+	upperCurve: Bezier,
+	lowerCurve: Bezier,
 };
 
 // Handles stroke smoothing and creates Strokes from user/stylus input.
@@ -47,8 +50,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	// least recent edge.
 	// The lowerSegments form a path that goes from the least recent edge to the most
 	// recent edge.
-	private upperSegments: QuadraticBezierPathCommand[];
-	private lowerSegments: QuadraticBezierPathCommand[];
+	private upperSegments: PathCommand[];
+	private lowerSegments: PathCommand[];
+	private lastUpperBezier: Bezier|null = null;
+	private lastLowerBezier: Bezier|null = null;
+	private parts: RenderablePathSpec[] = [];
 
 	private buffer: Point2[];
 	private lastPoint: StrokeDataPoint;
@@ -69,7 +75,9 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// Note that the maximum will be smaller if the stroke width is less than
 		// [maxFitAllowed].
 		private minFitAllowed: number,
-		private maxFitAllowed: number
+		private maxFitAllowed: number,
+
+		private viewport: Viewport,
 	) {
 		this.lastPoint = this.startPoint;
 		this.upperSegments = [];
@@ -93,15 +101,19 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 	}
 
-	private previewPath(): RenderablePathSpec|null {
-		let upperPath: QuadraticBezierPathCommand[];
-		let lowerPath: QuadraticBezierPathCommand[];
+	private previewCurrentPath(): RenderablePathSpec|null {
+		const upperPath = this.upperSegments.slice();
+		const lowerPath = this.lowerSegments.slice();
 		let lowerToUpperCap: PathCommand;
 		let pathStartConnector: PathCommand;
 		if (this.currentCurve) {
-			const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
-			upperPath = this.upperSegments.concat(upperCurve);
-			lowerPath = this.lowerSegments.concat(lowerCurve);
+			const {
+				upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand
+			} = this.currentSegmentToPath();
+
+			upperPath.push(upperCurveCommand);
+			lowerPath.push(lowerCurveCommand);
+
 			lowerToUpperCap = lowerToUpperConnector;
 			pathStartConnector = this.pathStartConnector ?? upperToLowerConnector;
 		} else {
@@ -109,13 +121,17 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return null;
 			}
 
-			upperPath = this.upperSegments.slice();
-			lowerPath = this.lowerSegments.slice();
 			lowerToUpperCap = this.mostRecentConnector;
 			pathStartConnector = this.pathStartConnector;
 		}
-		const startPoint = lowerPath[lowerPath.length - 1].endPoint;
 
+		let startPoint: Point2;
+		const lastLowerSegment = lowerPath[lowerPath.length - 1];
+		if (lastLowerSegment.kind === PathCommandType.LineTo || lastLowerSegment.kind === PathCommandType.MoveTo) {
+			startPoint = lastLowerSegment.point;
+		} else {
+			startPoint = lastLowerSegment.endPoint;
+		}
 
 		return {
 			// Start at the end of the lower curve:
@@ -156,24 +172,37 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 	}
 
+	private previewFullPath(): RenderablePathSpec[]|null {
+		const preview = this.previewCurrentPath();
+		if (preview) {
+			return [ ...this.parts, preview ];
+		}
+		return null;
+	}
+
 	private previewStroke(): Stroke|null {
-		const pathPreview = this.previewPath();
+		const pathPreview = this.previewFullPath();
 
 		if (pathPreview) {
-			return new Stroke([ pathPreview ]);
+			return new Stroke(pathPreview);
 		}
 		return null;
 	}
 
 	public preview(renderer: AbstractRenderer) {
-		const path = this.previewPath();
-		if (path) {
-			renderer.drawPath(path);
+		const paths = this.previewFullPath();
+		if (paths) {
+			const approxBBox = this.viewport.visibleRect;
+			renderer.startObject(approxBBox);
+			for (const path of paths) {
+				renderer.drawPath(path);
+			}
+			renderer.endObject();
 		}
 	}
 
 	public build(): Stroke {
-		if (this.lastPoint && (this.lowerSegments.length === 0 || this.approxCurrentCurveLength() > this.curveStartWidth * 2)) {
+		if (this.lastPoint) {
 			this.finalizeCurrentCurve();
 		}
 		return this.previewStroke()!;
@@ -189,6 +218,74 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		return Viewport.roundPoint(point, minFit);
 	}
 
+	// Returns true if, due to overlap with previous segments, a new RenderablePathSpec should be created.
+	private shouldStartNewSegment(lowerCurve: Bezier, upperCurve: Bezier): boolean {
+		if (!this.lastLowerBezier || !this.lastUpperBezier) {
+			return false;
+		}
+
+		const getIntersection = (curve1: Bezier, curve2: Bezier): Point2|null => {
+			const intersection = curve1.intersects(curve2) as (string[] | null | undefined);
+			if (!intersection || intersection.length === 0) {
+				return null;
+			}
+
+			// From http://pomax.github.io/bezierjs/#intersect-curve,
+			// .intersects returns an array of 't1/t2' pairs, where curve1.at(t1) gives the point.
+			const firstTPair = intersection[0];
+			const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
+
+			if (!match) {
+				throw new Error(
+					`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`
+				);
+			}
+
+			const t = parseFloat(match[1]);
+			return Vec2.ofXY(curve1.get(t));
+		};
+
+		const getExitDirection = (curve: Bezier): Vec2 => {
+			return Vec2.ofXY(curve.points[2]).minus(Vec2.ofXY(curve.points[1])).normalized();
+		};
+
+		const getEnterDirection = (curve: Bezier): Vec2 => {
+			return Vec2.ofXY(curve.points[1]).minus(Vec2.ofXY(curve.points[0])).normalized();
+		};
+
+		// Prevent
+		//         /
+		//       / /
+		//      /  /  /| 
+		//    /    /   |
+		//  /          |
+		// where the next stroke and the previous stroke are in different directions.
+		//
+		// Are the exit/enter directions of the previous and current curves in different enough directions?
+		if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.3
+			|| getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.3
+
+			// Also handle if the curves exit/enter directions differ
+			|| getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
+			|| getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
+			return true;
+		}
+
+		// Check whether the lower curve intersects the other wall:
+		//       /    / ← lower
+		//    / /   /
+		// /   / /
+		//   //
+		// / /
+		const lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
+		const upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
+		if (lowerIntersection || upperIntersection) {
+			return true;
+		}
+
+		return false;
+	}
+
 	// Returns the distance between the start, control, and end points of the curve.
 	private approxCurrentCurveLength() {
 		if (!this.currentCurve) {
@@ -257,9 +354,23 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			return;
 		}
 
-		const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+		const {
+			upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand,
+			lowerCurve, upperCurve,
+		} = this.currentSegmentToPath();
 
-		if (this.isFirstSegment) {
+		const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
+		if (shouldStartNew) {
+			const part = this.previewCurrentPath();
+
+			if (part) {
+				this.parts.push(part);
+				this.upperSegments = [];
+				this.lowerSegments = [];
+			}
+		}
+
+		if (this.isFirstSegment || shouldStartNew) {
 			// We draw the upper path (reversed), then the lower path, so we need the
 			// upperToLowerConnector to join the two paths.
 			this.pathStartConnector = upperToLowerConnector;
@@ -269,8 +380,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// upperPath:
 		this.mostRecentConnector = lowerToUpperConnector;
 
-		this.upperSegments.push(upperCurve);
-		this.lowerSegments.push(lowerCurve);
+		this.lowerSegments.push(lowerCurveCommand);
+		this.upperSegments.push(upperCurveCommand);
+
+		this.lastLowerBezier = lowerCurve;
+		this.lastUpperBezier = upperCurve;
 
 		const lastPoint = this.buffer[this.buffer.length - 1];
 		this.lastExitingVec = Vec2.ofXY(
@@ -325,12 +439,14 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			);
 
 		// Each starts at startPt ± startVec
+		const lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
 		const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
 		const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
 		const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
 		const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
+		const upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
 
-		const lowerCurve: QuadraticBezierPathCommand = {
+		const lowerCurveCommand: QuadraticBezierPathCommand = {
 			kind: PathCommandType.QuadraticBezierTo,
 			controlPoint: lowerCurveControlPoint,
 			endPoint: lowerCurveEndPoint,
@@ -339,7 +455,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// From the end of the upperCurve to the start of the lowerCurve:
 		const upperToLowerConnector: LinePathCommand = {
 			kind: PathCommandType.LineTo,
-			point: this.roundPoint(startPt.plus(startVec)),
+			point: lowerCurveStartPoint,
 		};
 
 		// From the end of lowerCurve to the start of upperCurve:
@@ -348,13 +464,19 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			point: upperCurveStartPoint,
 		};
 
-		const upperCurve: QuadraticBezierPathCommand = {
+		const upperCurveCommand: QuadraticBezierPathCommand = {
 			kind: PathCommandType.QuadraticBezierTo,
 			controlPoint: upperCurveControlPoint,
-			endPoint: this.roundPoint(startPt.minus(startVec)),
+			endPoint: upperCurveEndPoint,
 		};
 
-		return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
+		const upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+		const lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+
+		return {
+			upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
+			upperCurve, lowerCurve,
+		};
 	}
 
 	// Compute the direction of the velocity at the end of this.buffer
@@ -397,6 +519,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		const prevEndWidth = this.curveEndWidth;
 		this.curveEndWidth = pointRadius;
 
+		if (this.isFirstSegment) {
+			// The start of a curve often lacks accurate pressure information. Update it.
+			this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+		}
+
 		// recompute bbox
 		this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
 
@@ -413,6 +540,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
 		}
 
+		// If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
 		let enteringVec = this.lastExitingVec;
 		if (!enteringVec) {
 			let sampleIdx = Math.ceil(this.buffer.length / 2);

package/src/components/lib.ts

@@ -4,14 +4,14 @@ export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import Text from './Text';
+import TextComponent from './Text';
 import ImageComponent from './ImageComponent';
 
 export {
 	Stroke,
-	Text,
+	TextComponent as Text,
 
-	Text as TextComponent,
+	TextComponent as TextComponent,
 	Stroke as StrokeComponent,
 	ImageComponent,
 };

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,5 +1,5 @@
 import Color4 from '../../Color4';
-import Text, { TextStyle } from '../../components/Text';
+import TextComponent, { TextStyle } from '../../components/Text';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
@@ -153,7 +153,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		this.ctx.save();
 		transform = this.getCanvasToScreenTransform().rightMul(transform);
 		this.transformBy(transform);
-		Text.applyTextStyles(this.ctx, style);
+		TextComponent.applyTextStyles(this.ctx, style);
 
 		if (style.renderingStyle.fill.a !== 0) {
 			this.ctx.fillStyle = style.renderingStyle.fill.toHexString();

package/src/rendering/renderers/SVGRenderer.ts

@@ -100,39 +100,64 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	// Apply [elemTransform] to [elem].
-	private transformFrom(elemTransform: Mat33, elem: SVGElement) {
-		let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
+	private transformFrom(elemTransform: Mat33, elem: SVGElement, inCanvasSpace: boolean = false) {
+		let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
 		const translation = transform.transformVec2(Vec2.zero);
 		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
 
-		elem.style.transform = `matrix(
-			${transform.a1}, ${transform.b1},
-			${transform.a2}, ${transform.b2},
-			${transform.a3}, ${transform.b3}
-		)`;
+		if (!transform.eq(Mat33.identity)) {
+			elem.style.transform = `matrix(
+				${transform.a1}, ${transform.b1},
+				${transform.a2}, ${transform.b2},
+				${transform.a3}, ${transform.b3}
+			)`;
+		} else {
+			elem.style.transform = '';
+		}
+
 		elem.setAttribute('x', `${toRoundedString(translation.x)}`);
 		elem.setAttribute('y', `${toRoundedString(translation.y)}`);
 	}
 
+	private textContainer: SVGTextElement|null = null;
+	private textContainerTransform: Mat33|null = null;
 	public drawText(text: string, transform: Mat33, style: TextStyle): void {
-		const textElem = document.createElementNS(svgNameSpace, 'text');
-		textElem.appendChild(document.createTextNode(text));
-		this.transformFrom(transform, textElem);
-
-		textElem.style.fontFamily = style.fontFamily;
-		textElem.style.fontVariant = style.fontVariant ?? '';
-		textElem.style.fontWeight = style.fontWeight ?? '';
-		textElem.style.fontSize = style.size + 'px';
-		textElem.style.fill = style.renderingStyle.fill.toHexString();
-
-		if (style.renderingStyle.stroke) {
-			const strokeStyle = style.renderingStyle.stroke;
-			textElem.style.stroke = strokeStyle.color.toHexString();
-			textElem.style.strokeWidth = strokeStyle.width + 'px';
-		}
+		const applyTextStyles = (elem: SVGTextElement|SVGTSpanElement, style: TextStyle) => {
+			elem.style.fontFamily = style.fontFamily;
+			elem.style.fontVariant = style.fontVariant ?? '';
+			elem.style.fontWeight = style.fontWeight ?? '';
+			elem.style.fontSize = style.size + 'px';
+			elem.style.fill = style.renderingStyle.fill.toHexString();
+
+			if (style.renderingStyle.stroke) {
+				const strokeStyle = style.renderingStyle.stroke;
+				elem.style.stroke = strokeStyle.color.toHexString();
+				elem.style.strokeWidth = strokeStyle.width + 'px';
+			}
+		};
+		transform = this.getCanvasToScreenTransform().rightMul(transform);
+
+		if (!this.textContainer) {
+			const container = document.createElementNS(svgNameSpace, 'text');
+			container.appendChild(document.createTextNode(text));
+			this.transformFrom(transform, container, true);
+			applyTextStyles(container, style);
+
+			this.elem.appendChild(container);
+			this.objectElems?.push(container);
+			if (this.objectLevel > 0) {
+				this.textContainer = container;
+				this.textContainerTransform = transform;
+			}
+		} else {
+			const elem = document.createElementNS(svgNameSpace, 'tspan');
+			elem.appendChild(document.createTextNode(text));
+			this.textContainer.appendChild(elem);
 
-		this.elem.appendChild(textElem);
-		this.objectElems?.push(textElem);
+			transform = this.textContainerTransform!.inverse().rightMul(transform);
+			this.transformFrom(transform, elem, true);
+			applyTextStyles(elem, style);
+		}
 	}
 
 	public drawImage(image: RenderableImage) {
@@ -153,6 +178,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		// Only accumulate a path within an object
 		this.lastPathString = [];
 		this.lastPathStyle = null;
+		this.textContainer = null;
 		this.objectElems = [];
 	}