@gjsify/canvas2d-core 0.1.7 → 0.1.9

package/src/canvas-imagedata.spec.ts

@@ -0,0 +1,150 @@
+// 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-rendering-context-2d.ts

@@ -89,6 +89,7 @@ export class CanvasRenderingContext2D {
             this._ctx.setSource(style._getCairoPattern());
         } else if (style instanceof OurCanvasPattern) {
             this._ctx.setSource(style._getCairoPattern());
+            this._applyPatternFilter();
         }
     }
 
@@ -103,6 +104,28 @@ export 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.
+     */
+    private _applyPatternFilter(): void {
+        const pat = (this._ctx as any).getSource?.();
+        if (pat && typeof pat.setFilter === 'function') {
+            let filter: number;
+            if (!this._state.imageSmoothingEnabled) {
+                filter = Cairo.Filter.NEAREST as unknown as number;
+            } else if (this._state.imageSmoothingQuality === 'high') {
+                filter = Cairo.Filter.BEST as unknown as number;
+            } else {
+                filter = Cairo.Filter.BILINEAR as unknown as number;
+            }
+            pat.setFilter(filter);
         }
     }
 
@@ -138,43 +161,47 @@ export class CanvasRenderingContext2D {
     }
 
     /**
-     * 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 _renderShadow(drawOp: () => void): void {
-        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;
-
-        // Create temp surface for shadow
-        const shadowSurface = new Cairo.ImageSurface(Cairo.Format.ARGB32, w, h);
-        const shadowCtx = new Cairo.Context(shadowSurface);
-
-        // Copy the current path/state to the shadow context and draw in shadow color
-        shadowCtx.translate(pad, pad);
-        shadowCtx.setSourceRGBA(color.r, color.g, color.b, color.a * this._state.globalAlpha);
-        drawOp.call(this);
-        // We can't easily replay the path on a different context without Path2D,
-        // so shadow support is approximate: we just paint the shadow color under the actual draw
-        shadowCtx.$dispose();
-        shadowSurface.finish();
-
-        // For now, apply shadow as a simple offset + color overlay
-        // Full Gaussian blur would require pixel manipulation (Phase 5 enhancement)
-        this._ctx.save();
-        this._applyCompositing();
-        this._ctx.setSourceRGBA(color.r, color.g, color.b, color.a * this._state.globalAlpha);
-        this._ctx.translate(offX, offY);
-        // Re-fill/stroke the current path with shadow color
-        drawOp();
-        this._ctx.restore();
+    private _deviceToUserDistance(dx: number, dy: number): [number, number] {
+        const origin = (this._ctx as any).userToDevice(0, 0);
+        const xAxis  = (this._ctx as any).userToDevice(1, 0);
+        const yAxis  = (this._ctx as any).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]; // degenerate transform — no conversion
+        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.
+     */
+    private _renderShadow(_drawOp: () => void): void {
+        // Intentionally empty. See the doc-comment above.
     }
 
     // ---- State ----
