@flighthq/displayobject-canvas 0.1.0

package/dist/canvasTextMeasure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTextMeasure.d.ts","sourceRoot":"","sources":["../src/canvasTextMeasure.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,wBAAgB,uBAAuB,IAAI,mBAAmB,CAO7D"}

package/dist/canvasTextMeasure.js

@@ -0,0 +1,15 @@
+import { computeTextFormatFontString } from '@flighthq/text';
+// Builds a TextMeasureFunction backed by a private offscreen 2D canvas — the measurement battery for
+// setTextLayoutMeasureProvider. Register it once during setup
+// (setTextLayoutMeasureProvider(createCanvasTextMeasure())) so ensureRichTextLayout can measure text
+// for metrics and autoSize bounds outside the render pass. Same canvas measureText the renderers use,
+// so the ensured layout matches what gets rasterized.
+export function createCanvasTextMeasure() {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    return (text, format) => {
+        context.font = computeTextFormatFontString(format);
+        return context.measureText(text).width;
+    };
+}
+//# sourceMappingURL=canvasTextMeasure.js.map

package/dist/canvasTextMeasure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTextMeasure.js","sourceRoot":"","sources":["../src/canvasTextMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAG7D,qGAAqG;AACrG,8DAA8D;AAC9D,qGAAqG;AACrG,sGAAsG;AACtG,sDAAsD;AACtD,MAAM,UAAU,uBAAuB;IACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAE,CAAC;IACzC,OAAO,CAAC,IAAY,EAAE,MAAkB,EAAU,EAAE;QAClD,OAAO,CAAC,IAAI,GAAG,2BAA2B,CAAC,MAAM,CAAC,CAAC;QACnD,OAAO,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IACzC,CAAC,CAAC;AACJ,CAAC"}

package/dist/canvasTilemap.d.ts

@@ -0,0 +1,4 @@
+import type { CanvasRenderState, RenderProxy2D, SpriteRenderer } from '@flighthq/types';
+export declare function drawCanvasTilemap(state: CanvasRenderState, tilemapNode: RenderProxy2D): void;
+export declare const defaultCanvasTilemapRenderer: SpriteRenderer;
+//# sourceMappingURL=canvasTilemap.d.ts.map

package/dist/canvasTilemap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTilemap.d.ts","sourceRoot":"","sources":["../src/canvasTilemap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,cAAc,EAAW,MAAM,iBAAiB,CAAC;AAIjG,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,CAwD5F;AAED,eAAO,MAAM,4BAA4B,EAAE,cAG1C,CAAC"}

package/dist/canvasTilemap.js

@@ -0,0 +1,50 @@
+import { noopRendererData } from '@flighthq/render';
+import { applyCanvasMaterial } from './canvasMaterialRegistry';
+export function drawCanvasTilemap(state, tilemapNode) {
+    const source = tilemapNode.source;
+    const { tileset, columns, rows, tiles } = source.data;
+    if (tileset === null)
+        return;
+    const atlas = tileset.atlas;
+    if (atlas === null || atlas.image === null || atlas.image.source === null)
+        return;
+    if (columns === 0 || rows === 0)
+        return;
+    state.applyBlendMode?.(state, tilemapNode.blendMode);
+    const context = state.context;
+    const image = atlas.image.source;
+    const regions = atlas.regions;
+    const numRegions = regions.length;
+    const transform = tilemapNode.transform2D;
+    const roundPixels = state.roundPixels;
+    const { tileWidth, tileHeight } = tileset;
+    context.globalAlpha = tilemapNode.alpha;
+    if (!state.allowSmoothing)
+        context.imageSmoothingEnabled = false;
+    const restoreMaterial = applyCanvasMaterial(state, tilemapNode.material);
+    // Apply the node's world transform once — tile positions are local offsets within it.
+    context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty);
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < columns; col++) {
+            const id = tiles[row * columns + col];
+            if (id < 0 || id >= numRegions)
+                continue;
+            const region = regions[id];
+            if (region.width <= 0 || region.height <= 0)
+                continue;
+            const dx = col * tileWidth;
+            const dy = row * tileHeight;
+            context.drawImage(image, region.x, region.y, region.width, region.height, roundPixels ? dx | 0 : dx, roundPixels ? dy | 0 : dy, region.width, region.height);
+        }
+    }
+    if (restoreMaterial)
+        context.restore();
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    if (!state.allowSmoothing)
+        context.imageSmoothingEnabled = true;
+}
+export const defaultCanvasTilemapRenderer = {
+    createData: noopRendererData,
+    submit: drawCanvasTilemap,
+};
+//# sourceMappingURL=canvasTilemap.js.map

