@gjsify/canvas2d-core 0.1.8 → 0.1.10

package/lib/esm/cairo-utils.js

@@ -99,25 +99,25 @@ function cairoRoundRect(ctx, x, y, w, h, radii) {
 const COMPOSITE_OP_MAP = {
   "source-over": 2,
   // OVER
-  "source-in": 5,
+  "source-in": 3,
   // IN
-  "source-out": 6,
+  "source-out": 4,
   // OUT
-  "source-atop": 7,
+  "source-atop": 5,
   // ATOP
-  "destination-over": 8,
+  "destination-over": 7,
   // DEST_OVER
-  "destination-in": 9,
+  "destination-in": 8,
   // DEST_IN
-  "destination-out": 10,
+  "destination-out": 9,
   // DEST_OUT
-  "destination-atop": 11,
+  "destination-atop": 10,
   // DEST_ATOP
   "lighter": 12,
   // ADD
   "copy": 1,
   // SOURCE
-  "xor": 13,
+  "xor": 11,
   // XOR
   "multiply": 14,
   // MULTIPLY

package/lib/esm/canvas-rendering-context-2d.js

@@ -59,6 +59,7 @@ class CanvasRenderingContext2D {
       this._ctx.setSource(style._getCairoPattern());
     } else if (style instanceof OurCanvasPattern) {
       this._ctx.setSource(style._getCairoPattern());
+      this._applyPatternFilter();
     }
   }
   /** Apply the current stroke style to the Cairo context. */
@@ -72,6 +73,27 @@ class CanvasRenderingContext2D {
       this._ctx.setSource(style._getCairoPattern());
     } else if (style instanceof OurCanvasPattern) {
       this._ctx.setSource(style._getCairoPattern());
+      this._applyPatternFilter();
+    }
+  }
+  /**
+   * Apply the current imageSmoothingEnabled + imageSmoothingQuality state
+   * to the currently installed Cairo source pattern. Per Canvas 2D spec,
+   * the filter is read from the context at *draw* time, not at pattern
+   * creation — so we re-apply it on every fill/stroke.
+   */
+  _applyPatternFilter() {
+    const pat = this._ctx.getSource?.();
+    if (pat && typeof pat.setFilter === "function") {
+      let filter;
+      if (!this._state.imageSmoothingEnabled) {
+        filter = Cairo.Filter.NEAREST;
+      } else if (this._state.imageSmoothingQuality === "high") {
+        filter = Cairo.Filter.BEST;
+      } else {
+        filter = Cairo.Filter.BILINEAR;
+      }
+      pat.setFilter(filter);
     }
   }
   /** Apply line properties to the Cairo context. */
@@ -102,32 +124,45 @@ class CanvasRenderingContext2D {
     return c !== null && c.a > 0;
   }
   /**
-   * Render a shadow for the current path by painting to a temp surface,
-   * applying a simple box blur approximation, and compositing back.
-   * This is called before the actual fill/stroke when shadows are active.
+   * Convert a distance from device pixels to Cairo user space by inverting
+   * the linear part of the current CTM (translation doesn't affect distances).
+   *
+   * Canvas 2D spec: shadowOffsetX/Y are in CSS pixels and are NOT scaled by
+   * the current transform. This helper converts them to user-space offsets so
+   * that `ctx.moveTo(x + sdx, y + sdy)` produces the correct pixel offset
+   * regardless of any ctx.scale() or ctx.rotate() in effect.
    */
