@gjsify/canvas2d-core 0.3.21 → 0.4.3

package/src/canvas-drawimage.spec.ts

@@ -1,334 +0,0 @@
-// Canvas 2D drawImage tests — verifies the full 3/5/9-argument forms,
-// transform composition, cross-canvas sourcing, and the critical
-// imageSmoothingEnabled pixel-art path (Cairo NEAREST filter lock).
-//
-// Ported from refs/wpt/html/canvas/element/drawing-images-to-the-canvas/
-//   2d.drawImage.canvas.html, .5arg.html, .9arg.basic.html,
-//   .negativedest.html, .negativedir.html, .transform.html,
-//   .alpha.html, .self.1.html, .zerosource.html
-// Plus refs/wpt/html/canvas/element/manual/image-smoothing/imagesmoothing.html
-// Original: Copyright (c) Web Platform Tests contributors. 3-Clause BSD.
-// Reimplemented for GJS using @gjsify/canvas2d-core + @gjsify/unit.
-
-import { describe, it, expect } from '@gjsify/unit';
-import { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-
-function makeCtx(width = 50, height = 50): CanvasRenderingContext2D {
-    const canvas = { width, height };
-    return new CanvasRenderingContext2D(canvas);
-}
-
-/**
- * Create a test image as an HTMLCanvasElement-like object with known pixel
- * content. Works through the getContext('2d') branch of _getDrawImageSource
- * (canvas-rendering-context-2d.ts:822-834), avoiding the need for PNG
- * fixtures on disk.
- */
-function createTestImage(
-    width: number,
-    height: number,
-    draw: (ctx: CanvasRenderingContext2D) => void,
-): any {
-    const ctx = makeCtx(width, height);
-    draw(ctx);
-    return {
-        width,
-        height,
-        getContext: (id: string) => (id === '2d' ? ctx : null),
-    };
-}
-
-/** Assert pixel RGBA within tolerance (default ±2 per channel). */
-function assertPixel(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    r: number,
-    g: number,
-    b: number,
-    a: number,
-    tolerance = 2,
-): void {
-    const data = ctx.getImageData(x, y, 1, 1).data;
-    expect(Math.abs(data[0] - r) <= tolerance).toBe(true);
-    expect(Math.abs(data[1] - g) <= tolerance).toBe(true);
-    expect(Math.abs(data[2] - b) <= tolerance).toBe(true);
-    expect(Math.abs(data[3] - a) <= tolerance).toBe(true);
-}
-
-function assertPixelExact(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    r: number,
-    g: number,
-    b: number,
-    a: number,
-): void {
-    const data = ctx.getImageData(x, y, 1, 1).data;
-    expect(data[0]).toBe(r);
-    expect(data[1]).toBe(g);
-    expect(data[2]).toBe(b);
-    expect(data[3]).toBe(a);
-}
-
-export default async () => {
-    await describe('CanvasRenderingContext2D — drawImage', async () => {
-
-        await describe('3-argument form: drawImage(image, dx, dy)', async () => {
-            await it('draws a full canvas source at the given destination', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(30, 30);
-                dst.drawImage(src, 5, 5);
-                // Outside the drawn region → transparent
-                assertPixel(dst, 2, 2, 0, 0, 0, 0);
-                // Inside the drawn region → red
-                assertPixel(dst, 8, 8, 255, 0, 0, 255);
-                assertPixel(dst, 14, 14, 255, 0, 0, 255);
-                // Right at the edge of the drawn region
-                assertPixel(dst, 20, 20, 0, 0, 0, 0);
-            });
-        });
-
-        await describe('5-argument form: drawImage(image, dx, dy, dw, dh)', async () => {
-            await it('scales the source to the destination rectangle', async () => {
-                const src = createTestImage(4, 4, (c) => {
-                    c.fillStyle = 'rgb(0, 255, 0)';
-                    c.fillRect(0, 0, 4, 4);
-                });
-                const dst = makeCtx(40, 40);
-                dst.drawImage(src, 10, 10, 20, 20);
-                // Pixel well inside the 20×20 destination region → green
-                assertPixel(dst, 20, 20, 0, 255, 0, 255);
-                // Pixel outside the destination region → transparent
-                assertPixel(dst, 5, 5, 0, 0, 0, 0);
-            });
-        });
-
-        await describe('9-argument form: drawImage(image, sx,sy,sw,sh, dx,dy,dw,dh)', async () => {
-            await it('crops the source region and scales to destination', async () => {
-                // Source: 20x20 with left half red, right half blue
-                const src = createTestImage(20, 20, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';
-                    c.fillRect(0, 0, 10, 20);
-                    c.fillStyle = 'rgb(0, 0, 255)';
-                    c.fillRect(10, 0, 10, 20);
-                });
-                const dst = makeCtx(40, 40);
-                // Take only the right (blue) half of the source and scale to 30x30
-                dst.drawImage(src, 10, 0, 10, 20, 5, 5, 30, 30);
-                assertPixel(dst, 15, 20, 0, 0, 255, 255);
-                assertPixel(dst, 30, 20, 0, 0, 255, 255);
-                // Outside destination → still transparent
-                assertPixel(dst, 2, 2, 0, 0, 0, 0);
-            });
-        });
-
-        await describe('drawImage respects current transform', async () => {
-            await it('translate shifts the destination', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'rgb(255, 255, 0)';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(30, 30);
-                dst.translate(10, 10);
-                dst.drawImage(src, 0, 0);
-                // Yellow should now appear at the translated origin
-                assertPixel(dst, 15, 15, 255, 255, 0, 255);
-                assertPixel(dst, 5, 5, 0, 0, 0, 0);
-            });
-
-            await it('save/restore isolates drawImage transforms', async () => {
-                const src = createTestImage(5, 5, (c) => {
-                    c.fillStyle = 'rgb(100, 100, 100)';
-                    c.fillRect(0, 0, 5, 5);
-                });
-                const dst = makeCtx(30, 30);
-                dst.save();
-                dst.translate(20, 20);
-                dst.drawImage(src, 0, 0);
-                dst.restore();
-                // After restore, drawImage at 0,0 goes to the origin
-                dst.drawImage(src, 0, 0);
-                // Both regions should contain grey pixels
-                assertPixel(dst, 2, 2, 100, 100, 100, 255);
-                assertPixel(dst, 22, 22, 100, 100, 100, 255);
-            });
-        });
-
-        await describe('drawImage with globalAlpha', async () => {
-            await it('premultiplies globalAlpha into the source color', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(30, 30);
-                dst.globalAlpha = 0.5;
-                dst.drawImage(src, 10, 10);
-                // Sample well inside the destination rect to avoid bilinear
-                // edge bleeding. Canvas 2D spec: getImageData returns
-                // non-premultiplied RGBA, so red stays 255 while alpha
-                // becomes ~128. Tolerance ±5 for Cairo's rounding.
-                const data = dst.getImageData(15, 15, 1, 1).data;
-                expect(data[0]).toBe(255);
-                expect(data[1]).toBe(0);
-                expect(data[2]).toBe(0);
-                expect(data[3] > 120 && data[3] < 135).toBe(true);
-            });
-        });
-
-        await describe('drawImage — zero-size and edge cases', async () => {
-            await it('drawImage with 0-width source is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                // Pre-fill destination to check nothing was overwritten
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                dst.drawImage(src, 0, 0, 0, 10, 5, 5, 10, 10);
-                // Pixel should still be the pre-fill blue
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-
-            await it('drawImage with 0-height destination is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                dst.drawImage(src, 5, 5, 10, 0);
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-
-            // Regression: Excalibur's Loader.onDraw computes its overlay
-            // dimensions from `engine.canvasWidth / engine.pixelRatio`. When
-            // the engine fixture isn't fully wired (jelly-jumper Canvas 2D
-            // fallback path before the camera target binds), pixelRatio
-            // can be 0, propagating Infinity into the dy / dh slots. The
-            // older guard only matched literal 0; the new guard rejects
-            // any non-finite coordinate so Cairo never sees a non-invertible
-            // matrix. Without this fix the showcase fataled mid-frame and
-            // Excalibur's clock stopped, leaving the background unrendered.
-            await it('drawImage with Infinity destination y is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                // 9-arg form with Infinity in dy — must not throw and must
-                // leave the destination untouched.
-                dst.drawImage(src, 0, 0, 10, 10, 0, Infinity, 10, 10);
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-
-            await it('drawImage with NaN destination height is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                dst.drawImage(src, 0, 0, 10, 10, 5, 5, 10, NaN);
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-
-            await it('drawImage with -Infinity source width is a no-op', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'red';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                dst.fillStyle = 'blue';
-                dst.fillRect(0, 0, 20, 20);
-                dst.drawImage(src, 0, 0, -Infinity, 10, 5, 5, 10, 10);
-                assertPixel(dst, 10, 10, 0, 0, 255, 255);
-            });
-        });
-
-        await describe('drawImage — imageSmoothingEnabled pixel-art lock', async () => {
-            // Regression for the Cairo Filter.NEAREST fix in drawImage.
-            // When imageSmoothingEnabled=false, scaling a 2×2 image by 10 must
-            // produce a sharp checker pattern. Otherwise Cairo's default
-            // BILINEAR filter blends the pixels and pixel-art games render
-            // blurry.
-
-            await it('imageSmoothingEnabled=false: exact nearest-neighbor scale', async () => {
-                // 2×2 image: red (top-left), green (top-right),
-                //            blue (bottom-left), white (bottom-right).
-                const src = createTestImage(2, 2, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';   c.fillRect(0, 0, 1, 1);
-                    c.fillStyle = 'rgb(0, 255, 0)';   c.fillRect(1, 0, 1, 1);
-                    c.fillStyle = 'rgb(0, 0, 255)';   c.fillRect(0, 1, 1, 1);
-                    c.fillStyle = 'rgb(255, 255, 255)'; c.fillRect(1, 1, 1, 1);
-                });
-                const dst = makeCtx(20, 20);
-                dst.imageSmoothingEnabled = false;
-                dst.drawImage(src, 0, 0, 20, 20);
-
-                // With NEAREST, each source pixel fills a 10×10 quadrant in
-                // the destination without color bleeding. Pixel (5,5) should
-                // be exactly red, (15,5) exactly green, etc.
-                assertPixelExact(dst, 5, 5, 255, 0, 0, 255);
-                assertPixelExact(dst, 15, 5, 0, 255, 0, 255);
-                assertPixelExact(dst, 5, 15, 0, 0, 255, 255);
-                assertPixelExact(dst, 15, 15, 255, 255, 255, 255);
-            });
-
-            await it('imageSmoothingEnabled=true: bilinear bleeding at boundaries', async () => {
-                const src = createTestImage(2, 2, (c) => {
-                    c.fillStyle = 'rgb(255, 0, 0)';   c.fillRect(0, 0, 1, 1);
-                    c.fillStyle = 'rgb(0, 255, 0)';   c.fillRect(1, 0, 1, 1);
-                    c.fillStyle = 'rgb(0, 0, 255)';   c.fillRect(0, 1, 1, 1);
-                    c.fillStyle = 'rgb(255, 255, 255)'; c.fillRect(1, 1, 1, 1);
-                });
-                const dst = makeCtx(20, 20);
-                dst.imageSmoothingEnabled = true;
-                dst.drawImage(src, 0, 0, 20, 20);
-
-                // With bilinear, pixel at the boundary between red and green
-                // (around x=10, y=5) is a mix — NOT exactly red and NOT
-                // exactly green. This test proves the filter is applied.
-                const boundary = dst.getImageData(9, 5, 1, 1).data;
-                const isExactRed = boundary[0] === 255 && boundary[1] === 0;
-                const isExactGreen = boundary[0] === 0 && boundary[1] === 255;
-                // Neither pure red nor pure green → bilinear blending is active
-                expect(isExactRed).toBe(false);
-                expect(isExactGreen).toBe(false);
-            });
-        });
-
-        await describe('drawImage with composite operation', async () => {
-            // Note: the 'copy' operator in Canvas spec wipes the ENTIRE
-            // destination, not just the drawImage rect. Our implementation
-            // clips to the destination rect for paint(), so the "wipe
-            // outside" semantic is NOT implemented here — that would require
-            // a separate clearRect path. We only verify that the inside
-            // pixel is correctly replaced.
-            await it('drawImage honors globalCompositeOperation=source-over', async () => {
-                const src = createTestImage(10, 10, (c) => {
-                    c.fillStyle = 'rgb(0, 255, 0)';
-                    c.fillRect(0, 0, 10, 10);
-                });
-                const dst = makeCtx(20, 20);
-                // Pre-fill with red
-                dst.fillStyle = 'rgb(255, 0, 0)';
-                dst.fillRect(0, 0, 20, 20);
-                // source-over: green opaque pixel replaces red in the drawn region
-                dst.drawImage(src, 5, 5);
-                assertPixel(dst, 10, 10, 0, 255, 0, 255);
-                // Outside drawn region → still red (unaffected)
-                assertPixel(dst, 1, 1, 255, 0, 0, 255);
-            });
-        });
-    });
-};

