js-draw 0.0.10 → 0.1.0

package/src/rendering/caching/RenderingCacheNode.ts

@@ -0,0 +1,365 @@
+
+// A cache record with sub-nodes.
+
+import Color4 from '../../Color4';
+import { ImageNode, sortLeavesByZIndex } from '../../EditorImage';
+import Rect2 from '../../geometry/Rect2';
+import Viewport from '../../Viewport';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import CacheRecord from './CacheRecord';
+import { CacheState } from './types';
+
+// 3x3 divisions for each node.
+const cacheDivisionSize = 3;
+
+// True: Show rendering updates.
+const debugMode = false;
+
+export default class RenderingCacheNode {
+	// invariant: instantiatedChildren.length === 9
+	private instantiatedChildren: RenderingCacheNode[] = [];
+	private parent: RenderingCacheNode|null = null;
+
+	private cachedRenderer: CacheRecord|null = null;
+	// invariant: sortedInAscendingOrder(renderedIds)
+	private renderedIds: Array<number> = [];
+	private renderedMaxZIndex: number|null = null;
+
+	public constructor(
+		public readonly region: Rect2, private readonly cacheState: CacheState
+	) {
+	}
+
+	// Creates a previous layer of the cache tree and adds this as a child near the
+	// center of the previous layer's children.
+	// Returns this' parent if it already exists.
+	public generateParent(): RenderingCacheNode {
+		if (this.parent) {
+			return this.parent;
+		}
+
+		const parentRegion = Rect2.fromCorners(
+			this.region.topLeft.minus(this.region.size),
+			this.region.bottomRight.plus(this.region.size)
+		);
+		const parent = new RenderingCacheNode(parentRegion, this.cacheState);
+		parent.generateChildren();
+
+		// Ensure the new node is matches the middle child's region.
+		const checkTolerance = this.region.maxDimension / 100;
+		const middleChildIdx = (parent.instantiatedChildren.length - 1) / 2;
+		if (!parent.instantiatedChildren[middleChildIdx].region.eq(this.region, checkTolerance)) {
+			console.error(parent.instantiatedChildren[middleChildIdx].region, '≠', this.region);
+			throw new Error('Logic error: [this] is not contained within its parent\'s center child');
+		}
+
+		// Replace the middle child
+		parent.instantiatedChildren[middleChildIdx] = this;
+		this.parent = parent;
+
+		return parent;
+	}
+
+	// Generates children, if missing.
+	private generateChildren() {
+		if (this.instantiatedChildren.length === 0) {
+			const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
+
+			for (const rect of childRects) {
+				const child = new RenderingCacheNode(rect, this.cacheState);
+				child.parent = this;
+				this.instantiatedChildren.push(child);
+			}
+		}
+		this.checkRep();
+	}
+
+	// Returns CacheNodes directly contained within this.
+	private getChildren(): RenderingCacheNode[] {
+		this.checkRep();
+		this.generateChildren();
+
+		return this.instantiatedChildren;
+	}
+
+	public smallestChildContaining(rect: Rect2): RenderingCacheNode|null {
+		const largerThanChildren = rect.maxDimension > this.region.maxDimension / cacheDivisionSize;
+		if (!this.region.containsRect(rect) || largerThanChildren) {
+			return null;
+		}
+
+		for (const child of this.getChildren()) {
+			if (child.region.containsRect(rect)) {
+				return child.smallestChildContaining(rect) ?? child;
+			}
+		}
+
+		return null;
+	}
+
+	// => [true] iff [this] can be rendered without too much scaling
+	private renderingWouldBeHighEnoughResolution(viewport: Viewport) {
+		// Determine how 1px in this corresponds to 1px on the canvas.
+		//  this.region.w is in canvas units. Thus,
+		const sizeOfThisPixelOnCanvas = this.region.w / this.cacheState.props.blockResolution.x;
+		const sizeOfThisPixelOnScreen = viewport.getScaleFactor() * sizeOfThisPixelOnCanvas;
+
+		if (sizeOfThisPixelOnScreen > this.cacheState.props.maxScale) {
+			return false;
+		}
+		return true;
+	}
+
+	// => [true] if all children of this can be rendered from their caches.
+	private allChildrenCanRender(viewport: Viewport, leavesSortedById: ImageNode[]) {
+		if (this.instantiatedChildren.length === 0) {
+			return false;
+		}
+
+		for (const child of this.instantiatedChildren) {
+			if (!child.region.intersects(viewport.visibleRect)) {
+				continue;
+			}
+
+			if (!child.renderingIsUpToDate(this.idsOfIntersecting(leavesSortedById))) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	private computeSortedByLeafIds(leaves: ImageNode[]) {
+		const ids = leaves.slice();
+		ids.sort((a, b) => a.getId() - b.getId());
+		return ids;
+	}
+
+	// Returns a list of the ids of the nodes intersecting this
+	private idsOfIntersecting(nodes: ImageNode[]) {
+		const result = [];
+		for (const node of nodes) {
+			if (node.getBBox().intersects(this.region)) {
+				result.push(node.getId());
+			}
+		}
+		return result;
+	}
+
+	private renderingIsUpToDate(sortedIds: number[]) {
+		if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+			return false;
+		}
+
+		for (let i = 0; i < sortedIds.length; i++) {
+			if (sortedIds[i] !== this.renderedIds[i]) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	// Render all [items] within [viewport]
+	public renderItems(screenRenderer: AbstractRenderer, items: ImageNode[], viewport: Viewport) {
+		if (
+			!viewport.visibleRect.intersects(this.region)
+			|| items.length === 0
+		) {
+			return;
+		}
+
+		const newItems = [];
+		// Divide [items] until nodes are leaves or smaller than this
+		for (const item of items) {
+			if (item.getBBox().maxDimension >= this.region.maxDimension) {
+				newItems.push(...item.getChildrenOrSelfIntersectingRegion(this.region));
+			} else {
+				newItems.push(item);
+			}
+		}
+		items = newItems;
+
+		// Can we cache at all?
+		if (!this.cacheState.props.isOfCorrectType(screenRenderer)) {
+			items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
+			return;
+		}
+
+		// Could we render direclty from [this] or do we need to recurse?
+		const couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
+		if (!couldRender) {
+			for (const child of this.getChildren()) {
+				child.renderItems(screenRenderer, items.filter(item => {
+					return item.getBBox().intersects(child.region);
+				}), viewport);
+			}
+		} else {
+			// Determine whether we already have rendered the items
+			const leaves = [];
+			for (const item of items) {
+				leaves.push(...item.getLeavesIntersectingRegion(this.region));
+			}
+			sortLeavesByZIndex(leaves);
+			const leavesByIds = this.computeSortedByLeafIds(leaves);
+
+			// No intersecting leaves? No need to render
+			if (leavesByIds.length === 0) {
+				return;
+			}
+
+			const leafIds = leavesByIds.map(leaf => leaf.getId());
+
+			let thisRenderer;
+			if (!this.renderingIsUpToDate(leafIds)) {
+				if (this.allChildrenCanRender(viewport, leavesByIds)) {
+					for (const child of this.getChildren()) {
+						child.renderItems(screenRenderer, items, viewport);
+					}
+					return;
+				}
+
+				// Is it worth it to render the items?
+				// TODO: Replace this with something performace based.
+				// TODO: Determine whether it is 'worth it' to cache this depending on rendering time.
+				if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
+					let fullRerenderNeeded = true;
+					if (!this.cachedRenderer) {
+						this.cachedRenderer = this.cacheState.recordManager.allocCanvas(
+							this.region,
+							() => this.onRegionDealloc()
+						);
+					} else if (leavesByIds.length > this.renderedIds.length && this.renderedMaxZIndex !== null) {
+						// We often don't need to do a full re-render even if something's changed.
+						// Check whether we can just draw on top of the existing cache.
+						const newLeaves = [];
+
+						let minNewZIndex: number|null = null;
+
+						for (let i = 0; i < leavesByIds.length; i++) {
+							const leaf = leavesByIds[i];
+							const content = leaf.getContent()!;
+
+							const zIndex = content.getZIndex();
+							if (i >= this.renderedIds.length || leaf.getId() !== this.renderedIds[i]) {
+								newLeaves.push(leaf);
+
+								if (minNewZIndex === null || zIndex < minNewZIndex) {
+									minNewZIndex = zIndex;
+								}
+							}
+						}
+
+						if (minNewZIndex !== null && minNewZIndex > this.renderedMaxZIndex!) {
+							fullRerenderNeeded = false;
+							thisRenderer = this.cachedRenderer.startRender();
+
+							// Looping is faster than re-sorting.
+							for (let i = 0; i < leaves.length; i++) {
+								const leaf = leaves[i];
+								const zIndex = leaf.getContent()!.getZIndex();
+
+								if (zIndex > this.renderedMaxZIndex) {
+									leaf.render(thisRenderer, this.region);
+									this.renderedMaxZIndex = zIndex;
+								}
+							}
+
+							if (debugMode) {
+								screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+							}
+						}
+					}
+
+					if (fullRerenderNeeded) {
+						thisRenderer = this.cachedRenderer.startRender();
+						thisRenderer.clear();
+
+						this.renderedMaxZIndex = null;
+						for (const leaf of leaves) {
+							const content = leaf.getContent()!;
+							this.renderedMaxZIndex ??= content.getZIndex();
+							this.renderedMaxZIndex = Math.max(this.renderedMaxZIndex, content.getZIndex());
+		
+							leaf.render(thisRenderer, this.region);
+						}
+
+						if (debugMode) {
+							screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.red });
+						}
+					}
+					this.renderedIds = leafIds;
+				} else {
+					this.cachedRenderer?.dealloc();
+
+					// Slightly increase the clip region to prevent seams.
+					// Divide by two because grownBy expands the rectangle on all sides.
+					const pixelSize = viewport.getSizeOfPixelOnCanvas();
+					const expandedRegion = new Rect2(
+						this.region.x, this.region.y,
+						this.region.w + pixelSize, this.region.h + pixelSize
+					);
+
+					const clip = true;
+					screenRenderer.startObject(expandedRegion, clip);
+					for (const leaf of leaves) {
+						leaf.render(screenRenderer, this.region.intersection(viewport.visibleRect)!);
+					}
+
+					screenRenderer.endObject();
+				}
+			} else {
+				thisRenderer = this.cachedRenderer!.startRender();
+			}
+
+			if (thisRenderer) {
+				const transformMat = this.cachedRenderer!.getTransform(this.region).inverse();
+				screenRenderer.renderFromOtherOfSameType(transformMat, thisRenderer);
+			}
+
+			// Can we clean up this' children? (Are they unused?)
+			if (this.instantiatedChildren.every(child => child.isEmpty())) {
+				this.instantiatedChildren = [];
+			}
+		}
+
+		this.checkRep();
+	}
+
+	// Returns true iff this/its children have no cached state.
+	private isEmpty(): boolean {
+		if (this.cachedRenderer !== null) {
+			return false;
+		}
+
+		return this.instantiatedChildren.every(child => child.isEmpty());
+	}
+
+	private onRegionDealloc() {
+		this.cachedRenderer = null;
+		if (this.isEmpty()) {
+			this.instantiatedChildren = [];
+		}
+	}
+
+	private checkRep() {
+		if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize && this.instantiatedChildren.length !== 0) {
+			throw new Error('Repcheck: Wrong number of children');
+		}
+
+		if (this.renderedIds[1] !== undefined && this.renderedIds[0] >= this.renderedIds[1]) {
+			console.error(this.renderedIds);
+			throw new Error('Repcheck: First two ids are not in ascending order!');
+		}
+
+		for (const child of this.instantiatedChildren) {
+			if (child.parent !== this) {
+				throw new Error('Children should be linked to their parents!');
+			}
+		}
+
+		if (this.cachedRenderer && !this.cachedRenderer.isAllocd()) {
+			throw new Error('this\' cachedRenderer != null, but is dealloc\'d');
+		}
+	}
+}