-  _renderShadow(drawOp) {
-    const blur = this._state.shadowBlur;
-    const offX = this._state.shadowOffsetX;
-    const offY = this._state.shadowOffsetY;
-    const color = parseColor(this._state.shadowColor);
-    if (!color) return;
-    const pad = Math.ceil(blur * 2);
-    const w = this._surfaceWidth + pad * 2;
-    const h = this._surfaceHeight + pad * 2;
-    const shadowSurface = new Cairo.ImageSurface(Cairo.Format.ARGB32, w, h);
-    const shadowCtx = new Cairo.Context(shadowSurface);
-    shadowCtx.translate(pad, pad);
-    shadowCtx.setSourceRGBA(color.r, color.g, color.b, color.a * this._state.globalAlpha);
-    drawOp.call(this);
-    shadowCtx.$dispose();
-    shadowSurface.finish();
-    this._ctx.save();
-    this._applyCompositing();
-    this._ctx.setSourceRGBA(color.r, color.g, color.b, color.a * this._state.globalAlpha);
-    this._ctx.translate(offX, offY);
-    drawOp();
-    this._ctx.restore();
+  _deviceToUserDistance(dx, dy) {
+    const origin = this._ctx.userToDevice(0, 0);
+    const xAxis = this._ctx.userToDevice(1, 0);
+    const yAxis = this._ctx.userToDevice(0, 1);
+    const a = (xAxis[0] ?? 0) - (origin[0] ?? 0);
+    const b = (xAxis[1] ?? 0) - (origin[1] ?? 0);
+    const c = (yAxis[0] ?? 0) - (origin[0] ?? 0);
+    const d = (yAxis[1] ?? 0) - (origin[1] ?? 0);
+    const det = a * d - b * c;
+    if (Math.abs(det) < 1e-10) return [dx, dy];
+    return [
+      (d * dx - c * dy) / det,
+      (-b * dx + a * dy) / det
+    ];
+  }
+  /**
+   * Shadow rendering is intentionally a no-op.
+   *
+   * Proper Canvas 2D shadows require a Gaussian blur pass on an isolated
+   * temporary surface, which cannot be emulated reliably without a full
+   * Path2D replay or pixel-level manipulation. The previous implementation
+   * attempted to use a temp surface but never replayed the path onto it
+   * (because `drawOp` closes over the main context), leaving the shadow
+   * surface empty while still leaking memory.
+   *
+   * Excalibur and most 2D game engines bake glow/outline effects into
+   * sprites rather than relying on canvas shadows, so this no-op does not
+   * affect the showcase. A correct implementation is tracked as a
+   * separate Canvas 2D Phase-5 enhancement.
+   */
+  _renderShadow(_drawOp) {
   }
   // ---- State ----
   save() {
@@ -164,9 +199,17 @@ class CanvasRenderingContext2D {
    */
   transform(a, b, c, d, e, f) {
     this._ensureSurface();
-    const matrix = new Cairo.Matrix();
-    matrix.init(a, b, c, d, e, f);
-    this._ctx.transform(matrix);
+    if (!Number.isFinite(a) || !Number.isFinite(b) || !Number.isFinite(c) || !Number.isFinite(d) || !Number.isFinite(e) || !Number.isFinite(f)) {
+      return;
+    }
+    const tx = e;
+    const ty = f;
+    const sx = Math.hypot(a, b);
+    const sy = Math.hypot(c, d);
+    const rotation = Math.atan2(b, a);
+    this._ctx.translate(tx, ty);
+    if (rotation !== 0) this._ctx.rotate(rotation);
+    if (sx !== 1 || sy !== 1) this._ctx.scale(sx, sy);
   }
   setTransform(a, b, c, d, e, f) {
     this._ensureSurface();
@@ -192,36 +235,45 @@ class CanvasRenderingContext2D {
    * Return the current transformation matrix as a DOMMatrix-like object.
    */
   getTransform() {
-    const m = this._ctx.getMatrix?.();
-    if (m) {
-      return {
-        a: m.xx ?? 1,
-        b: m.yx ?? 0,
-        c: m.xy ?? 0,
-        d: m.yy ?? 1,
-        e: m.x0 ?? 0,
-        f: m.y0 ?? 0,
-        m11: m.xx ?? 1,
-        m12: m.yx ?? 0,
-        m13: 0,
-        m14: 0,
-        m21: m.xy ?? 0,
-        m22: m.yy ?? 1,
-        m23: 0,
-        m24: 0,
-        m31: 0,
-        m32: 0,
-        m33: 1,
-        m34: 0,
-        m41: m.x0 ?? 0,
-        m42: m.y0 ?? 0,
-        m43: 0,
-        m44: 1,
-        is2D: true,
-        isIdentity: m.xx === 1 && m.yx === 0 && m.xy === 0 && m.yy === 1 && m.x0 === 0 && m.y0 === 0
-      };
-    }
-    return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, is2D: true, isIdentity: true };
+    const origin = this._ctx.userToDevice(0, 0);
+    const xAxis = this._ctx.userToDevice(1, 0);
+    const yAxis = this._ctx.userToDevice(0, 1);
+    const e = origin[0] ?? 0;
+    const f = origin[1] ?? 0;
+    const a = (xAxis[0] ?? 0) - e;
+    const b = (xAxis[1] ?? 0) - f;
+    const c = (yAxis[0] ?? 0) - e;
+    const d = (yAxis[1] ?? 0) - f;
+    const DOMMatrixCtor = globalThis.DOMMatrix;
+    if (typeof DOMMatrixCtor === "function") {
+      return new DOMMatrixCtor([a, b, c, d, e, f]);
+    }
+    return {
+      a,
+      b,
+      c,
+      d,
+      e,
+      f,
+      m11: a,
+      m12: b,
+      m13: 0,
+      m14: 0,
+      m21: c,
+      m22: d,
+      m23: 0,
+      m24: 0,
+      m31: 0,
+      m32: 0,
+      m33: 1,
+      m34: 0,
+      m41: e,
+      m42: f,
+      m43: 0,
+      m44: 1,
+      is2D: true,
+      isIdentity: a === 1 && b === 0 && c === 0 && d === 1 && e === 0 && f === 0
+    };
   }
   resetTransform() {
     this._ensureSurface();
@@ -677,13 +729,33 @@ class CanvasRenderingContext2D {
       dw = a7;
       dh = a8;
     }
+    if (sw === 0 || sh === 0 || dw === 0 || dh === 0) {
+      return;
+    }
     this._ctx.save();
+    this._ctx.rectangle(dx, dy, dw, dh);
+    this._ctx.clip();
     this._ctx.translate(dx, dy);
     this._ctx.scale(dw / sw, dh / sh);
     this._ctx.translate(-sx, -sy);
     Gdk.cairo_set_source_pixbuf(this._ctx, pixbuf, 0, 0);
-    this._ctx.rectangle(sx, sy, sw, sh);
-    this._ctx.fill();
+    const pat = this._ctx.getSource?.();
+    if (pat && typeof pat.setFilter === "function") {
+      let filter;
+      if (!this._state.imageSmoothingEnabled) {
+        filter = Cairo.Filter.NEAREST;
+      } else if (this._state.imageSmoothingQuality === "high") {
+        filter = Cairo.Filter.BEST;
+      } else {
+        filter = Cairo.Filter.BILINEAR;
+      }
+      pat.setFilter(filter);
+    }
+    if (this._state.globalAlpha < 1) {
+      this._ctx.paintWithAlpha(this._state.globalAlpha);
+    } else {
+      this._ctx.paint();
+    }
     this._ctx.restore();
   }
   _getDrawImageSource(image) {
@@ -727,18 +799,19 @@ class CanvasRenderingContext2D {
     const style = match[1] || "";
     const weight = match[3] || "";
     let size = parseFloat(match[4]) || 10;
-    const unit = match[5] || "px";
+    const unit = (match[5] || "px").toLowerCase();
     const family = (match[6] || "sans-serif").replace(/['"]/g, "").trim();
-    if (unit === "px") size = size * 0.75;
-    else if (unit === "em" || unit === "rem") size = size * 12;
-    else if (unit === "%") size = size / 100 * 12;
+    if (unit === "pt") size = size * 96 / 72;
+    else if (unit === "em" || unit === "rem") size = size * 16;
+    else if (unit === "%") size = size / 100 * 16;
     let pangoStr = family;
     if (style === "italic") pangoStr += " Italic";
     else if (style === "oblique") pangoStr += " Oblique";
     if (weight === "bold" || weight === "bolder" || parseInt(weight) >= 600) pangoStr += " Bold";
     else if (weight === "lighter" || parseInt(weight) > 0 && parseInt(weight) <= 300) pangoStr += " Light";
-    pangoStr += ` ${Math.round(size)}`;
-    return Pango.font_description_from_string(pangoStr);
+    const desc = Pango.font_description_from_string(pangoStr);
+    desc.set_absolute_size(size * Pango.SCALE);
+    return desc;
   }
   /**
    * Compute the x-offset for text alignment relative to the given x coordinate.
@@ -801,11 +874,45 @@ class CanvasRenderingContext2D {
   fillText(text, x, y, _maxWidth) {
     this._ensureSurface();
     this._applyCompositing();
-    this._applyFillStyle();
     const layout = this._createTextLayout(text);
     const xOff = this._getTextAlignOffset(layout);
     const yOff = this._getTextBaselineOffset(layout);
+    if (this._hasShadow()) {
+      const sc = parseColor(this._state.shadowColor);
+      if (sc) {
+        const [sdx, sdy] = this._deviceToUserDistance(
+          this._state.shadowOffsetX,
+          this._state.shadowOffsetY
+        );
+        const blur = this._state.shadowBlur;
+        let taps;
+        if (blur > 0) {
+          const [bu] = this._deviceToUserDistance(blur, 0);
+          const [, bv] = this._deviceToUserDistance(0, blur);
+          taps = [
+            [sdx, sdy, sc.a],
+            [sdx + bu, sdy, sc.a * 0.5],
+            [sdx - bu, sdy, sc.a * 0.5],
+            [sdx, sdy + bv, sc.a * 0.5],
+            [sdx, sdy - bv, sc.a * 0.5]
+          ];
+        } else {
+          taps = [[sdx, sdy, sc.a]];
+        }
+        const aa = this._state.imageSmoothingEnabled ? Cairo.Antialias.DEFAULT : Cairo.Antialias.NONE;
+        for (const [tx, ty, ta] of taps) {
+          this._ctx.save();
+          this._ctx.setAntialias(aa);
+          this._ctx.setSourceRGBA(sc.r, sc.g, sc.b, ta);
+          this._ctx.moveTo(x + xOff + tx, y + yOff + ty);
+          PangoCairo.show_layout(this._ctx, layout);
+          this._ctx.restore();
+        }
+      }
+    }
+    this._applyFillStyle();
     this._ctx.save();
+    this._ctx.setAntialias(this._state.imageSmoothingEnabled ? Cairo.Antialias.DEFAULT : Cairo.Antialias.NONE);
     this._ctx.moveTo(x + xOff, y + yOff);
     PangoCairo.show_layout(this._ctx, layout);
     this._ctx.restore();
@@ -819,6 +926,7 @@ class CanvasRenderingContext2D {
     const xOff = this._getTextAlignOffset(layout);
     const yOff = this._getTextBaselineOffset(layout);
     this._ctx.save();
+    this._ctx.setAntialias(this._state.imageSmoothingEnabled ? Cairo.Antialias.DEFAULT : Cairo.Antialias.NONE);
     this._ctx.moveTo(x + xOff, y + yOff);
     PangoCairo.layout_path(this._ctx, layout);
     this._ctx.stroke();
@@ -828,24 +936,26 @@ class CanvasRenderingContext2D {
     this._ensureSurface();
     const layout = this._createTextLayout(text);
     const [inkRect, logicalRect] = layout.get_pixel_extents();
+    const baselinePx = layout.get_baseline() / Pango.SCALE;
+    const actualAscent = Math.max(0, baselinePx - inkRect.y);
+    const actualDescent = Math.max(0, inkRect.y + inkRect.height - baselinePx);
     const fontDesc = layout.get_font_description() || this._parseFontToDescription(this._state.font);
-    const context = layout.get_context();
-    const metrics = context.get_metrics(fontDesc, null);
-    const ascent = metrics.get_ascent() / Pango.SCALE;
-    const descent = metrics.get_descent() / Pango.SCALE;
+    const metrics = layout.get_context().get_metrics(fontDesc, null);
+    const fontAscent = metrics.get_ascent() / Pango.SCALE;
+    const fontDescent = metrics.get_descent() / Pango.SCALE;
     return {
       width: logicalRect.width,
-      actualBoundingBoxAscent: ascent,
-      actualBoundingBoxDescent: descent,
-      actualBoundingBoxLeft: -inkRect.x,
+      actualBoundingBoxAscent: actualAscent,
+      actualBoundingBoxDescent: actualDescent,
+      actualBoundingBoxLeft: Math.max(0, -inkRect.x),
       actualBoundingBoxRight: inkRect.x + inkRect.width,
-      fontBoundingBoxAscent: ascent,
-      fontBoundingBoxDescent: descent,
+      fontBoundingBoxAscent: fontAscent,
+      fontBoundingBoxDescent: fontDescent,
       alphabeticBaseline: 0,
-      emHeightAscent: ascent,
-      emHeightDescent: descent,
-      hangingBaseline: ascent * 0.8,
-      ideographicBaseline: -descent
+      emHeightAscent: fontAscent,
+      emHeightDescent: fontDescent,
+      hangingBaseline: fontAscent * 0.8,
+      ideographicBaseline: -fontDescent
     };
   }
   // ---- toDataURL/toBlob support ----

package/lib/esm/color.js

@@ -166,6 +166,23 @@ function parseColor(color) {
       a: rgbMatch[4] !== void 0 ? parseComponent(rgbMatch[4], 1) : 1
     };
   }
+  const hslMatch = trimmed.match(
+    /^hsla?\(\s*(\d+(?:\.\d+)?)\s*[,\s]\s*(\d+(?:\.\d+)?)(%)?\s*[,\s]\s*(\d+(?:\.\d+)?)(%)?\s*(?:[,/]\s*(\d+(?:\.\d+)?%?))?\s*\)$/
+  );
+  if (hslMatch) {
+    let h = parseFloat(hslMatch[1]);
+    let s = parseFloat(hslMatch[2]);
+    const sPct = hslMatch[3] === "%";
+    let l = parseFloat(hslMatch[4]);
+    const lPct = hslMatch[5] === "%";
+    const a = hslMatch[6] !== void 0 ? parseComponent(hslMatch[6], 1) : 1;
+    if (h > 1) h /= 360;
+    if (sPct) s /= 100;
+    else if (s > 1) s /= 100;
+    if (lPct) l /= 100;
+    else if (l > 1) l /= 100;
+    return hslToRGBA(h, s, l, Math.max(0, Math.min(1, a)));
+  }
   return null;
 }
 function parseHex(hex) {
@@ -200,6 +217,27 @@ function parseComponent(value, max) {
   }
   return parseFloat(value);
 }
+function hue2rgb(p, q, t) {
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  if (t < 1 / 6) return p + (q - p) * 6 * t;
+  if (t < 1 / 2) return q;
+  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+  return p;
+}
+function hslToRGBA(h, s, l, a) {
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return { r, g, b, a };
+}
 const BLACK = { r: 0, g: 0, b: 0, a: 1 };
 const TRANSPARENT = { r: 0, g: 0, b: 0, a: 0 };
 export {

package/lib/types/cairo-utils.d.ts

@@ -46,7 +46,18 @@ export declare function cairoEllipse(ctx: Cairo.Context, x: number, y: number, r
  * Implements the Canvas roundRect(x, y, w, h, radii) method.
  */
 export declare function cairoRoundRect(ctx: Cairo.Context, x: number, y: number, w: number, h: number, radii: number | number[]): void;
-/** Map Canvas globalCompositeOperation to Cairo.Operator values */
+/**
+ * Map Canvas globalCompositeOperation to Cairo.Operator values.
+ *
+ * Cairo.Operator enum (verified runtime in GJS 1.86):
+ *   CLEAR=0, SOURCE=1, OVER=2, IN=3, OUT=4, ATOP=5,
+ *   DEST=6, DEST_OVER=7, DEST_IN=8, DEST_OUT=9, DEST_ATOP=10,
+ *   XOR=11, ADD=12, SATURATE=13,
+ *   MULTIPLY=14, SCREEN=15, OVERLAY=16, DARKEN=17, LIGHTEN=18,
+ *   COLOR_DODGE=19, COLOR_BURN=20, HARD_LIGHT=21, SOFT_LIGHT=22,
+ *   DIFFERENCE=23, EXCLUSION=24, HSL_HUE=25, HSL_SATURATION=26,
+ *   HSL_COLOR=27, HSL_LUMINOSITY=28
+ */
 export declare const COMPOSITE_OP_MAP: Record<string, number>;
 /** Map Canvas lineCap to Cairo.LineCap values */
 export declare const LINE_CAP_MAP: Record<string, number>;

package/lib/types/canvas-clearing.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/lib/types/canvas-color.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/lib/types/canvas-composite.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/lib/types/canvas-drawimage.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/lib/types/canvas-imagedata.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/lib/types/canvas-rendering-context-2d.d.ts

@@ -21,6 +21,13 @@ export declare class CanvasRenderingContext2D {
     private _applyFillStyle;
     /** Apply the current stroke style to the Cairo context. */
     private _applyStrokeStyle;
+    /**
+     * Apply the current imageSmoothingEnabled + imageSmoothingQuality state
+     * to the currently installed Cairo source pattern. Per Canvas 2D spec,
+     * the filter is read from the context at *draw* time, not at pattern
+     * creation — so we re-apply it on every fill/stroke.
+     */
+    private _applyPatternFilter;
     /** Apply line properties to the Cairo context. */
     private _applyLineStyle;
     /** Apply compositing operator. */
@@ -30,9 +37,29 @@ export declare class CanvasRenderingContext2D {
     /** Check if shadow rendering is needed. */
     private _hasShadow;
     /**
-     * Render a shadow for the current path by painting to a temp surface,
-     * applying a simple box blur approximation, and compositing back.
-     * This is called before the actual fill/stroke when shadows are active.
+     * Convert a distance from device pixels to Cairo user space by inverting
+     * the linear part of the current CTM (translation doesn't affect distances).
+     *
+     * Canvas 2D spec: shadowOffsetX/Y are in CSS pixels and are NOT scaled by
+     * the current transform. This helper converts them to user-space offsets so
+     * that `ctx.moveTo(x + sdx, y + sdy)` produces the correct pixel offset
+     * regardless of any ctx.scale() or ctx.rotate() in effect.
+     */
+    private _deviceToUserDistance;
+    /**
+     * Shadow rendering is intentionally a no-op.
+     *
+     * Proper Canvas 2D shadows require a Gaussian blur pass on an isolated
+     * temporary surface, which cannot be emulated reliably without a full
+     * Path2D replay or pixel-level manipulation. The previous implementation
+     * attempted to use a temp surface but never replayed the path onto it
+     * (because `drawOp` closes over the main context), leaving the shadow
+     * surface empty while still leaking memory.
+     *
+     * Excalibur and most 2D game engines bake glow/outline effects into
+     * sprites rather than relying on canvas shadows, so this no-op does not
+     * affect the showcase. A correct implementation is tracked as a
+     * separate Canvas 2D Phase-5 enhancement.
      */
     private _renderShadow;
     save(): void;

package/lib/types/canvas-state.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/lib/types/canvas-transform.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/lib/types/color.d.ts

@@ -6,7 +6,11 @@ export interface RGBA {
 }
 /**
  * Parse a CSS color string into RGBA components (0-1 range).
- * Supports: #rgb, #rrggbb, #rgba, #rrggbbaa, rgb(), rgba(), named colors, 'transparent'.
+ * Supports: #rgb, #rrggbb, #rgba, #rrggbbaa, rgb(), rgba(), hsl(), hsla(), named colors, 'transparent'.
+ *
+ * Also handles Excalibur's non-standard HSL format where h/s/l are all in 0-1 range (not degrees/%).
+ * Excalibur's Color.toString() returns `hsla(h, s, l, a)` with values in 0-1 normalized form
+ * (e.g. Color.White → "hsla(0, 0, 1, 1)", Color.Black → "hsla(0, 0, 0, 1)").
  */
 export declare function parseColor(color: string): RGBA | null;
 /** Default color: opaque black */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/canvas2d-core",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Cairo-backed Canvas 2D core (CanvasRenderingContext2D, Path2D, ImageData) — no GTK dependency",
   "type": "module",
   "module": "lib/esm/index.js",
@@ -30,18 +30,18 @@
     "offscreen"
   ],
   "dependencies": {
-    "@girs/gdk-4.0": "^4.0.0-4.0.0-rc.1",
-    "@girs/gdkpixbuf-2.0": "^2.0.0-4.0.0-rc.1",
-    "@girs/gjs": "^4.0.0-rc.1",
-    "@girs/glib-2.0": "^2.88.0-4.0.0-rc.1",
-    "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.1",
-    "@girs/pango-1.0": "^1.57.1-4.0.0-rc.1",
-    "@girs/pangocairo-1.0": "^1.0.0-4.0.0-rc.1"
+    "@girs/gdk-4.0": "^4.0.0-4.0.0-rc.2",
+    "@girs/gdkpixbuf-2.0": "^2.0.0-4.0.0-rc.2",
+    "@girs/gjs": "^4.0.0-rc.2",
+    "@girs/glib-2.0": "^2.88.0-4.0.0-rc.2",
+    "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.2",
+    "@girs/pango-1.0": "^1.57.1-4.0.0-rc.2",
+    "@girs/pangocairo-1.0": "^1.0.0-4.0.0-rc.2"
   },
   "devDependencies": {
-    "@gjsify/cli": "^0.1.8",
-    "@gjsify/unit": "^0.1.8",
-    "@types/node": "^25.5.2",
+    "@gjsify/cli": "^0.1.10",
+    "@gjsify/unit": "^0.1.10",
+    "@types/node": "^25.6.0",
     "typescript": "^6.0.2"
   }
 }

package/src/cairo-utils.ts

@@ -198,19 +198,30 @@ export function cairoRoundRect(
     ctx.closePath();
 }
 
-/** Map Canvas globalCompositeOperation to Cairo.Operator values */
+/**
+ * Map Canvas globalCompositeOperation to Cairo.Operator values.
+ *
+ * Cairo.Operator enum (verified runtime in GJS 1.86):
+ *   CLEAR=0, SOURCE=1, OVER=2, IN=3, OUT=4, ATOP=5,
+ *   DEST=6, DEST_OVER=7, DEST_IN=8, DEST_OUT=9, DEST_ATOP=10,
+ *   XOR=11, ADD=12, SATURATE=13,
+ *   MULTIPLY=14, SCREEN=15, OVERLAY=16, DARKEN=17, LIGHTEN=18,
+ *   COLOR_DODGE=19, COLOR_BURN=20, HARD_LIGHT=21, SOFT_LIGHT=22,
+ *   DIFFERENCE=23, EXCLUSION=24, HSL_HUE=25, HSL_SATURATION=26,
+ *   HSL_COLOR=27, HSL_LUMINOSITY=28
+ */
 export const COMPOSITE_OP_MAP: Record<string, number> = {
     '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
+    'source-in': 3,        // IN
+    'source-out': 4,       // OUT
+    'source-atop': 5,      // ATOP
+    'destination-over': 7, // DEST_OVER
+    'destination-in': 8,   // DEST_IN
+    'destination-out': 9,  // DEST_OUT
+    'destination-atop': 10,// DEST_ATOP
     'lighter': 12,         // ADD
     'copy': 1,             // SOURCE
-    'xor': 13,             // XOR
+    'xor': 11,             // XOR
     'multiply': 14,        // MULTIPLY
     'screen': 15,          // SCREEN
     'overlay': 16,         // OVERLAY