@gjsify/canvas2d 0.1.0

package/README.md

@@ -0,0 +1,33 @@
+# @gjsify/canvas2d
+
+GJS implementation of CanvasRenderingContext2D using Cairo and PangoCairo. Provides Canvas2DWidget extending Gtk.DrawingArea.
+
+Part of the [gjsify](https://github.com/gjsify/gjsify) project — Node.js and Web APIs for GJS (GNOME JavaScript).
+
+## Installation
+
+```bash
+npm install @gjsify/canvas2d
+# or
+yarn add @gjsify/canvas2d
+```
+
+## Usage
+
+```typescript
+import { Canvas2DWidget } from '@gjsify/canvas2d';
+
+const widget = new Canvas2DWidget();
+widget.installGlobals();
+
+widget.onReady((canvas, ctx) => {
+  ctx.fillStyle = 'red';
+  ctx.fillRect(0, 0, 100, 100);
+});
+
+window.set_child(widget);
+```
+
+## License
+
+MIT

package/lib/esm/cairo-utils.js

@@ -0,0 +1,172 @@
+function quadraticToCubic(cx, cy, cpx, cpy, x, y) {
+  return {
+    cp1x: cx + 2 / 3 * (cpx - cx),
+    cp1y: cy + 2 / 3 * (cpy - cy),
+    cp2x: x + 2 / 3 * (cpx - x),
+    cp2y: y + 2 / 3 * (cpy - y)
+  };
+}
+function computeArcTo(x0, y0, x1, y1, x2, y2, radius) {
+  const dx0 = x0 - x1;
+  const dy0 = y0 - y1;
+  const dx1 = x2 - x1;
+  const dy1 = y2 - y1;
+  const len0 = Math.sqrt(dx0 * dx0 + dy0 * dy0);
+  const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+  if (len0 === 0 || len1 === 0) return null;
+  const ux0 = dx0 / len0;
+  const uy0 = dy0 / len0;
+  const ux1 = dx1 / len1;
+  const uy1 = dy1 / len1;
+  const cross = ux0 * uy1 - uy0 * ux1;
+  if (Math.abs(cross) < 1e-10) return null;
+  const dot = ux0 * ux1 + uy0 * uy1;
+  const halfAngle = Math.acos(Math.max(-1, Math.min(1, dot))) / 2;
+  const tanDist = radius / Math.tan(halfAngle);
+  const tx0 = x1 + ux0 * tanDist;
+  const ty0 = y1 + uy0 * tanDist;
+  const tx1 = x1 + ux1 * tanDist;
+  const ty1 = y1 + uy1 * tanDist;
+  const centerDist = radius / Math.sin(halfAngle);
+  const bisectX = (ux0 + ux1) / 2;
+  const bisectY = (uy0 + uy1) / 2;
+  const bisectLen = Math.sqrt(bisectX * bisectX + bisectY * bisectY);
+  const cx = x1 + bisectX / bisectLen * centerDist;
+  const cy = y1 + bisectY / bisectLen * centerDist;
+  const startAngle = Math.atan2(ty0 - cy, tx0 - cx);
+  const endAngle = Math.atan2(ty1 - cy, tx1 - cx);
+  const counterclockwise = cross > 0;
+  return { tx0, ty0, tx1, ty1, cx, cy, startAngle, endAngle, counterclockwise };
+}
+function cairoArcTo(ctx, x0, y0, x1, y1, x2, y2, radius) {
+  const result = computeArcTo(x0, y0, x1, y1, x2, y2, radius);
+  if (!result) {
+    ctx.lineTo(x1, y1);
+    return;
+  }
+  const { tx0, ty0, cx, cy, startAngle, endAngle, counterclockwise } = result;
+  ctx.lineTo(tx0, ty0);
+  if (counterclockwise) {
+    ctx.arcNegative(cx, cy, radius, startAngle, endAngle);
+  } else {
+    ctx.arc(cx, cy, radius, startAngle, endAngle);
+  }
+}
+function cairoEllipse(ctx, x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(rotation);
+  ctx.scale(radiusX, radiusY);
+  if (counterclockwise) {
+    ctx.arcNegative(0, 0, 1, startAngle, endAngle);
+  } else {
+    ctx.arc(0, 0, 1, startAngle, endAngle);
+  }
+  ctx.restore();
+}
+function cairoRoundRect(ctx, x, y, w, h, radii) {
+  let tl, tr, br, bl;
+  if (typeof radii === "number") {
+    tl = tr = br = bl = radii;
+  } else if (radii.length === 1) {
+    tl = tr = br = bl = radii[0];
+  } else if (radii.length === 2) {
+    tl = br = radii[0];
+    tr = bl = radii[1];
+  } else if (radii.length === 3) {
+    tl = radii[0];
+    tr = bl = radii[1];
+    br = radii[2];
+  } else {
+    tl = radii[0];
+    tr = radii[1];
+    br = radii[2];
+    bl = radii[3];
+  }
+  const maxR = Math.min(w / 2, h / 2);
+  tl = Math.min(tl, maxR);
+  tr = Math.min(tr, maxR);
+  br = Math.min(br, maxR);
+  bl = Math.min(bl, maxR);
+  const PI_2 = Math.PI / 2;
+  ctx.newSubPath();
+  ctx.arc(x + tl, y + tl, tl, Math.PI, Math.PI + PI_2);
+  ctx.arc(x + w - tr, y + tr, tr, -PI_2, 0);
+  ctx.arc(x + w - br, y + h - br, br, 0, PI_2);
+  ctx.arc(x + bl, y + h - bl, bl, PI_2, Math.PI);
+  ctx.closePath();
+}
+const COMPOSITE_OP_MAP = {
+  "source-over": 2,
+  // OVER
+  "source-in": 5,
+  // IN
+  "source-out": 6,
+  // OUT
+  "source-atop": 7,
+  // ATOP
+  "destination-over": 8,
+  // DEST_OVER
+  "destination-in": 9,
+  // DEST_IN
+  "destination-out": 10,
+  // DEST_OUT
+  "destination-atop": 11,
+  // DEST_ATOP
+  "lighter": 12,
+  // ADD
+  "copy": 1,
+  // SOURCE
+  "xor": 13,
+  // XOR
+  "multiply": 14,
+  // MULTIPLY
+  "screen": 15,
+  // SCREEN
+  "overlay": 16,
+  // OVERLAY
+  "darken": 17,
+  // DARKEN
+  "lighten": 18,
+  // LIGHTEN
+  "color-dodge": 19,
+  // COLOR_DODGE
+  "color-burn": 20,
+  // COLOR_BURN
+  "hard-light": 21,
+  // HARD_LIGHT
+  "soft-light": 22,
+  // SOFT_LIGHT
+  "difference": 23,
+  // DIFFERENCE
+  "exclusion": 24,
+  // EXCLUSION
+  "hue": 25,
+  // HSL_HUE
+  "saturation": 26,
+  // HSL_SATURATION
+  "color": 27,
+  // HSL_COLOR
+  "luminosity": 28
+  // HSL_LUMINOSITY
+};
+const LINE_CAP_MAP = {
+  "butt": 0,
+  "round": 1,
+  "square": 2
+};
+const LINE_JOIN_MAP = {
+  "miter": 0,
+  "round": 1,
+  "bevel": 2
+};
+export {
+  COMPOSITE_OP_MAP,
+  LINE_CAP_MAP,
+  LINE_JOIN_MAP,
+  cairoArcTo,
+  cairoEllipse,
+  cairoRoundRect,
+  computeArcTo,
+  quadraticToCubic
+};

package/lib/esm/canvas-drawing-area.js

@@ -0,0 +1,112 @@
+import GObject from "gi://GObject";
+import GLib from "gi://GLib?version=2.0";
+import Gtk from "gi://Gtk?version=4.0";
+import { HTMLCanvasElement as GjsifyHTMLCanvasElement } from "@gjsify/dom-elements";
+import { attachEventControllers } from "@gjsify/event-bridge";
+const Canvas2DWidget = GObject.registerClass(
+  { GTypeName: "GjsifyCanvas2DWidget" },
+  class Canvas2DWidget2 extends Gtk.DrawingArea {
+    constructor(params) {
+      super(params);
+      this._canvas = null;
+      this._ctx = null;
+      this._readyCallbacks = [];
+      this._tickCallbackId = null;
+      this._frameCallback = null;
+      // Time origin in microseconds (GLib monotonic clock).
+      // Both requestAnimationFrame timestamps and performance.now() are
+      // relative to this origin, matching the browser DOMHighResTimeStamp spec.
+      this._timeOrigin = GLib.get_monotonic_time();
+      this.set_draw_func(this._onDraw.bind(this));
+      attachEventControllers(this, () => this._canvas);
+      this.connect("unrealize", () => {
+        if (this._tickCallbackId !== null) {
+          this.remove_tick_callback(this._tickCallbackId);
+          this._tickCallbackId = null;
+        }
+        if (this._ctx) {
+          this._ctx._dispose();
+        }
+        this._canvas = null;
+        this._ctx = null;
+      });
+    }
+    /** @internal Draw function called by GTK. Blits the Cairo surface to screen. */
+    _onDraw(_area, cr, width, height) {
+      if (!this._canvas) {
+        this._canvas = new GjsifyHTMLCanvasElement();
+        this._canvas.width = width;
+        this._canvas.height = height;
+        this._ctx = this._canvas.getContext("2d");
+        if (this._ctx) {
+          for (const cb of this._readyCallbacks) {
+            cb(this._canvas, this._ctx);
+          }
+          this._readyCallbacks = [];
+        }
+      }
+      if (this._canvas.width !== width || this._canvas.height !== height) {
+        this._canvas.width = width;
+        this._canvas.height = height;
+      }
+      if (this._ctx) {
+        const surface = this._ctx._getSurface();
+        cr.setSourceSurface(surface, 0, 0);
+        cr.paint();
+      }
+    }
+    /** The HTMLCanvasElement backing this widget. Available after the first draw. */
+    get canvas() {
+      return this._canvas;
+    }
+    /** Get the 2D rendering context. Available after the first draw. */
+    getContext(_id) {
+      return this._ctx;
+    }
+    /**
+     * Register a callback to be invoked once the Canvas 2D context is ready.
+     * If the context is already available, the callback fires synchronously.
+     */
+    onReady(cb) {
+      if (this._canvas && this._ctx) {
+        cb(this._canvas, this._ctx);
+        return;
+      }
+      this._readyCallbacks.push(cb);
+    }
+    /**
+     * Schedules a single animation frame callback, matching the browser `requestAnimationFrame` API.
+     * Backed by GTK frame clock (vsync-synced, typically ~60 FPS).
+     * Returns 0 (handle — cancel not yet implemented).
+     */
+    requestAnimationFrame(cb) {
+      this._frameCallback = cb;
+      if (this._tickCallbackId === null) {
+        this._tickCallbackId = this.add_tick_callback((_widget, frameClock) => {
+          this._tickCallbackId = null;
+          const time = (frameClock.get_frame_time() - this._timeOrigin) / 1e3;
+          this._frameCallback?.(time);
+          this.queue_draw();
+          return GLib.SOURCE_REMOVE;
+        });
+      }
+      this.queue_draw();
+      return 0;
+    }
+    /**
+     * Sets browser globals (`requestAnimationFrame`, `performance`) so that
+     * browser-targeted code works unchanged on GJS.
+     */
+    installGlobals() {
+      globalThis.requestAnimationFrame = (cb) => this.requestAnimationFrame(cb);
+      const timeOrigin = this._timeOrigin;
+      globalThis.performance = {
+        now: () => (GLib.get_monotonic_time() - timeOrigin) / 1e3,
+        timeOrigin: Date.now()
+      };
+    }
+  }
+);
+export {
+  Canvas2DWidget
+};

package/lib/esm/canvas-gradient.js

@@ -0,0 +1,23 @@
+import Cairo from "cairo";
+import { parseColor } from "./color.js";
+class CanvasGradient {
+  constructor(type, x0, y0, x1, y1, r0, r1) {
+    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, color) {
+    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() {
+    return this._pattern;
+  }
+}
+export {
+  CanvasGradient
+};

package/lib/esm/canvas-path.js

@@ -0,0 +1,104 @@
+import { quadraticToCubic, cairoRoundRect } from "./cairo-utils.js";
+class Path2D {
+  constructor(pathOrSvg) {
+    /** @internal Recorded operations */
+    this._ops = [];
+    if (pathOrSvg instanceof Path2D) {
+      this._ops = [...pathOrSvg._ops];
+    }
+  }
+  addPath(path) {
+    this._ops.push(...path._ops);
+  }
+  moveTo(x, y) {
+    this._ops.push({ type: "moveTo", x, y });
+  }
+  lineTo(x, y) {
+    this._ops.push({ type: "lineTo", x, y });
+  }
+  closePath() {
+    this._ops.push({ type: "closePath" });
+  }
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this._ops.push({ type: "bezierCurveTo", cp1x, cp1y, cp2x, cp2y, x, y });
+  }
+  quadraticCurveTo(cpx, cpy, x, y) {
+    this._ops.push({ type: "quadraticCurveTo", cpx, cpy, x, y });
+  }
+  arc(x, y, radius, startAngle, endAngle, counterclockwise = false) {
+    this._ops.push({ type: "arc", x, y, radius, startAngle, endAngle, ccw: counterclockwise });
+  }
+  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = false) {
+    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, y, w, h) {
+    this._ops.push({ type: "rect", x, y, w, h });
+  }
+  roundRect(x, y, w, h, radii = 0) {
+    this._ops.push({ type: "roundRect", x, y, w, h, radii });
+  }
+  /**
+   * @internal Replay all recorded path operations onto a Cairo context.
+   */
+  _replayOnCairo(ctx) {
+    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;
+      }
+    }
+  }
+}
+export {
+  Path2D
+};

package/lib/esm/canvas-pattern.js

@@ -0,0 +1,58 @@
+import Cairo from "cairo";
+import Gdk from "gi://Gdk?version=4.0";
+class CanvasPattern {
+  constructor(surface, repetition) {
+    this._pattern = new Cairo.SurfacePattern(surface);
+    const pat = this._pattern;
+    switch (repetition) {
+      case "repeat":
+      case "":
+      case null:
+        pat.setExtend(Cairo.Extend.REPEAT);
+        break;
+      case "repeat-x":
+      case "repeat-y":
+        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, repetition) {
+    if ("isPixbuf" in image && typeof image.isPixbuf === "function" && image.isPixbuf()) {
+      const pixbuf = image._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, pixbuf, 0, 0);
+      ctx.paint();
+      ctx.$dispose();
+      return new CanvasPattern(surface, repetition);
+    }
+    if (typeof image?.getContext === "function") {
+      const ctx2d = image.getContext("2d");
+      if (ctx2d && typeof ctx2d._getSurface === "function") {
+        const sourceSurface = ctx2d._getSurface();
+        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() {
+    return this._pattern;
+  }
+}
+export {
+  CanvasPattern
+};