package/src/rendering/caching/testUtils.ts

@@ -0,0 +1,34 @@
+import { Vec2 } from '../../geometry/Vec2';
+import DummyRenderer from '../renderers/DummyRenderer';
+import createEditor from '../../testing/createEditor';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import RenderingCache from './RenderingCache';
+import { CacheProps } from './types';
+
+type RenderAllocCallback = (renderer: DummyRenderer)=> void;
+
+// Override any default test options with [cacheOptions]
+export const createCache = (onRenderAlloc?: RenderAllocCallback, cacheOptions?: Partial<CacheProps>) => {
+	const editor = createEditor();
+
+	const cache = new RenderingCache({
+		createRenderer() {
+			const renderer = new DummyRenderer(editor.viewport);
+			onRenderAlloc?.(renderer);
+			return renderer;
+		},
+		isOfCorrectType(renderer: AbstractRenderer) {
+			return renderer instanceof DummyRenderer;
+		},
+		blockResolution: Vec2.of(500, 500),
+		cacheSize: 500 * 10 * 4,
+		maxScale: 2,
+		minComponentsPerCache: 0,
+		...cacheOptions
+	});
+
+	return {
+		cache,
+		editor
+	};
+};

package/src/rendering/caching/types.ts

@@ -0,0 +1,35 @@
+import { Vec2 } from '../../geometry/Vec2';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { CacheRecordManager } from './CacheRecordManager';
+
+
+export type CacheAddress = number;
+export type BeforeDeallocCallback = ()=>void;
+
+
+export interface CacheProps {
+    createRenderer(): AbstractRenderer;
+    // Returns whether the cache can be rendered onto [renderer].
+    isOfCorrectType(renderer: AbstractRenderer): boolean;
+
+    blockResolution: Vec2;
+    cacheSize: number;
+
+    // Maximum amount a cached image can be scaled without a re-render
+    // (larger numbers = blurrier, but faster)
+    maxScale: number;
+
+    // Minimum component count to cache, rather than just re-render each time.
+    minComponentsPerCache: number;
+}
+
+// CacheRecordManager relies on a partial copy of the shared state. Thus,
+// we need to separate partial/non-partial state.
+export interface PartialCacheState {
+    currentRenderingCycle: number;
+    props: CacheProps;
+}
+
+export interface CacheState extends PartialCacheState {
+    recordManager: CacheRecordManager;
+}