@@ -219,11 +246,29 @@ export class CanvasRenderingContext2D {
      */
     transform(a: number, b: number, c: number, d: number, e: number, f: number): void {
         this._ensureSurface();
-        // Cairo's matrix constructor: Matrix(xx, yx, xy, yy, x0, y0)
-        // Canvas matrix [a,b,c,d,e,f] maps to Cairo Matrix(a, b, c, d, e, f)
-        const matrix = new Cairo.Matrix();
-        (matrix as any).init(a, b, c, d, e, f);
-        (this._ctx as any).transform(matrix);
+        // Guard against NaN / undefined / Infinity — Cairo will hard-crash
+        // on invalid matrix values.
+        if (!Number.isFinite(a) || !Number.isFinite(b) || !Number.isFinite(c) ||
+            !Number.isFinite(d) || !Number.isFinite(e) || !Number.isFinite(f)) {
+            return;
+        }
+        // Cairo.Context in GJS does NOT expose a generic `transform(matrix)` /
+        // `setMatrix()` call — only `translate()`, `rotate()`, `scale()` and
+        // `identityMatrix()`. So we decompose the affine 2D matrix
+        //   [a c e]
+        //   [b d f]
+        //   [0 0 1]
+        // into translate + rotate + scale (ignoring shear, which Excalibur /
+        // three.js 2D users don't rely on). Shear would require a combined
+        // matrix multiply, which isn't available in this binding.
+        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);
     }
 
     /**
@@ -253,27 +298,35 @@ export class CanvasRenderingContext2D {
      * Return the current transformation matrix as a DOMMatrix-like object.
      */
     getTransform(): DOMMatrix {
-        // Cairo doesn't expose getMatrix in GJS types, but it exists at runtime
-        const m = (this._ctx as any).getMatrix?.();
-        if (m) {
-            // Cairo Matrix fields: xx, yx, xy, yy, x0, y0
-            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),
-            } as any;
-        }
-        // Fallback: return identity
-        return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, is2D: true, isIdentity: true } as any;
+        // Cairo.Context in GJS doesn't expose `getMatrix()`, but it does
+        // expose `userToDevice(x, y)`. We reconstruct the current affine
+        // matrix [a,b,c,d,e,f] by transforming three reference points:
+        //   userToDevice(0, 0) = (e,     f)      — translation
+        //   userToDevice(1, 0) = (a + e, b + f)  — first basis vector
+        //   userToDevice(0, 1) = (c + e, d + f)  — second basis vector
+        const origin = (this._ctx as any).userToDevice(0, 0);
+        const xAxis  = (this._ctx as any).userToDevice(1, 0);
+        const yAxis  = (this._ctx as any).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 as any).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),
+        } as any;
     }
 
     resetTransform(): void {
@@ -774,15 +827,61 @@ export class CanvasRenderingContext2D {
             dx = a5; dy = a6!; dw = a7!; dh = a8!;
         }
 
-        // Scale the source to fill the destination
+        // Spec: drawImage with any zero-width/height source or destination
+        // rectangle is a no-op (and MUST NOT throw). Without this guard,
+        // `scale(dw / sw, dh / sh)` produces 0 or Infinity which Cairo
+        // rejects with "invalid matrix (not invertible)".
+        if (sw === 0 || sh === 0 || dw === 0 || dh === 0) {
+            return;
+        }
+
+        // Clip to the destination rectangle so the source pattern is only
+        // painted inside it; this lets us use paint() (which fills the
+        // entire clip) + paintWithAlpha() for globalAlpha support.
         this._ctx.save();
+        this._ctx.rectangle(dx, dy, dw, dh);
+        this._ctx.clip();
+
+        // Scale the source to fill the destination
         this._ctx.translate(dx, dy);
         this._ctx.scale(dw / sw, dh / sh);
         this._ctx.translate(-sx, -sy);
 
         Gdk.cairo_set_source_pixbuf(this._ctx as any, pixbuf, 0, 0);
-        this._ctx.rectangle(sx, sy, sw, sh);
-        this._ctx.fill();
+
+        // Apply Cairo interpolation filter based on imageSmoothingEnabled +
+        // imageSmoothingQuality. setSource installs a fresh SurfacePattern and
+        // resets any filter to Cairo's default (BILINEAR), so setFilter MUST
+        // be called between setSource and paint. Without this, Excalibur's
+        // pixel-art mode (imageSmoothingEnabled=false) renders blurry because
+        // Cairo uses bilinear interpolation by default.
+        //
+        // Cairo.Filter values (verified runtime in GJS 1.86):
+        //   FAST=0  GOOD=1  BEST=2  NEAREST=3  BILINEAR=4  GAUSSIAN=5
+        // GIR typings are incomplete for Cairo.SurfacePattern so we go via any.
+        const pat = (this._ctx as any).getSource?.();
+        if (pat && typeof pat.setFilter === 'function') {
+            let filter: number;
+            if (!this._state.imageSmoothingEnabled) {
+                filter = Cairo.Filter.NEAREST as unknown as number;
+            } else if (this._state.imageSmoothingQuality === 'high') {
+                filter = Cairo.Filter.BEST as unknown as number;
+            } else {
+                filter = Cairo.Filter.BILINEAR as unknown as number;
+            }
+            pat.setFilter(filter);
+        }
+
+        // paint() vs fill(): paint() composites the current source over the
+        // current clip region uniformly, honoring paintWithAlpha for global
+        // alpha multiplication. fill() would require a rectangle path and
+        // doesn't support per-draw alpha, so paint() is the spec-correct
+        // choice for drawImage. The clip above confines the paint to dx,dy,dw,dh.
+        if (this._state.globalAlpha < 1) {
+            (this._ctx as any).paintWithAlpha(this._state.globalAlpha);
+        } else {
+            this._ctx.paint();
+        }
         this._ctx.restore();
     }
 