package/src/canvas-gradient.ts

@@ -1,36 +0,0 @@
-// CanvasGradient implementation backed by Cairo gradient patterns
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient
-
-import Cairo from 'cairo';
-import { parseColor } from './color.js';
-
-/**
- * CanvasGradient wrapping a Cairo LinearGradient or RadialGradient.
- */
-export class CanvasGradient {
-    private _pattern: Cairo.LinearGradient | Cairo.RadialGradient;
-
-    constructor(
-        type: 'linear' | 'radial',
-        x0: number, y0: number,
-        x1: number, y1: number,
-        r0?: number, r1?: number,
-    ) {
-        if (type === 'radial') {
-            this._pattern = new Cairo.RadialGradient(x0, y0, r0!, x1, y1, r1!);
-        } else {
-            this._pattern = new Cairo.LinearGradient(x0, y0, x1, y1);
-        }
-    }
-
-    addColorStop(offset: number, color: string): void {
-        const parsed = parseColor(color);
-        if (!parsed) return;
-        this._pattern.addColorStopRGBA(offset, parsed.r, parsed.g, parsed.b, parsed.a);
-    }
-
-    /** @internal Get the underlying Cairo pattern for rendering. */
-    _getCairoPattern(): Cairo.LinearGradient | Cairo.RadialGradient {
-        return this._pattern;
-    }
-}