package/dist/canvasTilemap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTilemap.js","sourceRoot":"","sources":["../src/canvasTilemap.ts"],"names":[],"mappings":"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"}

package/dist/canvasTransform.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasRenderState, Matrix } from '@flighthq/types';
+export declare function setCanvasTransform(state: CanvasRenderState, context: CanvasRenderingContext2D, transform: Readonly<Matrix>): void;
+//# sourceMappingURL=canvasTransform.d.ts.map

package/dist/canvasTransform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTransform.d.ts","sourceRoot":"","sources":["../src/canvasTransform.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEjE,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,iBAAiB,EACxB,OAAO,EAAE,wBAAwB,EACjC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,GAC1B,IAAI,CAaN"}

package/dist/canvasTransform.js

@@ -0,0 +1,9 @@
+export function setCanvasTransform(state, context, transform) {
+    if (state.roundPixels) {
+        context.setTransform(transform.a, transform.b, transform.c, transform.d, Math.fround(transform.tx), Math.fround(transform.ty));
+    }
+    else {
+        context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty);
+    }
+}
+//# sourceMappingURL=canvasTransform.js.map

package/dist/canvasTransform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTransform.js","sourceRoot":"","sources":["../src/canvasTransform.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,kBAAkB,CAChC,KAAwB,EACxB,OAAiC,EACjC,SAA2B;IAE3B,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;QACtB,OAAO,CAAC,YAAY,CAClB,SAAS,CAAC,CAAC,EACX,SAAS,CAAC,CAAC,EACX,SAAS,CAAC,CAAC,EACX,SAAS,CAAC,CAAC,EACX,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,EACzB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAC1B,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC;IACvG,CAAC;AACH,CAAC"}

package/dist/canvasVideo.d.ts

@@ -0,0 +1,4 @@
+import type { CanvasRenderState, DisplayObjectRenderer, RenderProxy2D } from '@flighthq/types';
+export declare function drawCanvasVideo(state: CanvasRenderState, renderProxy: RenderProxy2D): void;
+export declare const defaultCanvasVideoRenderer: DisplayObjectRenderer;
+//# sourceMappingURL=canvasVideo.d.ts.map

package/dist/canvasVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasVideo.d.ts","sourceRoot":"","sources":["../src/canvasVideo.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,aAAa,EAAS,MAAM,iBAAiB,CAAC;AAKtG,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,aAAa,GAAG,IAAI,CAiB1F;AAED,eAAO,MAAM,0BAA0B,EAAE,qBAGxC,CAAC"}

package/dist/canvasVideo.js

@@ -0,0 +1,26 @@
+import { noopRendererData } from '@flighthq/render';
+import { drawCanvasDisplayObject } from './canvasDisplayObject';
+import { setCanvasTransform } from './canvasTransform';
+export function drawCanvasVideo(state, renderProxy) {
+    drawCanvasDisplayObject(state, renderProxy);
+    const source = renderProxy.source;
+    const element = source.data.source?.element;
+    if (element !== undefined && element !== null && element.readyState >= 2) {
+        const context = state.context;
+        state.applyBlendMode?.(state, renderProxy.blendMode);
+        context.globalAlpha = renderProxy.alpha;
+        setCanvasTransform(state, context, renderProxy.transform2D);
+        if (!state.allowSmoothing || !source.data.smoothing) {
+            context.imageSmoothingEnabled = false;
+        }
+        context.drawImage(element, 0, 0, element.videoWidth, element.videoHeight);
+        if (!state.allowSmoothing || !source.data.smoothing) {
+            context.imageSmoothingEnabled = true;
+        }
+    }
+}
+export const defaultCanvasVideoRenderer = {
+    createData: noopRendererData,
+    submit: drawCanvasVideo,
+};
+//# sourceMappingURL=canvasVideo.js.map

