js-draw 0.1.2 → 0.1.3

package/src/SVGLoader.ts

@@ -2,9 +2,12 @@ import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
+import Text, { TextStyle } from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
+import Mat33 from './geometry/Mat33';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
+import { Vec2 } from './geometry/Vec2';
 import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
@@ -15,10 +18,14 @@ export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 
 // Key to retrieve unrecognised attributes from an AbstractComponent
 export const svgAttributesDataKey = 'svgAttrs';
+export const svgStyleAttributesDataKey = 'svgStyleAttrs';
 
 // [key, value]
 export type SVGLoaderUnknownAttribute = [ string, string ];
 
+// [key, value, priority]
+export type SVGLoaderUnknownStyleAttribute = { key: string, value: string, priority?: string };
+
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
@@ -97,10 +104,11 @@ export default class SVGLoader implements ImageLoader {
 	private attachUnrecognisedAttrs(
 		elem: AbstractComponent,
 		node: SVGElement,
-		supportedAttrs: Set<string>
+		supportedAttrs: Set<string>,
+		supportedStyleAttrs?: Set<string>
 	) {
 		for (const attr of node.getAttributeNames()) {
-			if (supportedAttrs.has(attr)) {
+			if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
 				continue;
 			}
 
@@ -108,6 +116,27 @@ export default class SVGLoader implements ImageLoader {
 				[ attr, node.getAttribute(attr) ] as SVGLoaderUnknownAttribute,
 			);
 		}
+
+		if (supportedStyleAttrs) {
+			for (const attr of node.style) {
+				if (attr === '' || !attr) {
+					continue;
+				}
+
+				if (supportedStyleAttrs.has(attr)) {
+					continue;
+				}
+
+				// TODO: Do we need special logic for !important properties?
+				elem.attachLoadSaveData(svgStyleAttributesDataKey, 
+					{
+						key: attr,
+						value: node.style.getPropertyValue(attr),
+						priority: node.style.getPropertyPriority(attr)
+					} as SVGLoaderUnknownStyleAttribute
+				);
+			}
+		}
 	}
 
 	// Adds a stroke with a single path
@@ -115,9 +144,14 @@ export default class SVGLoader implements ImageLoader {
 		let elem: AbstractComponent;
 		try {
 			const strokeData = this.strokeDataFromElem(node);
+
 			elem = new Stroke(strokeData);
+
+			const supportedStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
 			this.attachUnrecognisedAttrs(
-				elem, node, new Set([ 'stroke', 'fill', 'stroke-width', 'd' ]),
+				elem, node,
+				new Set([ ...supportedStyleAttrs, 'd' ]),
+				new Set(supportedStyleAttrs)
 			);
 		} catch (e) {
 			console.error(
@@ -131,6 +165,80 @@ export default class SVGLoader implements ImageLoader {
 		this.onAddComponent?.(elem);
 	}
 
+	private makeText(elem: SVGTextElement|SVGTSpanElement): Text {
+		const contentList: Array<Text|string> = [];
+		for (const child of elem.childNodes) {
+			if (child.nodeType === Node.TEXT_NODE) {
+				contentList.push(child.nodeValue ?? '');
+			} else if (child.nodeType === Node.ELEMENT_NODE) {
+				const subElem = child as SVGElement;
+				if (subElem.tagName.toLowerCase() === 'tspan') {
+					contentList.push(this.makeText(subElem as SVGTSpanElement));
+				} else {
+					throw new Error(`Unrecognized text child element: ${subElem}`);
+				}
+			} else {
+				throw new Error(`Unrecognized text child node: ${child}.`);
+			}
+		}
+
+		// Compute styles.
+		const computedStyles = window.getComputedStyle(elem);
+		const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
+
+		const supportedStyleAttrs = [
+			'fontFamily',
+			'fill',
+			'transform'
+		];
+		let fontSize = 12;
+		if (fontSizeMatch) {
+			supportedStyleAttrs.push('fontSize');
+			fontSize = parseFloat(fontSizeMatch[1]);
+		}
+		const style: TextStyle = {
+			size: fontSize,
+			fontFamily: computedStyles.fontFamily || 'sans',
+			renderingStyle: {
+				fill: Color4.fromString(computedStyles.fill)
+			},
+		};
+
+		// Compute transform matrix
+		let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+		const supportedAttrs = [];
+		const elemX = elem.getAttribute('x');
+		const elemY = elem.getAttribute('y');
+		if (elemX && elemY) {
+			const x = parseFloat(elemX);
+			const y = parseFloat(elemY);
+			if (!isNaN(x) && !isNaN(y)) {
+				supportedAttrs.push('x', 'y');
+				transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+			}
+		}
+
+		const result = new Text(contentList, transform, style);
+		this.attachUnrecognisedAttrs(
+			result,
+			elem,
+			new Set(supportedAttrs),
+			new Set(supportedStyleAttrs)
+		);
+
+		return result;
+	}
+
+	private addText(elem: SVGTextElement|SVGTSpanElement) {
+		try {
+			const textElem = this.makeText(elem);
+			this.onAddComponent?.(textElem);
+		} catch (e) {
+			console.error('Invalid text object in node', elem, '. Adding as an unknown object. Error:', e);
+			this.addUnknownNode(elem);
+		}
+	}
+
 	private addUnknownNode(node: SVGElement) {
 		const component = new UnknownSVGObject(node);
 		this.onAddComponent?.(component);
@@ -142,13 +250,14 @@ export default class SVGLoader implements ImageLoader {
 			return;
 		}
 
-		const components = viewBoxAttr.split(/[ \t,]/);
+		const components = viewBoxAttr.split(/[ \t\n,]+/);
 		const x = parseFloat(components[0]);
 		const y = parseFloat(components[1]);
 		const width = parseFloat(components[2]);
 		const height = parseFloat(components[3]);
 
 		if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
+			console.warn(`node ${node} has an unparsable viewbox. Viewbox: ${viewBoxAttr}. Match: ${components}.`);
 			return;
 		}
 
@@ -162,6 +271,7 @@ export default class SVGLoader implements ImageLoader {
 
 	private async visit(node: Element) {
 		this.totalToProcess += node.childElementCount;
+		let visitChildren = true;
 
 		switch (node.tagName.toLowerCase()) {
 		case 'g':
@@ -170,6 +280,10 @@ export default class SVGLoader implements ImageLoader {
 		case 'path':
 			this.addPath(node as SVGPathElement);
 			break;
+		case 'text':
+			this.addText(node as SVGTextElement);
+			visitChildren = false;
+			break;
 		case 'svg':
 			this.updateViewBox(node as SVGSVGElement);
 			this.updateSVGAttrs(node as SVGSVGElement);
@@ -184,8 +298,10 @@ export default class SVGLoader implements ImageLoader {
 			return;
 		}
 
-		for (const child of node.children) {
-			await this.visit(child);
+		if (visitChildren) {
+			for (const child of node.children) {
+				await this.visit(child);
+			}
 		}
 
 		this.processedCount ++;
@@ -265,8 +381,10 @@ export default class SVGLoader implements ImageLoader {
 			'http://www.w3.org/2000/svg', 'svg'
 		);
 		svgElem.innerHTML = text;
+		sandboxDoc.body.appendChild(svgElem);
 
 		return new SVGLoader(svgElem, () => {
+			svgElem.remove();
 			sandbox.remove();
 		});
 	}

package/src/Viewport.ts

@@ -170,7 +170,7 @@ export class Viewport {
 	// Returns a Command that transforms the view such that [rect] is visible, and perhaps
 	// centered in the viewport.
 	// Returns null if no transformation is necessary
-	public zoomTo(toMakeVisible: Rect2): Command {
+	public zoomTo(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): Command {
 		let transform = Mat33.identity;
 
 		if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
@@ -195,7 +195,7 @@ export class Viewport {
 		// Ensure that toMakeVisible is at least 1/8th of the visible region.
 		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
 
-		if (largerThanTarget || muchSmallerThanTarget) {
+		if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
 			// If larger than the target, ensure that the longest axis is visible.
 			// If smaller, shrink the visible rectangle as much as possible
 			const multiplier = (largerThanTarget ? Math.max : Math.min)(

package/src/components/SVGGlobalAttributesObject.ts

@@ -20,7 +20,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 			return;
 		}
 
-		console.log('Rendering to SVG.', this.attrs);
 		for (const [ attr, value ] of this.attrs) {
 			canvas.setRootSVGAttribute(attr, value);
 		}

package/src/components/Text.ts

@@ -0,0 +1,136 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer, { RenderingStyle } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+export interface TextStyle {
+	size: number;
+	fontFamily: string;
+	fontWeight?: string;
+	fontVariant?: string;
+	renderingStyle: RenderingStyle;
+}
+
+
+export default class Text extends AbstractComponent {
+	protected contentBBox: Rect2;
+
+	public constructor(protected textObjects: Array<string|Text>, private transform: Mat33, private style: TextStyle) {
+		super();
+		this.recomputeBBox();
+	}
+
+	public static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle) {
+		ctx.font =	[
+			(style.size ?? 12) + 'px',
+			style.fontWeight ?? '',
+			`"${style.fontFamily.replace(/["]/g, '\\"')}"`,
+			style.fontWeight
+		].join(' ');
+		ctx.textAlign = 'left';
+	}
+
+	private static textMeasuringCtx: CanvasRenderingContext2D;
+	private static getTextDimens(text: string, style: TextStyle): Rect2 {
+		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d')!;
+		const ctx = Text.textMeasuringCtx;
+		Text.applyTextStyles(ctx, style);
+
+		const measure = ctx.measureText(text);
+
+		// Text is drawn with (0,0) at the bottom left of the baseline.
+		const textY = -measure.actualBoundingBoxAscent;
+		const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+		return new Rect2(0, textY, measure.width, textHeight);
+	}
+
+	private computeBBoxOfPart(part: string|Text) {
+		if (typeof part === 'string') {
+			const textBBox = Text.getTextDimens(part, this.style);
+			return textBBox.transformedBoundingBox(this.transform);
+		} else {
+			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
+			return bbox;
+		}
+	}
+
+	private recomputeBBox() {
+		let bbox: Rect2|null = null;
+
+		for (const textObject of this.textObjects) {
+			const currentBBox = this.computeBBoxOfPart(textObject);
+			bbox ??= currentBBox;
+			bbox = bbox.union(currentBBox);
+		}
+
+		this.contentBBox = bbox ?? Rect2.empty;
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		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);
+				canvas.popTransform();
+			}
+		}
+		canvas.endObject(this.getLoadSaveData());
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+
+		// Convert canvas space to internal space.
+		const invTransform = this.transform.inverse();
+		const p1InThisSpace = invTransform.transformVec2(lineSegment.p1);
+		const p2InThisSpace = invTransform.transformVec2(lineSegment.p2);
+		lineSegment = new LineSegment2(p1InThisSpace, p2InThisSpace);
+
+		for (const subObject of this.textObjects) {
+			if (typeof subObject === 'string') {
+				const textBBox = Text.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.
+				if (textBBox.getEdges().some(edge => lineSegment.intersection(edge) !== null)) {
+					return true;
+				}
+			} else {
+				if (subObject.intersects(lineSegment)) {
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
+
+	protected applyTransformation(affineTransfm: Mat33): void {
+		this.transform = affineTransfm.rightMul(this.transform);
+		this.recomputeBBox();
+	}
+
+	private getText() {
+		const result: string[] = [];
+
+		for (const textObject of this.textObjects) {
+			if (typeof textObject === 'string') {
+				result.push(textObject);
+			} else {
+				result.push(textObject.getText());
+			}
+		}
+
+		return result.join(' ');
+	}
+
+	public description(localizationTable: ImageComponentLocalization): string {
+		return localizationTable.text(this.getText());
+	}
+}

package/src/components/localization.ts

@@ -1,4 +1,5 @@
 export interface ImageComponentLocalization {
+	text: (text: string)=> string;
 	stroke: string;
     svgObject: string;
 }
@@ -6,4 +7,5 @@ export interface ImageComponentLocalization {
 export const defaultComponentLocalization: ImageComponentLocalization = {
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
+	text: (text) => `Text object: ${text}`,
 };

package/src/geometry/Mat33.test.ts

@@ -141,4 +141,48 @@ describe('Mat33 tests', () => {
 			fullTransformInverse.transformVec2(fullTransform.transformVec2(Vec2.unitX))
 		).objEq(Vec2.unitX, fuzz);
 	});
+
+	it('should convert CSS matrix(...) strings to matricies', () => {
+		// From MDN:
+		// 		⎡ a c e ⎤
+		// 		⎢ b d f ⎥  =  matrix(a,b,c,d,e,f)
+		// 		⎣ 0 0 1 ⎦
+		const identity = Mat33.fromCSSMatrix('matrix(1, 0, 0, 1, 0, 0)');
+		expect(identity).objEq(Mat33.identity);
+		expect(Mat33.fromCSSMatrix('matrix(1, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1e2, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1e2, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6, 2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2, 3.E-2, 4, -5.123, -6.5)')).objEq(new Mat33(
+			-1, 0.03, -5.123,
+			2, 4, -6.5,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,\n\t2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,2, .3E-2, 4, 5, 6)')).objEq(new Mat33(
+			1.6, 3e-3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2e6,	3E-2,-5.123, -6.5e-1, 0.01)')).objEq(new Mat33(
+			-1, 	3E-2,  	-6.5e-1,
+			2e6,	-5.123,	0.01,
+			0,  	0,     	1,
+		));
+	});
 });

package/src/geometry/Mat33.ts

@@ -268,4 +268,45 @@ export default class Mat33 {
 		// Translate such that [center] goes to (0, 0)
 		return result.rightMul(Mat33.translation(center.times(-1)));
 	}
+
+	// Converts a CSS-form matrix(a, b, c, d, e, f) to a Mat33.
+	public static fromCSSMatrix(cssString: string): Mat33 {
+		if (cssString === '' || cssString === 'none') {
+			return Mat33.identity;
+		}
+
+		const numberExp = '([-]?\\d*(?:\\.\\d*)?(?:[eE][-]?\\d+)?)';
+		const numberSepExp = '[, \\t\\n]';
+		const regExpSource = `^\\s*matrix\\s*\\(${
+			[
+				// According to MDN, matrix(a,b,c,d,e,f) has form:
+				// 		⎡ a c e ⎤
+				// 		⎢ b d f ⎥
+				// 		⎣ 0 0 1 ⎦
+				numberExp, numberExp, numberExp, // a, c, e
+				numberExp, numberExp, numberExp, // b, d, f
+			].join(`${numberSepExp}+`)
+		}${numberSepExp}*\\)\\s*$`;
+		const matrixExp = new RegExp(regExpSource, 'i');
+		const match = matrixExp.exec(cssString);
+
+		if (!match) {
+			throw new Error(`Unsupported transformation: ${cssString}`);
+		}
+
+		const matrixData = match.slice(1).map(entry => parseFloat(entry));
+		const a = matrixData[0];
+		const b = matrixData[1];
+		const c = matrixData[2];
+		const d = matrixData[3];
+		const e = matrixData[4];
+		const f = matrixData[5];
+
+		const transform = new Mat33(
+			a, c, e,
+			b, d, f,
+			0, 0, 1
+		);
+		return transform;
+	}
 }

package/src/geometry/Path.toString.test.ts

@@ -19,14 +19,18 @@ describe('Path.toString', () => {
 	});
 
 	it('should fix rounding errors', () => {
-		const path = new Path(Vec2.of(0.10000001, 0.19999999), [
+		const path = new Path(Vec2.of(0.100000001, 0.199999999), [
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(9999, -10.999999995),
-				endPoint: Vec2.of(0.000300001, 1.40000002),
+				endPoint: Vec2.of(0.000300001, 1.400000002),
 			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(184.00482359999998, 1)
+			}
 		]);
-		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4');
+		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4L184.0048236,1');
 	});
 
 	it('should not remove trailing zeroes before decimal points', () => {

package/src/geometry/Path.ts

@@ -303,6 +303,8 @@ export default class Path {
 				const postDecimal = parseInt(roundingDownMatch[3], 10);
 				const preDecimal = parseInt(roundingDownMatch[2], 10);
 
+				const origPostDecimalString = roundingDownMatch[3];
+
 				let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
 				let carry = 0;
 				if (newPostDecimal.length > postDecimal.toString().length) {
@@ -310,13 +312,21 @@ export default class Path {
 					newPostDecimal = newPostDecimal.substring(1);
 					carry = 1;
 				}
+
+				// parseInt(...).toString() removes leading zeroes. Add them back.
+				while (newPostDecimal.length < origPostDecimalString.length) {
+					newPostDecimal = carry.toString(10) + newPostDecimal;
+					carry = 0;
+				}
+
 				text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
 			}
 
 			text = text.replace(fixRoundingUpExp, '$1');
 
 			// Remove trailing zeroes
-			text = text.replace(/([.][^0]*)0+$/, '$1');
+			text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+			text = text.replace(/[.]0+$/, '.');
 
 			// Remove trailing period
 			return text.replace(/[.]$/, '');

package/src/geometry/Rect2.ts

@@ -184,6 +184,14 @@ export default class Rect2 {
 		return this.topLeft.plus(Vec2.of(0, this.h));
 	}
 
+	public get width() {
+		return this.w;
+	}
+
+	public get height() {
+		return this.h;
+	}
+
 	// Returns edges in the order
 	// [ rightEdge, topEdge, leftEdge, bottomEdge ]
 	public getEdges(): LineSegment2[] {

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,5 +1,6 @@
 import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -29,6 +30,7 @@ const stylesEqual = (a: RenderingStyle, b: RenderingStyle) => {
 export default abstract class AbstractRenderer {
 	// If null, this' transformation is linked to the Viewport
 	private selfTransform: Mat33|null = null;
+	private transformStack: Array<Mat33|null> = [];
 
 	protected constructor(private viewport: Viewport) { }
 
@@ -51,6 +53,7 @@ export default abstract class AbstractRenderer {
 	protected abstract traceQuadraticBezierCurve(
 		controlPoint: Point2, endPoint: Point2,
 	): void;
+	public abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
 
 	// Returns true iff the given rectangle is so small, rendering anything within
 	// it has no effect on the image.
@@ -166,6 +169,19 @@ export default abstract class AbstractRenderer {
 		this.selfTransform = transform;
 	}
 
+	public pushTransform(transform: Mat33) {
+		this.transformStack.push(this.selfTransform);
+		this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+	}
+
+	public popTransform() {
+		if (this.transformStack.length === 0) {
+			throw new Error('Unable to pop more transforms than have been pushed!');
+		}
+
+		this.setTransform(this.transformStack.pop() ?? null);
+	}
+
 	// Get the matrix that transforms a vector on the canvas to a vector on this'
 	// rendering target.
 	public getCanvasToScreenTransform(): Mat33 {

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import Text, { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -26,16 +27,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		this.setDraftMode(false);
 	}
 
-	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
-		return other instanceof CanvasRenderer;
-	}
-
-	public renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void {
-		if (!(other instanceof CanvasRenderer)) {
-			throw new Error(`${other} cannot be rendered onto ${this}`);
-		}
-		transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
-		this.ctx.save();
+	private transformBy(transformBy: Mat33) {
 		// From MDN, transform(a,b,c,d,e,f)
 		// takes input such that
 		// ⎡ a c e ⎤
@@ -46,6 +38,19 @@ export default class CanvasRenderer extends AbstractRenderer {
 			transformBy.a2, transformBy.b2, // c, d
 			transformBy.a3, transformBy.b3, // e, f 
 		);
+	}
+
+	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
+		return other instanceof CanvasRenderer;
+	}
+
+	public renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void {
+		if (!(other instanceof CanvasRenderer)) {
+			throw new Error(`${other} cannot be rendered onto ${this}`);
+		}
+		transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
+		this.ctx.save();
+		this.transformBy(transformBy);
 		this.ctx.drawImage(other.ctx.canvas, 0, 0);
 		this.ctx.restore();
 	}
@@ -143,6 +148,25 @@ export default class CanvasRenderer extends AbstractRenderer {
 		super.drawPath(path);
 	}
 
+	public drawText(text: string, transform: Mat33, style: TextStyle): void {
+		this.ctx.save();
+		transform = this.getCanvasToScreenTransform().rightMul(transform);
+		this.transformBy(transform);
+		Text.applyTextStyles(this.ctx, style);
+
+		if (style.renderingStyle.fill.a !== 0) {
+			this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
+			this.ctx.fillText(text, 0, 0);
+		}
+		if (style.renderingStyle.stroke) {
+			this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
+			this.ctx.lineWidth = style.renderingStyle.stroke.width;
+			this.ctx.strokeText(text, 0, 0);
+		}
+
+		this.ctx.restore();
+	}
+
 	private clipLevels: number[] = [];
 	public startObject(boundingBox: Rect2, clip: boolean) {
 		if (this.isTooSmallToRender(boundingBox)) {