package/src/canvas-imagedata.spec.ts

@@ -1,150 +0,0 @@
-// Canvas 2D ImageData tests — createImageData, getImageData, putImageData
-// round-trip. Verifies pixel extraction from Cairo surfaces and the
-// RGBA byte order expected by consumers.
-//
-// Ported from refs/wpt/html/canvas/element/pixel-manipulation/
-//   2d.imageData.{create1.basic,create2.{basic,initial},get.{order.rgb,
-//   source.negative,source.outside},put.basic.rgba,put.alpha,put.dirty*}.html
-// Original: Copyright (c) Web Platform Tests contributors. 3-Clause BSD.
-// Reimplemented for GJS using @gjsify/canvas2d-core + @gjsify/unit.
-
-import { describe, it, expect } from '@gjsify/unit';
-import { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-
-function makeCtx(width = 20, height = 20): CanvasRenderingContext2D {
-    const canvas = { width, height };
-    return new CanvasRenderingContext2D(canvas);
-}
-
-export default async () => {
-    await describe('CanvasRenderingContext2D — ImageData', async () => {
-
-        await describe('createImageData', async () => {
-            await it('createImageData(w, h) returns an RGBA Uint8ClampedArray of w*h*4 bytes', async () => {
-                const ctx = makeCtx();
-                const img = ctx.createImageData(10, 5);
-                expect(img.width).toBe(10);
-                expect(img.height).toBe(5);
-                expect(img.data.length).toBe(10 * 5 * 4);
-            });
-
-            await it('createImageData data is initialized to transparent black', async () => {
-                const ctx = makeCtx();
-                const img = ctx.createImageData(4, 4);
-                for (let i = 0; i < img.data.length; i++) {
-                    expect(img.data[i]).toBe(0);
-                }
-            });
-
-            await it('createImageData(imageData) returns a clone with matching dimensions', async () => {
-                const ctx = makeCtx();
-                const src = ctx.createImageData(8, 3);
-                const clone = ctx.createImageData(src);
-                expect(clone.width).toBe(8);
-                expect(clone.height).toBe(3);
-                expect(clone.data.length).toBe(8 * 3 * 4);
-            });
-        });
-
-        await describe('getImageData', async () => {
-            await it('returns correct RGBA for a filled region', async () => {
-                const ctx = makeCtx(10, 10);
-                ctx.fillStyle = 'rgb(200, 100, 50)';
-                ctx.fillRect(0, 0, 10, 10);
-                const data = ctx.getImageData(5, 5, 1, 1).data;
-                expect(data[0]).toBe(200);
-                expect(data[1]).toBe(100);
-                expect(data[2]).toBe(50);
-                expect(data[3]).toBe(255);
-            });
-
-            await it('returns a full RGBA grid for a multi-pixel region', async () => {
-                const ctx = makeCtx(4, 4);
-                ctx.fillStyle = 'rgb(10, 20, 30)';
-                ctx.fillRect(0, 0, 4, 4);
-                const img = ctx.getImageData(0, 0, 4, 4);
-                expect(img.width).toBe(4);
-                expect(img.height).toBe(4);
-                expect(img.data.length).toBe(4 * 4 * 4);
-                // All 16 pixels should be (10, 20, 30, 255)
-                for (let i = 0; i < 16; i++) {
-                    expect(img.data[i * 4 + 0]).toBe(10);
-                    expect(img.data[i * 4 + 1]).toBe(20);
-                    expect(img.data[i * 4 + 2]).toBe(30);
-                    expect(img.data[i * 4 + 3]).toBe(255);
-                }
-            });
-
-            await it('preserves byte order across fillStyle color channels', async () => {
-                const ctx = makeCtx(3, 1);
-                ctx.fillStyle = 'rgb(255, 0, 0)';
-                ctx.fillRect(0, 0, 1, 1);
-                ctx.fillStyle = 'rgb(0, 255, 0)';
-                ctx.fillRect(1, 0, 1, 1);
-                ctx.fillStyle = 'rgb(0, 0, 255)';
-                ctx.fillRect(2, 0, 1, 1);
-                const data = ctx.getImageData(0, 0, 3, 1).data;
-                // Pixel 0: red
-                expect(data[0]).toBe(255);
-                expect(data[1]).toBe(0);
-                expect(data[2]).toBe(0);
-                // Pixel 1: green
-                expect(data[4]).toBe(0);
-                expect(data[5]).toBe(255);
-                expect(data[6]).toBe(0);
-                // Pixel 2: blue
-                expect(data[8]).toBe(0);
-                expect(data[9]).toBe(0);
-                expect(data[10]).toBe(255);
-            });
-        });
-
-        await describe('putImageData', async () => {
-            await it('roundtrips get → put → get unchanged', async () => {
-                const ctx = makeCtx(10, 10);
-                ctx.fillStyle = 'rgb(77, 88, 99)';
-                ctx.fillRect(0, 0, 10, 10);
-                const first = ctx.getImageData(0, 0, 10, 10);
-                ctx.clearRect(0, 0, 10, 10);
-                ctx.putImageData(first, 0, 0);
-                const second = ctx.getImageData(5, 5, 1, 1).data;
-                expect(second[0]).toBe(77);
-                expect(second[1]).toBe(88);
-                expect(second[2]).toBe(99);
-                expect(second[3]).toBe(255);
-            });
-
-            await it('putImageData ignores globalAlpha (spec)', async () => {
-                const ctx = makeCtx(10, 10);
-                ctx.fillStyle = 'rgb(100, 100, 100)';
-                ctx.fillRect(0, 0, 10, 10);
-                const src = ctx.getImageData(0, 0, 10, 10);
-                ctx.clearRect(0, 0, 10, 10);
-                ctx.globalAlpha = 0.1;
-                ctx.putImageData(src, 0, 0);
-                // putImageData writes raw pixels — globalAlpha has no effect.
-                const after = ctx.getImageData(5, 5, 1, 1).data;
-                expect(after[0]).toBe(100);
-                expect(after[3]).toBe(255);
-            });
-
-            await it('putImageData ignores globalCompositeOperation (spec: always SOURCE)', async () => {
-                const ctx = makeCtx(10, 10);
-                ctx.fillStyle = 'rgb(0, 255, 0)';
-                ctx.fillRect(0, 0, 10, 10);
-                const src = ctx.getImageData(0, 0, 10, 10);
-                // Re-fill the canvas with red, then putImageData the green data
-                // under a non-default composite.
-                ctx.fillStyle = 'rgb(255, 0, 0)';
-                ctx.fillRect(0, 0, 10, 10);
-                ctx.globalCompositeOperation = 'destination-over';
-                ctx.putImageData(src, 0, 0);
-                // Spec: putImageData uses SOURCE → green replaces red.
-                const data = ctx.getImageData(5, 5, 1, 1).data;
-                expect(data[0]).toBe(0);
-                expect(data[1]).toBe(255);
-                expect(data[2]).toBe(0);
-            });
-        });
-    });
-};

package/src/canvas-path.ts

@@ -1,131 +0,0 @@
-// Path2D implementation for Canvas 2D context
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/Path2D
-// Records path operations and replays them on a Cairo context.
-
-import { quadraticToCubic, cairoRoundRect } from './cairo-utils.js';
-
-/** A recorded path operation. */
-type PathOp =
-    | { type: 'moveTo'; x: number; y: number }
-    | { type: 'lineTo'; x: number; y: number }
-    | { type: 'closePath' }
-    | { type: 'bezierCurveTo'; cp1x: number; cp1y: number; cp2x: number; cp2y: number; x: number; y: number }
-    | { type: 'quadraticCurveTo'; cpx: number; cpy: number; x: number; y: number }
-    | { type: 'arc'; x: number; y: number; radius: number; startAngle: number; endAngle: number; ccw: boolean }
-    | { type: 'ellipse'; x: number; y: number; rx: number; ry: number; rotation: number; startAngle: number; endAngle: number; ccw: boolean }
-    | { type: 'rect'; x: number; y: number; w: number; h: number }
-    | { type: 'roundRect'; x: number; y: number; w: number; h: number; radii: number | number[] };
-
-/**
- * Path2D records path operations for later replay on a CanvasRenderingContext2D.
- */
-export class Path2D {
-    /** @internal Recorded operations */
-    _ops: PathOp[] = [];
-
-    constructor(pathOrSvg?: Path2D | string) {
-        if (pathOrSvg instanceof Path2D) {
-            this._ops = [...pathOrSvg._ops];
-        }
-        // SVG path string parsing is not implemented (complex, rarely needed)
-    }
-
-    addPath(path: Path2D): void {
-        this._ops.push(...path._ops);
-    }
-
-    moveTo(x: number, y: number): void {
-        this._ops.push({ type: 'moveTo', x, y });
-    }
-
-    lineTo(x: number, y: number): void {
-        this._ops.push({ type: 'lineTo', x, y });
-    }
-
-    closePath(): void {
-        this._ops.push({ type: 'closePath' });
-    }
-
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void {
-        this._ops.push({ type: 'bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y });
-    }
-
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void {
-        this._ops.push({ type: 'quadraticCurveTo', cpx, cpy, x, y });
-    }
-
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise = false): void {
-        this._ops.push({ type: 'arc', x, y, radius, startAngle, endAngle, ccw: counterclockwise });
-    }
-
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise = false): void {
-        if (radiusX < 0 || radiusY < 0) throw new RangeError('The radii provided are negative');
-        this._ops.push({ type: 'ellipse', x, y, rx: radiusX, ry: radiusY, rotation, startAngle, endAngle, ccw: counterclockwise });
-    }
-
-    rect(x: number, y: number, w: number, h: number): void {
-        this._ops.push({ type: 'rect', x, y, w, h });
-    }
-
-    roundRect(x: number, y: number, w: number, h: number, radii: number | number[] = 0): void {
-        this._ops.push({ type: 'roundRect', x, y, w, h, radii });
-    }
-
-    /**
-     * @internal Replay all recorded path operations onto a Cairo context.
-     */
-    _replayOnCairo(ctx: import('cairo').default.Context): void {
-        let lastX = 0, lastY = 0;
-
-        for (const op of this._ops) {
-            switch (op.type) {
-                case 'moveTo':
-                    ctx.moveTo(op.x, op.y);
-                    lastX = op.x; lastY = op.y;
-                    break;
-                case 'lineTo':
-                    ctx.lineTo(op.x, op.y);
-                    lastX = op.x; lastY = op.y;
-                    break;
-                case 'closePath':
-                    ctx.closePath();
-                    break;
-                case 'bezierCurveTo':
-                    ctx.curveTo(op.cp1x, op.cp1y, op.cp2x, op.cp2y, op.x, op.y);
-                    lastX = op.x; lastY = op.y;
-                    break;
-                case 'quadraticCurveTo': {
-                    const { cp1x, cp1y, cp2x, cp2y } = quadraticToCubic(lastX, lastY, op.cpx, op.cpy, op.x, op.y);
-                    ctx.curveTo(cp1x, cp1y, cp2x, cp2y, op.x, op.y);
-                    lastX = op.x; lastY = op.y;
-                    break;
-                }
-                case 'arc':
-                    if (op.ccw) {
-                        ctx.arcNegative(op.x, op.y, op.radius, op.startAngle, op.endAngle);
-                    } else {
-                        ctx.arc(op.x, op.y, op.radius, op.startAngle, op.endAngle);
-                    }
-                    break;
-                case 'ellipse':
-                    ctx.save();
-                    ctx.translate(op.x, op.y);
-                    ctx.rotate(op.rotation);
-                    ctx.scale(op.rx, op.ry);
-                    if (op.ccw) {
-                        ctx.arcNegative(0, 0, 1, op.startAngle, op.endAngle);
-                    } else {
-                        ctx.arc(0, 0, 1, op.startAngle, op.endAngle);
-                    }
-                    ctx.restore();
-                    break;
-                case 'rect':
-                    ctx.rectangle(op.x, op.y, op.w, op.h);
-                    break;
-                case 'roundRect':
-                    cairoRoundRect(ctx, op.x, op.y, op.w, op.h, op.radii);
-                    break;
-            }
-        }
-    }
-}