package/dist/canvasVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasVideo.js","sourceRoot":"","sources":["../src/canvasVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,UAAU,eAAe,CAAC,KAAwB,EAAE,WAA0B;IAClF,uBAAuB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,WAAW,CAAC,MAAe,CAAC;IAC3C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5C,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC;QACzE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACrD,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC;QACxC,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpD,OAAO,CAAC,qBAAqB,GAAG,KAAK,CAAC;QACxC,CAAC;QACD,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAC1E,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpD,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC;QACvC,CAAC;IACH,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,0BAA0B,GAA0B;IAC/D,UAAU,EAAE,gBAAgB;IAC5B,MAAM,EAAE,eAAe;CACxB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+export * from './canvasBackground';
+export * from './canvasBitmap';
+export * from './canvasCache';
+export * from './canvasClip';
+export * from './canvasClipRectangle';
+export * from './canvasCSSFilterBinding';
+export * from './canvasDisplayObject';
+export * from './canvasElement';
+export * from './canvasFillPattern';
+export * from './canvasMaterialRegistry';
+export * from './canvasMaterials';
+export * from './canvasParticleEmitter';
+export * from './canvasQuadBatch';
+export * from './canvasRegistration';
+export * from './canvasRenderState';
+export * from './canvasRenderTarget';
+export * from './canvasRichText';
+export * from './canvasScale9Mapper';
+export * from './canvasScale9Shape';
+export * from './canvasShape';
+export * from './canvasShapeCommands';
+export * from './canvasShapeRegistry';
+export * from './canvasSprite';
+export * from './canvasTextInput';
+export * from './canvasTextLabel';
+export * from './canvasTextMeasure';
+export * from './canvasTilemap';
+export * from './canvasTransform';
+export * from './canvasVideo';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,30 @@
+export * from './canvasBackground';
+export * from './canvasBitmap';
+export * from './canvasCache';
+export * from './canvasClip';
+export * from './canvasClipRectangle';
+export * from './canvasCSSFilterBinding';
+export * from './canvasDisplayObject';
+export * from './canvasElement';
+export * from './canvasFillPattern';
+export * from './canvasMaterialRegistry';
+export * from './canvasMaterials';
+export * from './canvasParticleEmitter';
+export * from './canvasQuadBatch';
+export * from './canvasRegistration';
+export * from './canvasRenderState';
+export * from './canvasRenderTarget';
+export * from './canvasRichText';
+export * from './canvasScale9Mapper';
+export * from './canvasScale9Shape';
+export * from './canvasShape';
+export * from './canvasShapeCommands';
+export * from './canvasShapeRegistry';
+export * from './canvasSprite';
+export * from './canvasTextInput';
+export * from './canvasTextLabel';
+export * from './canvasTextMeasure';
+export * from './canvasTilemap';
+export * from './canvasTransform';
+export * from './canvasVideo';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@flighthq/displayobject-canvas",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/**/*.test.ts",
+    "!dist/**/*.test.js",
+    "!dist/**/*.test.d.ts",
+    "!dist/**/*.test.js.map",
+    "!dist/**/*.test.d.ts.map"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "tsc -b --clean",
+    "test": "vitest run --config vitest.config.ts",
+    "test:watch": "vitest --watch --config vitest.config.ts",
+    "prepack": "npm run clean && npm run clean:dist && npm run build",
+    "clean:dist": "tsx ../../scripts/clean-package-dist.ts"
+  },
+  "dependencies": {
+    "@flighthq/displayobject": "0.1.0",
+    "@flighthq/geometry": "0.1.0",
+    "@flighthq/materials": "0.1.0",
+    "@flighthq/node": "0.1.0",
+    "@flighthq/render": "0.1.0",
+    "@flighthq/image": "0.1.0",
+    "@flighthq/textureatlas": "0.1.0",
+    "@flighthq/tileset": "0.1.0",
+    "@flighthq/shape": "0.1.0",
+    "@flighthq/text": "0.1.0",
+    "@flighthq/textinput": "0.1.0",
+    "@flighthq/textlayout": "0.1.0",
+    "@flighthq/types": "0.1.0"
+  },
+  "devDependencies": {
+    "@flighthq/sprite": "*",
+    "typescript": "^5.3.0"
+  },
+  "description": "Canvas 2D renderer implementation",
+  "sideEffects": false
+}

package/src/canvasBackground.test.ts