package/src/rendering/{AbstractRenderer.ts → renderers/AbstractRenderer.ts}

@@ -1,8 +1,9 @@
-import Color4 from '../Color4';
-import Path, { PathCommand, PathCommandType } from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Viewport from '../Viewport';
+import Color4 from '../../Color4';
+import Mat33 from '../../geometry/Mat33';
+import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
 
 export interface RenderingStyle {
 	fill: Color4;
@@ -25,7 +26,14 @@ const stylesEqual = (a: RenderingStyle, b: RenderingStyle) => {
 };
 
 export default abstract class AbstractRenderer {
-	protected constructor(protected viewport: Viewport) { }
+	// If null, this' transformation is linked to the Viewport
+	private selfTransform: Mat33|null = null;
+
+	protected constructor(private viewport: Viewport) { }
+
+	// this.canvasToScreen, etc. should be used instead of the corresponding
+	// methods on Viewport.
+	protected getViewport(): Viewport { return this.viewport; }
 
 	// Returns the size of the rendered region of this on
 	// the display (in pixels).
@@ -43,9 +51,13 @@ export default abstract class AbstractRenderer {
 		controlPoint: Point2, endPoint: Point2,
 	): void;
 
+	// Returns true iff the given rectangle is so small, rendering anything within
+	// it has no effect on the image.
+	public abstract isTooSmallToRender(rect: Rect2): boolean;
+
 	public setDraftMode(_draftMode: boolean) { }
 
-	private objectLevel: number = 0;
+	protected objectLevel: number = 0;
 	private currentPaths: RenderablePathSpec[]|null = null;
 	private flushPath() {
 		if (!this.currentPaths) {
@@ -110,7 +122,8 @@ export default abstract class AbstractRenderer {
 	}
 
 	// Note the start/end of an object with the given bounding box.
-	public startObject(_boundingBox: Rect2) {
+	// Renderers are not required to support [clip]
+	public startObject(_boundingBox: Rect2, _clip?: boolean) {
 		this.currentPaths = [];
 		this.objectLevel ++;
 	}
@@ -134,4 +147,38 @@ export default abstract class AbstractRenderer {
 
 	// Draw a representation of [points]. Intended for debugging.
 	public abstract drawPoints(...points: Point2[]): void;
+
+
+	// Returns true iff other can be rendered onto this without data loss.
+	public canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean {
+		return false;
+	}
+
+	// MUST throw if other and this are not of the same base class.
+	public renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer) {
+		throw new Error(`Unable to render from ${other}: Not implemented`);
+	}
+
+	// Set a transformation to apply to things before rendering,
+	// replacing the viewport's transform.
+	public setTransform(transform: Mat33|null) {
+		this.selfTransform = transform;
+	}
+
+	// Get the matrix that transforms a vector on the canvas to a vector on this'
+	// rendering target.
+	public getCanvasToScreenTransform(): Mat33 {
+		if (this.selfTransform) {
+			return this.selfTransform;
+		}
+		return this.viewport.canvasToScreenTransform;
+	}
+
+	public canvasToScreen(vec: Vec2): Vec2 {
+		return this.getCanvasToScreenTransform().transformVec2(vec);
+	}
+
+	public getSizeOfCanvasPixelOnScreen(): number {
+		return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
+	}
 }

package/src/rendering/{CanvasRenderer.ts → renderers/CanvasRenderer.ts}

@@ -1,8 +1,9 @@
-import Color4 from '../Color4';
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
-import Viewport from '../Viewport';
+import Color4 from '../../Color4';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from './AbstractRenderer';
 
 export default class CanvasRenderer extends AbstractRenderer {
@@ -25,6 +26,30 @@ 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();
+		// 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, // e, f 
+		);
+		this.ctx.drawImage(other.ctx.canvas, 0, 0);
+		this.ctx.restore();
+	}
+
 	// Set parameters for lower/higher quality rendering
 	public setDraftMode(draftMode: boolean) {
 		if (draftMode) {
@@ -50,7 +75,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	protected beginPath(startPoint: Point2) {
-		startPoint = this.viewport.canvasToScreen(startPoint);
+		startPoint = this.canvasToScreen(startPoint);
 
 		this.ctx.beginPath();
 		this.ctx.moveTo(startPoint.x, startPoint.y);
@@ -62,7 +87,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 
 		if (style.stroke) {
 			this.ctx.strokeStyle = style.stroke.color.toHexString();
-			this.ctx.lineWidth = this.viewport.getScaleFactor() * style.stroke.width;
+			this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
 			this.ctx.stroke();
 		}
 
@@ -70,19 +95,19 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	protected lineTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 		this.ctx.lineTo(point.x, point.y);
 	}
 
 	protected moveTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 		this.ctx.moveTo(point.x, point.y);
 	}
 
 	protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2) {
-		p1 = this.viewport.canvasToScreen(p1);
-		p2 = this.viewport.canvasToScreen(p2);
-		p3 = this.viewport.canvasToScreen(p3);
+		p1 = this.canvasToScreen(p1);
+		p2 = this.canvasToScreen(p2);
+		p3 = this.canvasToScreen(p3);
 
 		// Approximate the curve if small enough.
 		const delta1 = p2.minus(p1);
@@ -96,8 +121,8 @@ export default class CanvasRenderer extends AbstractRenderer {
 	}
 
 	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
-		controlPoint = this.viewport.canvasToScreen(controlPoint);
-		endPoint = this.viewport.canvasToScreen(endPoint);
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
 
 		// Approximate the curve with a line if small enough
 		const delta = controlPoint.minus(endPoint);
@@ -118,23 +143,35 @@ export default class CanvasRenderer extends AbstractRenderer {
 		super.drawPath(path);
 	}
 
-	public startObject(boundingBox: Rect2) {
-		// Should we ignore all objects within this object's bbox?
-		const diagonal = this.viewport.canvasToScreenTransform.transformVec3(boundingBox.size);
-
-		const bothDimenMinSize = this.minRenderSizeBothDimens;
-		const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
-		const anyDimenMinSize = this.minRenderSizeAnyDimen;
-		const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
-
-		if (bothTooSmall || anyTooSmall) {
+	private clipLevels: number[] = [];
+	public startObject(boundingBox: Rect2, clip: boolean) {
+		if (this.isTooSmallToRender(boundingBox)) {
 			this.ignoreObjectsAboveLevel = this.getNestingLevel();
 			this.ignoringObject = true;
 		}
 
 		super.startObject(boundingBox);
+
+		if (!this.ignoringObject && clip) {
+			this.clipLevels.push(this.objectLevel);
+			this.ctx.save();
+			this.ctx.beginPath();
+			for (const corner of boundingBox.corners) {
+				const screenCorner = this.canvasToScreen(corner);
+				this.ctx.lineTo(screenCorner.x, screenCorner.y);
+			}
+			this.ctx.clip();
+		}
 	}
+
 	public endObject() {
+		if (!this.ignoringObject && this.clipLevels.length > 0) {
+			if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+				this.ctx.restore();
+				this.clipLevels.pop();
+			}
+		}
+
 		super.endObject();
 
 		// If exiting an object with a too-small-to-draw bounding box,
@@ -148,7 +185,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		const pointRadius = 10;
 
 		for (let i = 0; i < points.length; i++) {
-			const point = this.viewport.canvasToScreen(points[i]);
+			const point = this.canvasToScreen(points[i]);
 
 			this.ctx.beginPath();
 			this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
@@ -167,4 +204,16 @@ export default class CanvasRenderer extends AbstractRenderer {
 			this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
 		}
 	}
+
+	public isTooSmallToRender(rect: Rect2): boolean {
+		// Should we ignore all objects within this object's bbox?
+		const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
+
+		const bothDimenMinSize = this.minRenderSizeBothDimens;
+		const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
+		const anyDimenMinSize = this.minRenderSizeAnyDimen;
+		const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
+		
+		return bothTooSmall || anyTooSmall;
+	}
 }