@gjsify/canvas2d 0.1.0

package/src/canvas-gradient.ts

@@ -0,0 +1,36 @@
+// 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-path.ts

@@ -0,0 +1,131 @@
+// 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;
+            }
+        }
+    }
+}

package/src/canvas-pattern.ts

@@ -0,0 +1,75 @@
+// CanvasPattern implementation backed by Cairo SurfacePattern
+// Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern
+
+import Cairo from 'cairo';
+import Gdk from 'gi://Gdk?version=4.0';
+
+/**
+ * CanvasPattern wrapping a Cairo SurfacePattern.
+ */
+export class CanvasPattern {
+    private _pattern: Cairo.SurfacePattern;
+
+    private constructor(surface: Cairo.ImageSurface, repetition: string | null) {
+        this._pattern = new Cairo.SurfacePattern(surface);
+
+        // Set extend mode based on repetition
+        // setExtend exists at runtime on SurfacePattern but is missing from GIR types
+        const pat = this._pattern as any;
+        switch (repetition) {
+            case 'repeat':
+            case '':
+            case null:
+                pat.setExtend(Cairo.Extend.REPEAT);
+                break;
+            case 'repeat-x':
+            case 'repeat-y':
+                // Cairo doesn't have separate x/y repeat — use REPEAT as approximation
+                pat.setExtend(Cairo.Extend.REPEAT);
+                break;
+            case 'no-repeat':
+                pat.setExtend(Cairo.Extend.NONE);
+                break;
+        }
+    }
+
+    /** Create a CanvasPattern from a supported image source. Returns null if unsupported. */
+    static create(image: any, repetition: string | null): CanvasPattern | null {
+        // HTMLImageElement (GdkPixbuf-backed)
+        if ('isPixbuf' in image && typeof (image as any).isPixbuf === 'function' && (image as any).isPixbuf()) {
+            const pixbuf = (image as any)._pixbuf as import('@girs/gdkpixbuf-2.0').default.Pixbuf;
+            // Create a Cairo surface from the pixbuf
+            const w = pixbuf.get_width();
+            const h = pixbuf.get_height();
+            const surface = new Cairo.ImageSurface(Cairo.Format.ARGB32, w, h);
+            const ctx = new Cairo.Context(surface);
+            Gdk.cairo_set_source_pixbuf(ctx as any, pixbuf, 0, 0);
+            ctx.paint();
+            ctx.$dispose();
+            return new CanvasPattern(surface, repetition);
+        }
+
+        // HTMLCanvasElement with a 2D context
+        if (typeof image?.getContext === 'function') {
+            const ctx2d = image.getContext('2d');
+            if (ctx2d && typeof ctx2d._getSurface === 'function') {
+                const sourceSurface = ctx2d._getSurface() as Cairo.ImageSurface;
+                const w = sourceSurface.getWidth();
+                const h = sourceSurface.getHeight();
+                const surface = new Cairo.ImageSurface(Cairo.Format.ARGB32, w, h);
+                const ctx = new Cairo.Context(surface);
+                ctx.setSourceSurface(sourceSurface, 0, 0);
+                ctx.paint();
+                ctx.$dispose();
+                return new CanvasPattern(surface, repetition);
+            }
+        }
+
+        return null;
+    }
+
+    /** @internal Get the underlying Cairo pattern for rendering. */
+    _getCairoPattern(): Cairo.SurfacePattern {
+        return this._pattern;
+    }
+}