@@ -0,0 +1,65 @@
+import { setRenderStateBackgroundColor } from '@flighthq/render';
+import type { CanvasRenderState } from '@flighthq/types';
+import { BlendMode } from '@flighthq/types';
+
+import { renderCanvasBackground } from './canvasBackground';
+import { createCanvasRenderState, getCanvasRenderStateRuntime } from './canvasRenderState';
+
+function makeState(): { canvas: HTMLCanvasElement; state: CanvasRenderState } {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 100;
+  const state = createCanvasRenderState(canvas);
+  return { canvas, state };
+}
+
+describe('renderCanvasBackground', () => {
+  it('calls clearRect when background alpha is 0', () => {
+    const { state } = makeState();
+    setRenderStateBackgroundColor(state, 0x00000000); // alpha = 0
+    const clearSpy = vi.spyOn(state.context, 'clearRect');
+
+    renderCanvasBackground(state);
+
+    expect(clearSpy).toHaveBeenCalledWith(0, 0, state.canvas.width, state.canvas.height);
+  });
+
+  it('calls fillRect when background has non-zero alpha', () => {
+    const { state } = makeState();
+    setRenderStateBackgroundColor(state, 0xff0000ff); // alpha = 0xff
+    const fillSpy = vi.spyOn(state.context, 'fillRect');
+
+    renderCanvasBackground(state);
+
+    expect(fillSpy).toHaveBeenCalledWith(0, 0, state.canvas.width, state.canvas.height);
+  });
+
+  it('resets transform to identity before drawing', () => {
+    const { state } = makeState();
+    const setTransformSpy = vi.spyOn(state.context, 'setTransform');
+
+    renderCanvasBackground(state);
+
+    expect(setTransformSpy).toHaveBeenCalledWith(1, 0, 0, 1, 0, 0);
+  });
+
+  it('sets globalAlpha to 1 before drawing', () => {
+    const { state } = makeState();
+    state.context.globalAlpha = 0.5;
+
+    renderCanvasBackground(state);
+
+    expect(state.context.globalAlpha).toBe(1);
+  });
+
+  it('resets to normal compositing directly, without using the blend-mode map', () => {
+    const { state } = makeState();
+    getCanvasRenderStateRuntime(state).currentBlendMode = BlendMode.Multiply;
+    state.context.globalCompositeOperation = 'multiply';
+
+    renderCanvasBackground(state);
+
+    expect(getCanvasRenderStateRuntime(state).currentBlendMode).toBe(BlendMode.Normal);
+    expect(state.context.globalCompositeOperation).toBe('source-over');
+  });
+});

package/src/canvasBitmap.test.ts

