js-draw 0.1.0 → 0.1.3

package/dist/src/geometry/Path.js

@@ -220,6 +220,7 @@ export default class Path {
                 const lastDigit = parseInt(text.charAt(text.length - 1), 10);
                 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) {
@@ -227,11 +228,17 @@ 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(/[.]$/, '');
         };
@@ -275,10 +282,12 @@ export default class Path {
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
         // and
         // https://www.w3.org/TR/SVG2/paths.html
+        var _a;
         // Remove linebreaks
         pathString = pathString.split('\n').join(' ');
         let lastPos = Vec2.zero;
         let firstPos = null;
+        let startPos = null;
         let isFirstCommand = true;
         const commands = [];
         const moveTo = (point) => {
@@ -317,15 +326,61 @@ export default class Path {
                 endPoint,
             });
         };
+        const commandArgCounts = {
+            'm': 1,
+            'l': 1,
+            'c': 3,
+            'q': 2,
+            'z': 0,
+            'h': 1,
+            'v': 1,
+        };
         // Each command: Command character followed by anything that isn't a command character
-        const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+        const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/ig;
         let current;
         while ((current = commandExp.exec(pathString)) !== null) {
-            const argParts = current[2].trim().split(/[^0-9.-]/).filter(part => part.length > 0);
-            const numericArgs = argParts.map(arg => parseFloat(arg));
-            const commandChar = current[1];
-            const uppercaseCommand = commandChar !== commandChar.toLowerCase();
-            const args = numericArgs.reduce((accumulator, current, index, parts) => {
+            const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(part => part.length > 0).reduce((accumualtor, current) => {
+                // As of 09/2022, iOS Safari doesn't support support lookbehind in regular
+                // expressions. As such, we need an alternative.
+                // Because '-' can be used as a path separator, unless preceeded by an 'e' (as in 1e-5),
+                // we need special cases:
+                current = current.replace(/([^eE])[-]/g, '$1 -');
+                const parts = current.split(' -');
+                if (parts[0] !== '') {
+                    accumualtor.push(parts[0]);
+                }
+                accumualtor.push(...parts.slice(1).map(part => `-${part}`));
+                return accumualtor;
+            }, []);
+            let numericArgs = argParts.map(arg => parseFloat(arg));
+            let commandChar = current[1].toLowerCase();
+            let uppercaseCommand = current[1] !== commandChar;
+            // Convert commands that don't take points into commands that do.
+            if (commandChar === 'v' || commandChar === 'h') {
+                numericArgs = numericArgs.reduce((accumulator, current) => {
+                    if (commandChar === 'v') {
+                        return accumulator.concat(uppercaseCommand ? lastPos.x : 0, current);
+                    }
+                    else {
+                        return accumulator.concat(current, uppercaseCommand ? lastPos.y : 0);
+                    }
+                }, []);
+                commandChar = 'l';
+            }
+            else if (commandChar === 'z') {
+                if (firstPos) {
+                    numericArgs = [firstPos.x, firstPos.y];
+                    firstPos = lastPos;
+                }
+                else {
+                    continue;
+                }
+                // 'z' always acts like an uppercase lineTo(startPos)
+                uppercaseCommand = true;
+                commandChar = 'l';
+            }
+            const commandArgCount = (_a = commandArgCounts[commandChar]) !== null && _a !== void 0 ? _a : 0;
+            const allArgs = numericArgs.reduce((accumulator, current, index, parts) => {
                 if (index % 2 !== 0) {
                     const currentAsFloat = current;
                     const prevAsFloat = parts[index - 1];
@@ -334,76 +389,59 @@ export default class Path {
                 else {
                     return accumulator;
                 }
-            }, []).map((coordinate) => {
+            }, []).map((coordinate, index) => {
                 // Lowercase commands are relative, uppercase commands use absolute
                 // positioning
+                let newPos;
                 if (uppercaseCommand) {
-                    lastPos = coordinate;
-                    return coordinate;
+                    newPos = coordinate;
                 }
                 else {
-                    lastPos = lastPos.plus(coordinate);
-                    return lastPos;
+                    newPos = lastPos.plus(coordinate);
+                }
+                if ((index + 1) % commandArgCount === 0) {
+                    lastPos = newPos;
                 }
+                return newPos;
             });
-            let expectedPointArgCount;
-            switch (commandChar.toLowerCase()) {
-                case 'm':
-                    expectedPointArgCount = 1;
-                    moveTo(args[0]);
-                    break;
-                case 'l':
-                    expectedPointArgCount = 1;
-                    lineTo(args[0]);
-                    break;
-                case 'z':
-                    expectedPointArgCount = 0;
-                    // firstPos can be null if the stroke data is just 'z'.
-                    if (firstPos) {
-                        lineTo(firstPos);
-                    }
-                    break;
-                case 'c':
-                    expectedPointArgCount = 3;
-                    cubicBezierTo(args[0], args[1], args[2]);
-                    break;
-                case 'q':
-                    expectedPointArgCount = 2;
-                    quadraticBeierTo(args[0], args[1]);
-                    break;
-                // Horizontal line
-                case 'h':
-                    expectedPointArgCount = 0;
-                    if (uppercaseCommand) {
-                        lineTo(Vec2.of(numericArgs[0], lastPos.y));
-                    }
-                    else {
-                        lineTo(lastPos.plus(Vec2.of(numericArgs[0], 0)));
-                    }
-                    break;
-                // Vertical line
-                case 'v':
-                    expectedPointArgCount = 0;
-                    if (uppercaseCommand) {
-                        lineTo(Vec2.of(lastPos.x, numericArgs[1]));
-                    }
-                    else {
-                        lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
-                    }
-                    break;
-                default:
-                    throw new Error(`Unknown path command ${commandChar}`);
+            if (allArgs.length % commandArgCount !== 0) {
+                throw new Error([
+                    `Incorrect number of arguments: got ${JSON.stringify(allArgs)} with a length of ${allArgs.length} ≠ ${commandArgCount}k, k ∈ ℤ.`,
+                    `The number of arguments to ${commandChar} must be a multiple of ${commandArgCount}!`,
+                    `Command: ${current[0]}`,
+                ].join('\n'));
             }
-            if (args.length !== expectedPointArgCount) {
-                throw new Error(`
-					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
-				`.trim());
+            for (let argPos = 0; argPos < allArgs.length; argPos += commandArgCount) {
+                const args = allArgs.slice(argPos, argPos + commandArgCount);
+                switch (commandChar.toLowerCase()) {
+                    case 'm':
+                        if (argPos === 0) {
+                            moveTo(args[0]);
+                        }
+                        else {
+                            lineTo(args[0]);
+                        }
+                        break;
+                    case 'l':
+                        lineTo(args[0]);
+                        break;
+                    case 'c':
+                        cubicBezierTo(args[0], args[1], args[2]);
+                        break;
+                    case 'q':
+                        quadraticBeierTo(args[0], args[1]);
+                        break;
+                    default:
+                        throw new Error(`Unknown path command ${commandChar}`);
+                }
+                isFirstCommand = false;
             }
-            if (args.length > 0) {
-                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = args[0]);
+            if (allArgs.length > 0) {
+                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = allArgs[0]);
+                startPos !== null && startPos !== void 0 ? startPos : (startPos = firstPos);
+                lastPos = allArgs[allArgs.length - 1];
             }
-            isFirstCommand = false;
         }
-        return new Path(firstPos !== null && firstPos !== void 0 ? firstPos : Vec2.zero, commands);
+        return new Path(startPos !== null && startPos !== void 0 ? startPos : Vec2.zero, commands);
     }
 }

package/dist/src/geometry/Rect2.d.ts

@@ -34,6 +34,8 @@ export default class Rect2 {
     get maxDimension(): number;
     get topRight(): import("./Vec3").default;
     get bottomLeft(): import("./Vec3").default;
+    get width(): number;
+    get height(): number;
     getEdges(): LineSegment2[];
     transformedBoundingBox(affineTransform: Mat33): Rect2;
     /** @return true iff this is equal to [other] ± fuzz */

package/dist/src/geometry/Rect2.js

@@ -38,20 +38,31 @@ export default class Rect2 {
             && this.bottomRight.y >= other.bottomRight.y;
     }
     intersects(other) {
-        return this.intersection(other) !== null;
+        // Project along x/y axes.
+        const thisMinX = this.x;
+        const thisMaxX = thisMinX + this.w;
+        const otherMinX = other.x;
+        const otherMaxX = other.x + other.w;
+        if (thisMaxX < otherMinX || thisMinX > otherMaxX) {
+            return false;
+        }
+        const thisMinY = this.y;
+        const thisMaxY = thisMinY + this.h;
+        const otherMinY = other.y;
+        const otherMaxY = other.y + other.h;
+        if (thisMaxY < otherMinY || thisMinY > otherMaxY) {
+            return false;
+        }
+        return true;
     }
     // Returns the overlap of this and [other], or null, if no such
     //          overlap exists
     intersection(other) {
-        const topLeft = this.topLeft.zip(other.topLeft, Math.max);
-        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
-        // The intersection can't be outside of this rectangle
-        if (!this.containsPoint(topLeft) || !this.containsPoint(bottomRight)) {
-            return null;
-        }
-        else if (!other.containsPoint(topLeft) || !other.containsPoint(bottomRight)) {
+        if (!this.intersects(other)) {
             return null;
         }
+        const topLeft = this.topLeft.zip(other.topLeft, Math.max);
+        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
         return Rect2.fromCorners(topLeft, bottomRight);
     }
     // Returns a new rectangle containing both [this] and [other].
@@ -115,6 +126,12 @@ export default class Rect2 {
     get bottomLeft() {
         return this.topLeft.plus(Vec2.of(0, this.h));
     }
+    get width() {
+        return this.w;
+    }
+    get height() {
+        return this.h;
+    }
     // Returns edges in the order
     // [ rightEdge, topEdge, leftEdge, bottomEdge ]
     getEdges() {

package/dist/src/rendering/Display.js

@@ -23,7 +23,7 @@ export default class Display {
         else {
             throw new Error(`Unknown rendering mode, ${mode}!`);
         }
-        const cacheBlockResolution = Vec2.of(500, 500);
+        const cacheBlockResolution = Vec2.of(600, 600);
         this.cache = new RenderingCache({
             createRenderer: () => {
                 if (mode === RenderingMode.DummyRenderer) {
@@ -45,8 +45,9 @@ export default class Display {
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 500 * 500 * 4 * 200,
-            maxScale: 1.4,
-            minComponentsPerCache: 10,
+            maxScale: 1.5,
+            minComponentsPerCache: 50,
+            minComponentsToUseCache: 120,
         });
         this.editor.notifier.on(EditorEventType.DisplayResized, event => {
             var _a;

package/dist/src/rendering/caching/CacheRecord.js

@@ -11,7 +11,7 @@ export default class CacheRecord {
         this.allocd = true;
     }
     startRender() {
-        this.lastUsedCycle = this.cacheState.currentRenderingCycle++;
+        this.lastUsedCycle = this.cacheState.currentRenderingCycle;
         if (!this.allocd) {
             throw new Error('Only alloc\'d canvases can be rendered to');
         }
@@ -33,6 +33,7 @@ export default class CacheRecord {
         }
         this.allocd = true;
         this.onBeforeDeallocCallback = newDeallocCallback;
+        this.lastUsedCycle = this.cacheState.currentRenderingCycle;
     }
     getLastUsedCycle() {
         return this.lastUsedCycle;

package/dist/src/rendering/caching/CacheRecordManager.js

@@ -25,15 +25,7 @@ export class CacheRecordManager {
     }
     // Returns null if there are no cache records. Returns an unalloc'd record if one exists.
     getLeastRecentlyUsedRecord() {
-        let lruSoFar = null;
-        for (const rec of this.cacheRecords) {
-            if (!rec.isAllocd()) {
-                return rec;
-            }
-            if (!lruSoFar || rec.getLastUsedCycle() < lruSoFar.getLastUsedCycle()) {
-                lruSoFar = rec;
-            }
-        }
-        return lruSoFar;
+        this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
+        return this.cacheRecords[0];
     }
 }

package/dist/src/rendering/caching/RenderingCache.js

@@ -22,15 +22,21 @@ export default class RenderingCache {
             return;
         }
         if (!this.rootNode) {
-            // Ensure that the node is just big enough to contain the entire viewport.
-            const rootNodeSize = visibleRect.maxDimension;
+            // Adjust the node so that it has the correct aspect ratio
+            const res = this.partialSharedState.props.blockResolution;
             const topLeft = visibleRect.topLeft;
-            this.rootNode = new RenderingCacheNode(new Rect2(topLeft.x, topLeft.y, rootNodeSize, rootNodeSize), this.getSharedState());
+            this.rootNode = new RenderingCacheNode(new Rect2(topLeft.x, topLeft.y, res.x, res.y), this.getSharedState());
         }
         while (!this.rootNode.region.containsRect(visibleRect)) {
             this.rootNode = this.rootNode.generateParent();
         }
         this.rootNode = (_a = this.rootNode.smallestChildContaining(visibleRect)) !== null && _a !== void 0 ? _a : this.rootNode;
-        this.rootNode.renderItems(screenRenderer, [image], viewport);
+        const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+        if (visibleLeaves.length > this.partialSharedState.props.minComponentsToUseCache) {
+            this.rootNode.renderItems(screenRenderer, [image], viewport);
+        }
+        else {
+            image.render(screenRenderer, visibleRect);
+        }
     }
 }

package/dist/src/rendering/caching/RenderingCacheNode.js

@@ -133,7 +133,11 @@ export default class RenderingCacheNode {
         const newItems = [];
         // Divide [items] until nodes are leaves or smaller than this
         for (const item of items) {
-            if (item.getBBox().maxDimension >= this.region.maxDimension) {
+            const bbox = item.getBBox();
+            if (!bbox.intersects(this.region)) {
+                continue;
+            }
+            if (bbox.maxDimension >= this.region.maxDimension) {
                 newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
             }
             else {
@@ -146,6 +150,9 @@ export default class RenderingCacheNode {
             items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
             return;
         }
+        if (debugMode) {
+            screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+        }
         // Could we render direclty from [this] or do we need to recurse?
         const couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
         if (!couldRender) {
@@ -159,7 +166,7 @@ export default class RenderingCacheNode {
             // Determine whether we already have rendered the items
             const leaves = [];
             for (const item of items) {
-                leaves.push(...item.getLeavesIntersectingRegion(this.region));
+                leaves.push(...item.getLeavesIntersectingRegion(this.region, rect => rect.w / this.region.w < 2 / this.cacheState.props.blockResolution.x));
             }
             sortLeavesByZIndex(leaves);
             const leavesByIds = this.computeSortedByLeafIds(leaves);
@@ -213,7 +220,7 @@ export default class RenderingCacheNode {
                                 }
                             }
                             if (debugMode) {
-                                screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+                                screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
                             }
                         }
                     }

package/dist/src/rendering/caching/testUtils.js

@@ -12,7 +12,7 @@ export const createCache = (onRenderAlloc, cacheOptions) => {
         },
         isOfCorrectType(renderer) {
             return renderer instanceof DummyRenderer;
-        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minComponentsPerCache: 0 }, cacheOptions));
+        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minComponentsPerCache: 0, minComponentsToUseCache: 0 }, cacheOptions));
     return {
         cache,
         editor

package/dist/src/rendering/caching/types.d.ts

@@ -10,6 +10,7 @@ export interface CacheProps {
     cacheSize: number;
     maxScale: number;
     minComponentsPerCache: number;
+    minComponentsToUseCache: number;
 }
 export interface PartialCacheState {
     currentRenderingCycle: number;

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,4 +1,6 @@
 import Color4 from '../../Color4';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import { PathCommand } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -19,6 +21,7 @@ export interface RenderablePathSpec {
 export default abstract class AbstractRenderer {
     private viewport;
     private selfTransform;
+    private transformStack;
     protected constructor(viewport: Viewport);
     protected getViewport(): Viewport;
     abstract displaySize(): Vec2;
@@ -29,6 +32,7 @@ export default abstract class AbstractRenderer {
     protected abstract moveTo(point: Point2): void;
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
     protected objectLevel: number;
@@ -37,12 +41,14 @@ export default abstract class AbstractRenderer {
     drawPath(path: RenderablePathSpec): void;
     drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
     startObject(_boundingBox: Rect2, _clip?: boolean): void;
-    endObject(): void;
+    endObject(_loaderData?: LoadSaveDataTable): void;
     protected getNestingLevel(): number;
     abstract drawPoints(...points: Point2[]): void;
     canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer): void;
     setTransform(transform: Mat33 | null): void;
+    pushTransform(transform: Mat33): void;
+    popTransform(): void;
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -11,6 +11,7 @@ export default class AbstractRenderer {
         this.viewport = viewport;
         // If null, this' transformation is linked to the Viewport
         this.selfTransform = null;
+        this.transformStack = [];
         this.objectLevel = 0;
         this.currentPaths = null;
     }
@@ -79,7 +80,7 @@ export default class AbstractRenderer {
         this.currentPaths = [];
         this.objectLevel++;
     }
-    endObject() {
+    endObject(_loaderData) {
         // Render the paths all at once
         this.flushPath();
         this.currentPaths = null;
@@ -104,6 +105,17 @@ export default class AbstractRenderer {
     setTransform(transform) {
         this.selfTransform = transform;
     }
+    pushTransform(transform) {
+        this.transformStack.push(this.selfTransform);
+        this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+    }
+    popTransform() {
+        var _a;
+        if (this.transformStack.length === 0) {
+            throw new Error('Unable to pop more transforms than have been pushed!');
+        }
+        this.setTransform((_a = this.transformStack.pop()) !== null && _a !== void 0 ? _a : null);
+    }
     // Get the matrix that transforms a vector on the canvas to a vector on this'
     // rendering target.
     getCanvasToScreenTransform() {

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -1,3 +1,4 @@
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -12,6 +13,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    private transformBy;
     canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
     setDraftMode(draftMode: boolean): void;
@@ -24,6 +26,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip: boolean): void;
     endObject(): void;

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import Text from '../../components/Text';
 import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -10,6 +11,16 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.clipLevels = [];
         this.setDraftMode(false);
     }
+    transformBy(transformBy) {
+        // From MDN, transform(a,b,c,d,e,f)
+        // takes input such that
+        // ⎡ a c e ⎤
+        // ⎢ b d f ⎥ transforms content drawn to [ctx].
+        // ⎣ 0 0 1 ⎦
+        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
+        transformBy.a2, transformBy.b2, // c, d
+        transformBy.a3, transformBy.b3);
+    }
     canRenderFromWithoutDataLoss(other) {
         return other instanceof CanvasRenderer;
     }
@@ -19,14 +30,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
         this.ctx.save();
-        // From MDN, transform(a,b,c,d,e,f)
-        // takes input such that
-        // ⎡ a c e ⎤
-        // ⎢ b d f ⎥ transforms content drawn to [ctx].
-        // ⎣ 0 0 1 ⎦
-        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
-        transformBy.a2, transformBy.b2, // c, d
-        transformBy.a3, transformBy.b3);
+        this.transformBy(transformBy);
         this.ctx.drawImage(other.ctx.canvas, 0, 0);
         this.ctx.restore();
     }
@@ -105,6 +109,22 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         super.drawPath(path);
     }
+    drawText(text, transform, style) {
+        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();
+    }
     startObject(boundingBox, clip) {
         if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();

package/dist/src/rendering/renderers/DummyRenderer.d.ts

@@ -1,3 +1,4 @@
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -10,6 +11,7 @@ export default class DummyRenderer extends AbstractRenderer {
     lastFillStyle: RenderingStyle | null;
     lastPoint: Point2 | null;
     objectNestingLevel: number;
+    lastText: string | null;
     pointBuffer: Point2[];
     constructor(viewport: Viewport);
     displaySize(): Vec2;
@@ -21,6 +23,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
+    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;

package/dist/src/rendering/renderers/DummyRenderer.js

@@ -10,6 +10,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.lastFillStyle = null;
         this.lastPoint = null;
         this.objectNestingLevel = 0;
+        this.lastText = null;
         // List of points drawn since the last clear.
         this.pointBuffer = [];
     }
@@ -28,6 +29,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.clearedCount++;
         this.renderedPathCount = 0;
         this.pointBuffer = [];
+        this.lastText = null;
         // Ensure all objects finished rendering
         if (this.objectNestingLevel > 0) {
             throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
@@ -68,6 +70,9 @@ export default class DummyRenderer extends AbstractRenderer {
         // drawPoints is intended for debugging.
         // As such, it is unlikely to be the target of automated tests.
     }
+    drawText(text, _transform, _style) {
+        this.lastText = text;
+    }
     startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;