@@ -832,35 +931,41 @@ export class CanvasRenderingContext2D {
     /** Parse a CSS font string (e.g. "bold 16px Arial") into a Pango.FontDescription. */
     private _parseFontToDescription(cssFont: string): Pango.FontDescription {
         // CSS font: [style] [variant] [weight] size[/line-height] family[, family...]
-        // Pango expects: "Family Weight Style Size" format
         const match = cssFont.match(
             /^\s*(italic|oblique|normal)?\s*(small-caps|normal)?\s*(bold|bolder|lighter|[1-9]00|normal)?\s*(\d+(?:\.\d+)?)(px|pt|em|rem|%)?\s*(?:\/\S+)?\s*(.+)?$/i
         );
 
         if (!match) {
-            // Fallback: pass directly to Pango
+            // Fallback: pass directly to Pango (may have DPI-scaling quirks)
             return Pango.font_description_from_string(cssFont);
         }
 
-        const style = match[1] || '';
+        const style  = match[1] || '';
         const weight = match[3] || '';
-        let size = parseFloat(match[4]) || 10;
-        const unit = match[5] || 'px';
+        let   size   = parseFloat(match[4]) || 10;
+        const unit   = (match[5] || 'px').toLowerCase();
         const family = (match[6] || 'sans-serif').replace(/['"]/g, '').trim();
 
-        // Convert units to points (Pango uses points)
-        if (unit === 'px') size = size * 0.75; // 1px = 0.75pt approximately
-        else if (unit === 'em' || unit === 'rem') size = size * 12; // assume 16px base = 12pt
-        else if (unit === '%') size = (size / 100) * 12;
+        // Normalise everything to CSS pixels.
+        // We use set_absolute_size() below which bypasses Pango's DPI scaling,
+        // so 1 CSS pixel == 1 device pixel on a 1:1 surface (standard for Canvas2D).
+        if      (unit === 'pt')            size = size * 96 / 72;  // 1pt = 96/72 px
+        else if (unit === 'em' || unit === 'rem') size = size * 16; // assume 16px base
+        else if (unit === '%')             size = (size / 100) * 16;
+        // 'px' stays as-is
 
+        // Build description string WITHOUT size — size is set via set_absolute_size.
         let pangoStr = family;
-        if (style === 'italic') pangoStr += ' Italic';
+        if (style === 'italic')  pangoStr += ' Italic';
         else if (style === 'oblique') pangoStr += ' Oblique';
-        if (weight === 'bold' || weight === 'bolder' || (parseInt(weight) >= 600)) pangoStr += ' Bold';
+        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);
+        // Absolute size: Pango.SCALE units per device pixel, no DPI conversion.
+        // This ensures "9px Round9x13" renders at exactly 9 pixels — pixel-perfect.
+        desc.set_absolute_size(size * Pango.SCALE);
+        return desc;
     }
 
     /**
@@ -914,13 +1019,57 @@ export class CanvasRenderingContext2D {
     fillText(text: string, x: number, y: number, _maxWidth?: number): void {
         this._ensureSurface();
         this._applyCompositing();
-        this._applyFillStyle();
 
         const layout = this._createTextLayout(text);
         const xOff = this._getTextAlignOffset(layout);
         const yOff = this._getTextBaselineOffset(layout);
 
+        // Shadow pass: draw text at offset position with shadowColor.
+        // shadowOffsetX/Y are in CSS pixels (not scaled by CTM per Canvas2D spec),
+        // so we convert them to user-space before applying to moveTo.
+        // shadowBlur is approximated with a 5-tap cross kernel: one center tap at full
+        // alpha plus four arm taps at half alpha, spread by blur_u in each direction.
+        // This simulates Gaussian spreading without an actual blur pass.
+        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;
+                type Tap = [number, number, number];
+                let taps: Tap[];
+                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 as any).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 as any, layout);
+                    this._ctx.restore();
+                }
+            }
+        }
+
+        this._applyFillStyle();
         this._ctx.save();
+        // Disable anti-aliasing so pixel/bitmap fonts render crisp (matching browser
+        // behaviour for fonts with no outline hints). cairo_save/restore covers antialias.
+        (this._ctx as any).setAntialias(this._state.imageSmoothingEnabled ? Cairo.Antialias.DEFAULT : Cairo.Antialias.NONE);
         this._ctx.moveTo(x + xOff, y + yOff);
         PangoCairo.show_layout(this._ctx as any, layout);
         this._ctx.restore();
@@ -937,6 +1086,7 @@ export class CanvasRenderingContext2D {
         const yOff = this._getTextBaselineOffset(layout);
 
         this._ctx.save();
+        (this._ctx as any).setAntialias(this._state.imageSmoothingEnabled ? Cairo.Antialias.DEFAULT : Cairo.Antialias.NONE);
         this._ctx.moveTo(x + xOff, y + yOff);
         PangoCairo.layout_path(this._ctx as any, layout);
         this._ctx.stroke();
@@ -947,25 +1097,34 @@ export class CanvasRenderingContext2D {
         this._ensureSurface();
         const layout = this._createTextLayout(text);
         const [inkRect, logicalRect] = layout.get_pixel_extents();
+
+        // Baseline of first line in pixels from layout top (Pango.SCALE units → px).
+        const baselinePx = layout.get_baseline() / Pango.SCALE;
+
+        // actualBoundingBox: ink-based, relative to baseline (positive = above/right of baseline).
+        // inkRect.y is pixels below layout top — compare against baseline to get baseline-relative values.
+        const actualAscent  = Math.max(0, baselinePx - inkRect.y);
+        const actualDescent = Math.max(0, (inkRect.y + inkRect.height) - baselinePx);
+
+        // fontBoundingBox: font-level metrics (same for all glyphs at this font/size).
         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,
-            actualBoundingBoxRight: inkRect.x + inkRect.width,
-            fontBoundingBoxAscent: ascent,
-            fontBoundingBoxDescent: descent,
-            alphabeticBaseline: 0,
-            emHeightAscent: ascent,
-            emHeightDescent: descent,
-            hangingBaseline: ascent * 0.8,
-            ideographicBaseline: -descent,
+            actualBoundingBoxAscent:  actualAscent,
+            actualBoundingBoxDescent: actualDescent,
+            actualBoundingBoxLeft:    Math.max(0, -inkRect.x),
+            actualBoundingBoxRight:   inkRect.x + inkRect.width,
+            fontBoundingBoxAscent:    fontAscent,
+            fontBoundingBoxDescent:   fontDescent,
+            alphabeticBaseline:       0,
+            emHeightAscent:           fontAscent,
+            emHeightDescent:          fontDescent,
+            hangingBaseline:          fontAscent * 0.8,
+            ideographicBaseline:      -fontDescent,
         };
     }