@@ -0,0 +1,92 @@
+import { createBitmap } from '@flighthq/displayobject';
+import { createRectangle } from '@flighthq/geometry';
+import { createImageResource } from '@flighthq/image';
+import { registerRenderer } from '@flighthq/render';
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import { BitmapKind } from '@flighthq/types';
+
+import { defaultCanvasBitmapRenderer, drawCanvasBitmap } from './canvasBitmap';
+import { createCanvasRenderState } from './canvasRenderState';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 200;
+  canvas.height = 200;
+  const state = createCanvasRenderState(canvas);
+  registerRenderer(state, BitmapKind, defaultCanvasBitmapRenderer);
+  return state;
+}
+
+function makeImageSource() {
+  const img = document.createElement('img') as HTMLImageElement;
+  const source = createImageResource(img);
+  source.width = 64;
+  source.height = 64;
+  return source;
+}
+
+describe('defaultCanvasBitmapRenderer', () => {
+  it('has submit and createData', () => {
+    expect(typeof defaultCanvasBitmapRenderer.submit).toBe('function');
+    expect(typeof defaultCanvasBitmapRenderer.createData).toBe('function');
+  });
+});
+
+describe('drawCanvasBitmap', () => {
+  it('calls drawImage when bitmap has a valid image source', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = makeImageSource();
+    const data = getOrCreateRenderProxy2D(state, bitmap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasBitmap(state, data);
+
+    expect(spy).toHaveBeenCalledOnce();
+  });
+
+  it('skips drawImage when image source is null', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = null;
+    const data = getOrCreateRenderProxy2D(state, bitmap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasBitmap(state, data);
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('crops to sourceRectangle when set', () => {
+    const state = makeState();
+    const bitmap = createBitmap();
+    bitmap.data.image = makeImageSource();
+    bitmap.data.sourceRectangle = createRectangle(10, 20, 32, 32);
+    const data = getOrCreateRenderProxy2D(state, bitmap);
+    const spy = vi.spyOn(state.context, 'drawImage');
+
+    drawCanvasBitmap(state, data);
+
+    expect(spy).toHaveBeenCalledOnce();
+    const args = spy.mock.calls[0] as number[];
+    expect(args[1]).toBe(10); // sx
+    expect(args[2]).toBe(20); // sy
+    expect(args[3]).toBe(32); // sw
+    expect(args[4]).toBe(32); // sh
+    expect(args[5]).toBe(0); // dx
+    expect(args[6]).toBe(0); // dy
+  });
+
+  it('disables imageSmoothingEnabled when smoothing is false', () => {
+    const state = makeState();
+    state.allowSmoothing = true;
+    const bitmap = createBitmap();
+    bitmap.data.image = makeImageSource();
+    bitmap.data.smoothing = false;
+    const data = getOrCreateRenderProxy2D(state, bitmap);
+
+    drawCanvasBitmap(state, data);
+
+    expect(state.context.imageSmoothingEnabled).toBe(true); // restored after draw
+  });
+});

package/src/canvasCSSFilterBinding.test.ts

@@ -0,0 +1,86 @@
+import { getOrCreateRenderProxy2D } from '@flighthq/render';
+import type { DisplayObject } from '@flighthq/types';
+
+import {
+  enableCanvasCssFilter,
+  getCanvasCssFilter,
+  resolveCanvasCssFilter,
+  setCanvasCssFilter,
+} from './canvasCSSFilterBinding';
+import { createCanvasRenderState } from './canvasRenderState';
+
+function makeState() {
+  const canvas = document.createElement('canvas');
+  canvas.width = 100;
+  canvas.height = 100;
+  return createCanvasRenderState(canvas);
+}
+
+describe('enableCanvasCssFilter', () => {
+  it('installs the CSS filter resolver', () => {
+    const state = makeState();
+    expect(state.canvasCssFilterResolver).toBeNull();
+    enableCanvasCssFilter(state);
+    expect(state.canvasCssFilterResolver).toBe(resolveCanvasCssFilter);
+  });
+});
+
+describe('getCanvasCssFilter', () => {
+  it('returns the filter bound to a render node', () => {
+    const state = makeState();
+    const node = {} as DisplayObject;
+    setCanvasCssFilter(state, node, 'blur(4px)');
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getCanvasCssFilter(renderProxy)).toBe('blur(4px)');
+  });
+
+  it('returns undefined for a render node with no binding', () => {
+    const state = makeState();
+    const renderProxy = getOrCreateRenderProxy2D(state, {} as DisplayObject);
+    expect(getCanvasCssFilter(renderProxy)).toBeUndefined();
+  });
+});
+
+describe('resolveCanvasCssFilter', () => {
+  it('returns null when no filter is set', () => {
+    const state = makeState();
+    const renderProxy = getOrCreateRenderProxy2D(state, {} as DisplayObject);
+    expect(resolveCanvasCssFilter(state, renderProxy)).toBeNull();
+  });
+
+  it('returns the bound filter', () => {
+    const state = makeState();
+    const node = {} as DisplayObject;
+    setCanvasCssFilter(state, node, 'grayscale(1)');
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(resolveCanvasCssFilter(state, renderProxy)).toBe('grayscale(1)');
+  });
+});
+
+describe('setCanvasCssFilter', () => {
+  it('stores a filter keyed by the per-state render node', () => {
+    const state = makeState();
+    const node = {} as DisplayObject;
+    setCanvasCssFilter(state, node, 'blur(2px)');
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getCanvasCssFilter(renderProxy)).toBe('blur(2px)');
+  });
+
+  it('clears the binding when passed null', () => {
+    const state = makeState();
+    const node = {} as DisplayObject;
+    setCanvasCssFilter(state, node, 'blur(2px)');
+    setCanvasCssFilter(state, node, null);
+    const renderProxy = getOrCreateRenderProxy2D(state, node);
+    expect(getCanvasCssFilter(renderProxy)).toBeUndefined();
+  });
+
+  it('does not leak a binding across render states', () => {
+    const a = makeState();
+    const b = makeState();
+    const node = {} as DisplayObject;
+    setCanvasCssFilter(a, node, 'blur(2px)');
+    expect(getCanvasCssFilter(getOrCreateRenderProxy2D(b, node))).toBeUndefined();
+    expect(getCanvasCssFilter(getOrCreateRenderProxy2D(a, node))).toBe('blur(2px)');
+  });
+});