@flighthq/displayobject-canvas 0.1.0

package/src/canvasShapeCommands.test.ts

@@ -0,0 +1,448 @@
+import {
+  appendShapeBeginBitmapFill,
+  appendShapeBeginFill,
+  appendShapeBeginGradientFill,
+  appendShapeCircle,
+  appendShapeCubicCurveTo,
+  appendShapeCurveTo,
+  appendShapeEllipse,
+  appendShapeEndFill,
+  appendShapeLineBitmapStyle,
+  appendShapeLineGradientStyle,
+  appendShapeLineStyle,
+  appendShapeLineTo,
+  appendShapeMoveTo,
+  appendShapePath,
+  appendShapeRectangle,
+  appendShapeRoundRectangle,
+  createShape,
+  PathCommand,
+} from '@flighthq/shape';
+
+import { renderCanvasShapeCommands } from './canvasShape';
+import { defaultCanvasShapeCommands } from './canvasShapeCommands';
+import { registerCanvasShapeCommands } from './canvasShapeRegistry';
+
+beforeAll(() => {
+  registerCanvasShapeCommands(defaultCanvasShapeCommands);
+});
+
+function makeContext(): CanvasRenderingContext2D {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+  if (typeof context.roundRect !== 'function') {
+    context.roundRect = vi.fn();
+  }
+  return context;
+}
+
+function makeBitmapSource(w: number, h: number) {
+  const canvas = document.createElement('canvas');
+  canvas.width = w;
+  canvas.height = h;
+  return { source: canvas, width: w, height: h } as never;
+}
+
+describe('defaultCanvasBeginBitmapFill', () => {
+  it('uses drawImage when drawRectangle fits within bitmap bounds', () => {
+    const context = makeContext();
+    const drawImageSpy = vi.spyOn(context, 'drawImage');
+    const fillSpy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginBitmapFill(shape, makeBitmapSource(200, 200));
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(drawImageSpy).toHaveBeenCalledOnce();
+    expect(fillSpy).not.toHaveBeenCalled();
+  });
+
+  it('falls back to pattern fill when drawRectangle exceeds bitmap bounds', () => {
+    const context = makeContext();
+    const drawImageSpy = vi.spyOn(context, 'drawImage');
+    const fillSpy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginBitmapFill(shape, makeBitmapSource(50, 50));
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(drawImageSpy).not.toHaveBeenCalled();
+    expect(fillSpy).toHaveBeenCalled();
+  });
+
+  it('sets imageSmoothingEnabled when smooth is true', () => {
+    const context = makeContext();
+    context.imageSmoothingEnabled = false;
+    const shape = createShape();
+    appendShapeBeginBitmapFill(shape, makeBitmapSource(200, 200), null, true, true);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(context.imageSmoothingEnabled).toBe(true);
+  });
+});
+
+describe('defaultCanvasBeginFill', () => {
+  it('calls fill when alpha is above threshold', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000, 1);
+    appendShapeRectangle(shape, 0, 0, 10, 10);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it('does not call fill when alpha is below threshold', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000, 0);
+    appendShapeRectangle(shape, 0, 0, 10, 10);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});
+
+describe('defaultCanvasBeginGradientFill', () => {
+  it('calls createLinearGradient for linear type', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'createLinearGradient');
+    const shape = createShape();
+    appendShapeBeginGradientFill(shape, 'linear', [0xff0000, 0x0000ff], [1, 1], [0, 255]);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it('calls createRadialGradient for radial type', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'createRadialGradient');
+    const shape = createShape();
+    appendShapeBeginGradientFill(shape, 'radial', [0xff0000, 0x0000ff], [1, 1], [0, 255]);
+    appendShapeRectangle(shape, 0, 0, 100, 100);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+});
+
+describe('defaultCanvasCubicCurveTo', () => {
+  it('calls bezierCurveTo with correct control and anchor points', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'bezierCurveTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeCubicCurveTo(shape, 25, -50, 75, -50, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(25, -50, 75, -50, 100, 0);
+  });
+
+  it('moves to origin when there is no current point', () => {
+    const context = makeContext();
+    const moveSpy = vi.spyOn(context, 'moveTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeCubicCurveTo(shape, 25, -50, 75, -50, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(moveSpy).toHaveBeenCalledWith(0, 0);
+  });
+});
+
+describe('defaultCanvasCurveTo', () => {
+  it('calls quadraticCurveTo with correct control and anchor points', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'quadraticCurveTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeCurveTo(shape, 50, -50, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(50, -50, 100, 0);
+  });
+
+  it('moves to origin when there is no current point', () => {
+    const context = makeContext();
+    const moveSpy = vi.spyOn(context, 'moveTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeCurveTo(shape, 50, -50, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(moveSpy).toHaveBeenCalledWith(0, 0);
+  });
+});
+
+describe('defaultCanvasDrawCircle', () => {
+  it('draws using arc', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'arc');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xffffff);
+    appendShapeCircle(shape, 50, 50, 25);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(50, 50, 25, 0, Math.PI * 2, true);
+  });
+});
+
+describe('defaultCanvasDrawEllipse', () => {
+  it('draws using ellipse', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'ellipse');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xffffff);
+    appendShapeEllipse(shape, 0, 0, 100, 50);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(50, 25, 50, 25, 0, 0, Math.PI * 2);
+  });
+});
+
+describe('defaultCanvasDrawPath', () => {
+  it('executes MOVE_TO and LINE_TO path commands', () => {
+    const context = makeContext();
+    const moveSpy = vi.spyOn(context, 'moveTo');
+    const lineSpy = vi.spyOn(context, 'lineTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapePath(shape, [PathCommand.MOVE_TO, PathCommand.LINE_TO, PathCommand.LINE_TO], [10, 20, 100, 20, 100, 80]);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(moveSpy).toHaveBeenCalledWith(10, 20);
+    expect(lineSpy).toHaveBeenCalledWith(100, 20);
+    expect(lineSpy).toHaveBeenCalledWith(100, 80);
+  });
+
+  it('executes CURVE_TO as quadraticCurveTo', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'quadraticCurveTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapePath(shape, [PathCommand.MOVE_TO, PathCommand.CURVE_TO], [0, 0, 50, 0, 100, 50]);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(50, 0, 100, 50);
+  });
+
+  it('executes CUBIC_CURVE_TO as bezierCurveTo', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'bezierCurveTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapePath(shape, [PathCommand.MOVE_TO, PathCommand.CUBIC_CURVE_TO], [0, 0, 25, -50, 75, -50, 100, 0]);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(25, -50, 75, -50, 100, 0);
+  });
+
+  it('uses nonzero winding rule when drawPath winding is nonZero', () => {
+    const context = makeContext();
+    const fillSpy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapePath(shape, [PathCommand.MOVE_TO, PathCommand.LINE_TO], [0, 0, 100, 100], 'nonZero');
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(fillSpy).toHaveBeenCalledWith('nonzero');
+  });
+
+  it('uses evenodd winding rule when drawPath winding is evenOdd', () => {
+    const context = makeContext();
+    const fillSpy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapePath(shape, [PathCommand.MOVE_TO, PathCommand.LINE_TO], [0, 0, 100, 100], 'evenOdd');
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(fillSpy).toHaveBeenCalledWith('evenodd');
+  });
+});
+
+describe('defaultCanvasDrawRectangle', () => {
+  it('calls context.rect for a plain fill', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'rect');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 10, 20, 50, 30);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(10, 20, 50, 30);
+  });
+});
+
+describe('defaultCanvasDrawRoundRectangle', () => {
+  it('calls roundRect with the minimum of rx and ry', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'roundRect');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xffffff);
+    appendShapeRoundRectangle(shape, 0, 0, 100, 50, 10, 10);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(0, 0, 100, 50, 5);
+  });
+});
+
+describe('defaultCanvasEndFill', () => {
+  it('flushes a pending fill path', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'fill');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeRectangle(shape, 0, 0, 10, 10);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+});
+
+describe('defaultCanvasLineBitmapStyle', () => {
+  it('applies a bitmap stroke pattern', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'stroke');
+    const shape = createShape();
+    appendShapeLineBitmapStyle(shape, makeBitmapSource(64, 64));
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeLineTo(shape, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+});
+
+describe('defaultCanvasLineGradientStyle', () => {
+  it('applies a gradient stroke', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'stroke');
+    const shape = createShape();
+    appendShapeLineGradientStyle(shape, 'linear', [0xff0000, 0x0000ff], [1, 1], [0, 255]);
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeLineTo(shape, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledOnce();
+  });
+});
+
+describe('defaultCanvasLineStyle', () => {
+  it('sets lineCap to butt when caps is none', () => {
+    const context = makeContext();
+    const shape = createShape();
+    appendShapeLineStyle(shape, 2, 0x000000, 1, false, 'normal', 'none', 'round', 3);
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeLineTo(shape, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(context.lineCap).toBe('butt');
+  });
+
+  it('sets lineCap to round when caps is round', () => {
+    const context = makeContext();
+    const shape = createShape();
+    appendShapeLineStyle(shape, 2, 0x000000, 1, false, 'normal', 'round', 'round', 3);
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeLineTo(shape, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(context.lineCap).toBe('round');
+  });
+
+  it('sets lineJoin', () => {
+    const context = makeContext();
+    const shape = createShape();
+    appendShapeLineStyle(shape, 2, 0x000000, 1, false, 'normal', 'none', 'bevel', 3);
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeLineTo(shape, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(context.lineJoin).toBe('bevel');
+  });
+
+  it('sets miterLimit', () => {
+    const context = makeContext();
+    const shape = createShape();
+    appendShapeLineStyle(shape, 2, 0x000000, 1, false, 'normal', 'none', 'miter', 8);
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeLineTo(shape, 100, 0);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(context.miterLimit).toBe(8);
+  });
+});
+
+describe('defaultCanvasLineTo', () => {
+  it('calls context.lineTo', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'lineTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeMoveTo(shape, 0, 0);
+    appendShapeLineTo(shape, 100, 50);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(100, 50);
+  });
+
+  it('moves to origin when there is no current point', () => {
+    const context = makeContext();
+    const moveSpy = vi.spyOn(context, 'moveTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeLineTo(shape, 100, 50);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(moveSpy).toHaveBeenCalledWith(0, 0);
+  });
+});
+
+describe('defaultCanvasMoveTo', () => {
+  it('calls context.moveTo', () => {
+    const context = makeContext();
+    const spy = vi.spyOn(context, 'moveTo');
+    const shape = createShape();
+    appendShapeBeginFill(shape, 0xff0000);
+    appendShapeMoveTo(shape, 30, 40);
+    appendShapeLineTo(shape, 100, 40);
+    appendShapeEndFill(shape);
+    renderCanvasShapeCommands(context, shape.data.commands);
+    expect(spy).toHaveBeenCalledWith(30, 40);
+  });
+});
+
+describe('defaultCanvasShapeCommands', () => {
+  it('contains handlers for all standard shape command keys', () => {
+    const keys = [
+      'beginBitmapFill',
+      'beginFill',
+      'beginGradientFill',
+      'cubicCurveTo',
+      'curveTo',
+      'drawCircle',
+      'drawEllipse',
+      'drawPath',
+      'drawRectangle',
+      'drawRoundRectangle',
+      'endFill',
+      'lineBitmapStyle',
+      'lineGradientStyle',
+      'lineTo',
+      'lineStyle',
+      'moveTo',
+    ];
+    const registeredKeys = defaultCanvasShapeCommands.map((c) => c.key);
+    for (const key of keys) {
+      expect(registeredKeys).toContain(key);
+    }
+  });
+});

package/src/canvasShapeRegistry.test.ts

@@ -0,0 +1,42 @@
+import { getCanvasShapeCommand, registerCanvasShapeCommand, registerCanvasShapeCommands } from './canvasShapeRegistry';
+
+describe('getCanvasShapeCommand', () => {
+  it('returns undefined for an unregistered key', () => {
+    expect(getCanvasShapeCommand('__unregistered__')).toBeUndefined();
+  });
+
+  it('returns the command after registration', () => {
+    const fn = vi.fn();
+    registerCanvasShapeCommand({ key: '__test_get__' as never, draw: fn });
+    expect(getCanvasShapeCommand('__test_get__')?.draw).toBe(fn);
+  });
+});
+
+describe('registerCanvasShapeCommand', () => {
+  it('stores and retrieves a command by key', () => {
+    const fn = vi.fn();
+    registerCanvasShapeCommand({ key: '__test_register__' as never, draw: fn });
+    expect(getCanvasShapeCommand('__test_register__')?.draw).toBe(fn);
+  });
+
+  it('replaces an existing command when called again with the same key', () => {
+    const first = vi.fn();
+    const second = vi.fn();
+    registerCanvasShapeCommand({ key: '__test_replace__' as never, draw: first });
+    registerCanvasShapeCommand({ key: '__test_replace__' as never, draw: second });
+    expect(getCanvasShapeCommand('__test_replace__')?.draw).toBe(second);
+  });
+});
+
+describe('registerCanvasShapeCommands', () => {
+  it('registers all commands in the array', () => {
+    const a = vi.fn();
+    const b = vi.fn();
+    registerCanvasShapeCommands([
+      { key: '__test_arr_a__' as never, draw: a },
+      { key: '__test_arr_b__' as never, draw: b },
+    ]);
+    expect(getCanvasShapeCommand('__test_arr_a__')?.draw).toBe(a);
+    expect(getCanvasShapeCommand('__test_arr_b__')?.draw).toBe(b);
+  });
+});

package/src/canvasSprite.test.ts

@@ -0,0 +1,90 @@
+import { createImageResource } from '@flighthq/image';
+import { addNodeChild } from '@flighthq/node';
+import { getOrCreateRenderProxy2D, prepareDisplayObjectRender, registerRenderer } from '@flighthq/render';
+import { createSprite } from '@flighthq/sprite';
+import { addTextureAtlasRegion, createTextureAtlas } from '@flighthq/textureatlas';
+import { SpriteKind } from '@flighthq/types';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import { defaultCanvasSpriteRenderer, drawCanvasSprite, renderCanvasSprite } from './canvasSprite';
+
+function makeAtlas() {
+  const img = document.createElement('img') as HTMLImageElement;
+  const source = createImageResource(img);
+  const atlas = createTextureAtlas({ image: source });
+  addTextureAtlasRegion(atlas, 0, 0, 32, 32);
+  return atlas;
+}
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 800;
+  canvas.height = 400;
+  const state = createCanvasRenderState(canvas, { imageSmoothingEnabled: false });
+  registerRenderer(state, SpriteKind, defaultCanvasSpriteRenderer);
+  return state;
+}
+
+describe('drawCanvasSprite', () => {
+  it('calls drawImage when sprite has a valid atlas region', () => {
+    const atlas = makeAtlas();
+    const state = makeState();
+    const sprite = createSprite();
+    sprite.data.atlas = atlas;
+    sprite.data.id = 0;
+    prepareDisplayObjectRender(state, sprite);
+    const renderProxy = getOrCreateRenderProxy2D(state, sprite);
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasSprite(state, renderProxy);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('skips draw when atlas is null', () => {
+    const state = makeState();
+    const sprite = createSprite();
+    prepareDisplayObjectRender(state, sprite);
+    const renderProxy = getOrCreateRenderProxy2D(state, sprite);
+    const spy = vi.spyOn(state.context, 'drawImage');
+    drawCanvasSprite(state, renderProxy);
+    expect(spy).not.toHaveBeenCalled();
+  });
+});
+
+describe('renderCanvasSprite', () => {
+  it('does not throw for an empty sprite', () => {
+    const state = makeState();
+    const sprite = createSprite();
+    prepareDisplayObjectRender(state, sprite);
+    expect(() => renderCanvasSprite(state, sprite)).not.toThrow();
+  });
+
+  it('calls renderer.submit for a visible sprite with a renderer', () => {
+    const atlas = makeAtlas();
+    const state = makeState();
+    const sprite = createSprite();
+    sprite.data.atlas = atlas;
+    sprite.data.id = 0;
+    prepareDisplayObjectRender(state, sprite);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    renderCanvasSprite(state, sprite);
+
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('traverses children and draws them', () => {
+    const atlas = makeAtlas();
+    const state = makeState();
+    const parent = createSprite();
+    const child = createSprite();
+    child.data.atlas = atlas;
+    child.data.id = 0;
+    addNodeChild(parent, child);
+    prepareDisplayObjectRender(state, parent);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    renderCanvasSprite(state, parent);
+
+    expect(spy).toHaveBeenCalledOnce();
+  });
+});

package/src/canvasTextInput.test.ts

@@ -0,0 +1,67 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createRichText } from '@flighthq/text';
+import { enableTextInput, setTextInputSelection } from '@flighthq/textinput';
+import type { RichText } from '@flighthq/types';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import { drawCanvasRichText } from './canvasRichText';
+import { drawCanvasTextInputOverlay, enableCanvasTextInput } from './canvasTextInput';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  return createCanvasRenderState(canvas);
+}
+
+function makeFocusedInput(text: string): RichText {
+  const node = createRichText({ data: { text, width: 100, height: 40 } });
+  enableTextInput(node).focused = true;
+  return node;
+}
+
+describe('drawCanvasTextInputOverlay', () => {
+  it('is installed by enableCanvasTextInput and is the overlay function', () => {
+    expect(typeof drawCanvasTextInputOverlay).toBe('function');
+  });
+
+  it('draws a caret for the focused collapsed selection', () => {
+    enableCanvasTextInput();
+    const state = makeState();
+    const node = makeFocusedInput('hello');
+    setTextInputSelection(node, 2, 2);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    const spy = vi.spyOn(state.context, 'fillRect');
+
+    drawCanvasRichText(state, renderProxy);
+
+    expect(spy).toHaveBeenCalledWith(expect.any(Number), expect.any(Number), 1, expect.any(Number));
+  });
+
+  it('draws selection rectangles for the focused expanded selection', () => {
+    enableCanvasTextInput();
+    const state = makeState();
+    const node = makeFocusedInput('hello');
+    setTextInputSelection(node, 1, 4);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    const spy = vi.spyOn(state.context, 'fillRect');
+
+    drawCanvasRichText(state, renderProxy);
+
+    expect(spy).toHaveBeenCalledWith(expect.any(Number), expect.any(Number), expect.any(Number), expect.any(Number));
+  });
+});
+
+describe('enableCanvasTextInput', () => {
+  it('installs the overlay without throwing', () => {
+    expect(() => enableCanvasTextInput()).not.toThrow();
+  });
+
+  it('leaves a static RichText (no input slot) free of overlay drawing', () => {
+    enableCanvasTextInput();
+    const state = makeState();
+    const node = createRichText({ data: { text: 'plain', width: 100, height: 40 } });
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawCanvasRichText(state, renderProxy)).not.toThrow();
+  });
+});

package/src/canvasTextLabel.test.ts

@@ -0,0 +1,32 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { createTextLabel } from '@flighthq/text';
+
+import { createCanvasRenderState } from './canvasRenderState';
+import { drawCanvasTextLabel } from './canvasTextLabel';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  return createCanvasRenderState(canvas);
+}
+
+describe('drawCanvasTextLabel', () => {
+  it('does not throw when text is empty', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = '';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(() => drawCanvasTextLabel(state, renderProxy)).not.toThrow();
+  });
+
+  it('calls fillText when the text field is non-empty', () => {
+    const state = makeState();
+    const node = createTextLabel();
+    node.data.text = 'hello';
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    const spy = vi.spyOn(state.context, 'fillText');
+    drawCanvasTextLabel(state, renderProxy);
+    expect(spy).toHaveBeenCalled();
+  });
+});

package/src/canvasTextMeasure.test.ts

@@ -0,0 +1,9 @@
+import { createCanvasTextMeasure } from './canvasTextMeasure';
+
+describe('createCanvasTextMeasure', () => {
+  it('returns a measure function that reports a non-negative width', () => {
+    const measure = createCanvasTextMeasure();
+    expect(typeof measure).toBe('function');
+    expect(measure('hello', {})).toBeGreaterThanOrEqual(0);
+  });
+});