html2canvas-pro 2.4.3 → 2.4.5

package/dist/lib/render/canvas/filter-surface.js

@@ -0,0 +1,270 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.releaseSurface = exports.FilterSurfaceError = void 0;
+exports.parseSimpleFilter = parseSimpleFilter;
+exports.filterOutset = filterOutset;
+exports.supportsNativeFilters = supportsNativeFilters;
+exports.renderFilterSurface = renderFilterSurface;
+exports.renderSvgFilterSurface = renderSvgFilterSurface;
+const effects_1 = require("../effects");
+const abort_helper_1 = require("../../core/abort-helper");
+// Only errors in the optional surface path are eligible for legacy fallback.
+class FilterSurfaceError extends Error {
+}
+exports.FilterSurfaceError = FilterSurfaceError;
+const releaseSurface = (canvas) => {
+    canvas.width = canvas.height = 0;
+};
+exports.releaseSurface = releaseSurface;
+// This first renderer integration handles computed blur followed by one shadow.
+// Unsupported chains retain the existing renderer until general filter support lands.
+function parseSimpleFilter(value) {
+    if (!value || value === 'none')
+        return { blur: 0 };
+    const effect = new effects_1.FilterEffect(value);
+    const shadows = value.match(/drop-shadow\(/g) || [];
+    if (shadows.length > 1 || (shadows.length === 1 && !effect.shadow))
+        return null;
+    const blur = effect.safeFilterString.match(/^blur\((\d+(?:\.\d+)?)px\)$/);
+    if (effect.safeFilterString && !blur)
+        return null;
+    if (blur && shadows.length && value.indexOf('blur(') > value.indexOf('drop-shadow('))
+        return null;
+    return {
+        blur: blur ? Number(blur[1]) : 0,
+        shadow: effect.shadow
+            ? {
+                x: effect.shadow.offsetX,
+                y: effect.shadow.offsetY,
+                blur: effect.shadow.blur,
+                color: effect.shadow.color
+            }
+            : undefined
+    };
+}
+function filterOutset(filter) {
+    return Math.ceil(3 * (filter.blur + (filter.shadow?.blur ?? 0)) +
+        Math.max(Math.abs(filter.shadow?.x ?? 0), Math.abs(filter.shadow?.y ?? 0)));
+}
+function canvasLike(source) {
+    const canvas = document.createElement('canvas');
+    canvas.width = source.width;
+    canvas.height = source.height;
+    return canvas;
+}
+const decodeSurface = (image, signal) => new Promise((resolve, reject) => {
+    const finish = (error) => {
+        clearTimeout(timer);
+        signal?.removeEventListener('abort', abort);
+        if (error)
+            reject(error);
+        else
+            resolve();
+    };
+    const abort = () => finish(new DOMException('The operation was aborted.', 'AbortError'));
+    const timer = setTimeout(() => finish(new FilterSurfaceError('Filter surface image decode timed out')), 10000);
+    signal?.addEventListener('abort', abort, { once: true });
+    if (signal?.aborted)
+        abort();
+    else
+        image.decode().then(() => finish(), () => finish(new FilterSurfaceError('Filter surface image decode failed')));
+});
+// Cache only a capability result, never raster storage. Separate Documents may use
+// different Canvas implementations (including embedded webviews and test realms).
+const canvasFilterSupport = new WeakMap();
+function supportsNativeFilters(owner = document) {
+    const cached = canvasFilterSupport.get(owner);
+    if (cached !== undefined)
+        return cached;
+    const source = owner.createElement('canvas');
+    const target = owner.createElement('canvas');
+    let supported = false;
+    try {
+        source.width = source.height = target.width = target.height = 32;
+        const input = source.getContext('2d');
+        const context = target.getContext('2d');
+        // Check before assignment: on older WebKit assigning filter creates an
+        // expando property, not a working implementation.
+        if (input && context && 'filter' in context) {
+            input.fillStyle = '#fff';
+            input.fillRect(8, 8, 8, 8);
+            context.filter = 'blur(2px)';
+            context.drawImage(source, 0, 0);
+            const blurred = context.getImageData(6, 12, 1, 1).data[3] > 0;
+            context.clearRect(0, 0, 32, 32);
+            context.filter = 'drop-shadow(12px 0px 0px rgba(255, 0, 0, 0.5))';
+            context.drawImage(source, 0, 0);
+            const shadow = context.getImageData(24, 12, 1, 1).data;
+            supported = blurred && shadow[0] > 240 && shadow[1] < 10 && shadow[3] >= 126 && shadow[3] <= 129;
+        }
+    }
+    catch {
+        // Readback can itself be unavailable. Be conservative and retain SVG.
+    }
+    finally {
+        (0, exports.releaseSurface)(source);
+        (0, exports.releaseSurface)(target);
+    }
+    canvasFilterSupport.set(owner, supported);
+    return supported;
+}
+function tryNativeFilterSurface(source, { blur, shadow }, opacity, scale, signal) {
+    let filtered;
+    let output;
+    let complete = false;
+    try {
+        (0, abort_helper_1.throwIfAborted)(signal);
+        filtered = canvasLike(source);
+        const context = filtered.getContext('2d');
+        if (!context || !('filter' in context))
+            return null;
+        const functions = [];
+        if (blur)
+            functions.push(`blur(${blur * scale}px)`);
+        if (shadow)
+            functions.push(`drop-shadow(${shadow.x * scale}px ${shadow.y * scale}px ${shadow.blur * scale}px ${shadow.color})`);
+        context.filter = functions.join(' ');
+        if (context.filter === 'none')
+            return null;
+        // Canvas applies globalAlpha before filtering. Filter the complete layer
+        // at alpha 1, then composite opacity separately, including its shadow.
+        context.drawImage(source, 0, 0);
+        (0, abort_helper_1.throwIfAborted)(signal);
+        output = canvasLike(source);
+        const composite = output.getContext('2d');
+        if (!composite)
+            return null;
+        composite.globalAlpha = opacity;
+        composite.drawImage(filtered, 0, 0);
+        (0, abort_helper_1.throwIfAborted)(signal);
+        complete = true;
+        return output;
+    }
+    catch {
+        // A native allocation/draw failure may still succeed through SVG, but
+        // cancellation must never silently degrade to a successful fallback.
+        (0, abort_helper_1.throwIfAborted)(signal);
+        return null;
+    }
+    finally {
+        if (filtered)
+            (0, exports.releaseSurface)(filtered);
+        if (output && !complete)
+            (0, exports.releaseSurface)(output);
+    }
+}
+// Backend selection is internal; the public html2canvas options are unchanged.
+async function renderFilterSurface(source, filter, opacity, scale, signal) {
+    (0, abort_helper_1.throwIfAborted)(signal);
+    if ((filter.blur || filter.shadow) && supportsNativeFilters()) {
+        const output = tryNativeFilterSurface(source, filter, opacity, scale, signal);
+        if (output)
+            return output;
+    }
+    return renderSvgFilterSurface(source, filter, opacity, scale, signal);
+}
+// Explicit SVG entry is internal and allows independent fallback benchmarks/tests.
+// No foreignObject or external image is used.
+async function renderSvgFilterSurface(source, { blur, shadow }, opacity, scale, signal) {
+    (0, abort_helper_1.throwIfAborted)(signal);
+    if (!blur && !shadow) {
+        const output = canvasLike(source);
+        const context = output.getContext('2d');
+        if (!context) {
+            (0, exports.releaseSurface)(output);
+            throw new FilterSurfaceError('Filter surface canvas is unavailable');
+        }
+        context.globalAlpha = opacity;
+        try {
+            context.drawImage(source, 0, 0);
+            return output;
+        }
+        catch {
+            (0, exports.releaseSurface)(output);
+            throw new FilterSurfaceError('Filter surface image cannot be drawn');
+        }
+    }
+    const namespace = 'http://www.w3.org/2000/svg';
+    const element = (tag, attributes = {}) => {
+        const node = document.createElementNS(namespace, tag);
+        Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)));
+        return node;
+    };
+    const svg = element('svg', {
+        width: source.width,
+        height: source.height,
+        viewBox: `0 0 ${source.width} ${source.height}`
+    });
+    const defs = element('defs');
+    const filter = element('filter', {
+        id: 'composited-filter',
+        filterUnits: 'userSpaceOnUse',
+        x: 0,
+        y: 0,
+        width: source.width,
+        height: source.height,
+        'color-interpolation-filters': 'sRGB'
+    });
+    if (blur) {
+        filter.appendChild(element('feGaussianBlur', { stdDeviation: blur * scale, result: 'blurred-source' }));
+    }
+    if (shadow) {
+        // Explicit primitives avoid the narrower feDropShadow blur observed in WebKit.
+        filter.appendChild(element('feGaussianBlur', {
+            in: blur ? 'blurred-source' : 'SourceAlpha',
+            stdDeviation: shadow.blur * scale
+        }));
+        filter.appendChild(element('feOffset', { dx: shadow.x * scale, dy: shadow.y * scale, result: 'offset-shadow' }));
+        filter.appendChild(element('feFlood', { 'flood-color': shadow.color }));
+        filter.appendChild(element('feComposite', { in2: 'offset-shadow', operator: 'in' }));
+        const merge = element('feMerge');
+        merge.appendChild(element('feMergeNode'));
+        merge.appendChild(element('feMergeNode', { in: blur ? 'blurred-source' : 'SourceGraphic' }));
+        filter.appendChild(merge);
+    }
+    defs.appendChild(filter);
+    svg.appendChild(defs);
+    let sourceUrl;
+    try {
+        sourceUrl = source.toDataURL('image/png');
+        if (sourceUrl === 'data:,')
+            throw new Error('Canvas size is unsupported');
+    }
+    catch {
+        // allowTaint may intentionally produce an unreadable canvas. Keep that
+        // API behavior by letting the caller render the subtree on the old path.
+        throw new FilterSurfaceError('Filter surface pixels cannot be serialized');
+    }
+    svg.appendChild(element('image', {
+        width: source.width,
+        height: source.height,
+        href: sourceUrl,
+        filter: 'url(#composited-filter)'
+    }));
+    const image = new Image();
+    let output;
+    try {
+        image.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
+        await decodeSurface(image, signal);
+        (0, abort_helper_1.throwIfAborted)(signal);
+        output = canvasLike(source);
+        const context = output.getContext('2d');
+        if (!context)
+            throw new FilterSurfaceError('Filter surface canvas is unavailable');
+        context.globalAlpha = opacity;
+        context.drawImage(image, 0, 0);
+        return output;
+    }
+    catch (error) {
+        if (output)
+            (0, exports.releaseSurface)(output);
+        if (signal?.aborted)
+            (0, abort_helper_1.throwIfAborted)(signal);
+        throw error instanceof FilterSurfaceError
+            ? error
+            : new FilterSurfaceError('Filter surface image cannot be drawn');
+    }
+    finally {
+        image.removeAttribute('src');
+    }
+}

package/dist/lib/render/canvas/surface-bounds.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAX_SURFACE_SIDE = exports.MAX_SURFACE_PIXELS = void 0;
+exports.reserveSurface = reserveSurface;
+exports.surfaceBounds = surfaceBounds;
+exports.cropSurface = cropSurface;
+const bounds_1 = require("../../css/layout/bounds");
+const length_percentage_1 = require("../../css/types/length-percentage");
+const filter_surface_1 = require("./filter-surface");
+// Budget backing stores across all active nested surfaces in one capture.
+// Reserve source, filtered output and decoded SVG/PNG rasters conservatively.
+// Browser encoder/decoder overhead and the caller's output canvas are separate.
+exports.MAX_SURFACE_PIXELS = 16 * 1024 * 1024;
+exports.MAX_SURFACE_SIDE = 8192;
+function reserveSurface(budget, width, height) {
+    const pixels = width * height * 4;
+    if (!Number.isFinite(pixels) ||
+        width <= 0 ||
+        height <= 0 ||
+        width > exports.MAX_SURFACE_SIDE ||
+        height > exports.MAX_SURFACE_SIDE ||
+        budget.pixels + pixels > exports.MAX_SURFACE_PIXELS)
+        return 0;
+    budget.pixels += pixels;
+    return pixels;
+}
+const expand = (b, margin) => b.add(-margin, -margin, margin * 2, margin * 2);
+const union = (a, b) => new bounds_1.Bounds(Math.min(a.left, b.left), Math.min(a.top, b.top), Math.max(a.left + a.width, b.left + b.width) - Math.min(a.left, b.left), Math.max(a.top + a.height, b.top + b.height) - Math.min(a.top, b.top));
+// Conservative paint bounds for the untransformed subtree supported by this path.
+// Include overflow descendants, text ink padding, box/text shadows and nested filters.
+function surfaceBounds(container) {
+    const styles = container.styles;
+    let bounds = container.bounds;
+    for (const shadow of styles.boxShadow) {
+        if (!shadow.inset) {
+            const spread = Math.max(0, shadow.spread.number) + 3 * shadow.blur.number;
+            bounds = union(bounds, expand(container.bounds.add(shadow.offsetX.number, shadow.offsetY.number, 0, 0), spread));
+        }
+    }
+    for (const text of container.textNodes) {
+        for (const part of text.textBounds) {
+            const ink = expand(part.bounds, 2 * (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, container.bounds.height) + styles.webkitTextStrokeWidth);
+            bounds = union(bounds, ink);
+            for (const shadow of styles.textShadow) {
+                bounds = union(bounds, expand(ink.add(shadow.offsetX.number, shadow.offsetY.number, 0, 0), 3 * shadow.blur.number));
+            }
+        }
+    }
+    for (const child of container.elements) {
+        if (child.styles.isVisible())
+            bounds = union(bounds, surfaceBounds(child));
+    }
+    const filter = (0, filter_surface_1.parseSimpleFilter)(styles.filter);
+    return expand(bounds, filter ? (0, filter_surface_1.filterOutset)(filter) : 0);
+}
+function cropSurface(bounds, viewport, margin, scale) {
+    // Pixels just outside the destination still contribute through blur/shadow.
+    const area = expand(viewport, margin);
+    const left = Math.floor(Math.max(bounds.left, area.left) * scale) / scale;
+    const top = Math.floor(Math.max(bounds.top, area.top) * scale) / scale;
+    const right = Math.ceil(Math.min(bounds.left + bounds.width, area.left + area.width) * scale) / scale;
+    const bottom = Math.ceil(Math.min(bounds.top + bounds.height, area.top + area.height) * scale) / scale;
+    return new bounds_1.Bounds(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
+}

package/dist/lib/render/canvas/text-renderer.js

@@ -27,8 +27,8 @@ const iOSBrokenFonts = ['-apple-system', 'system-ui'];
 const TEXT_OVERFLOW_EPSILON = 1;
 /**
  * Detect CJK (Chinese, Japanese, Korean) characters in a string.
- * CJK characters use the ideographic baseline in browsers, which differs
- * from the alphabetic baseline used for Latin script.
+ * Vertical writing modes use it to keep CJK glyphs upright and on the
+ * ideographic baseline while other scripts are rotated.
  *
  * Covers:
  *   U+2E80–U+2FFF  CJK Radicals Supplement, Kangxi Radicals
@@ -128,15 +128,17 @@ class TextRenderer {
         return w;
     }
     /**
-     * Iterate grapheme clusters one-by-one, applying correct letter-spacing and
-     * per-script baseline for each character.
+     * Iterate grapheme clusters one-by-one, applying correct letter-spacing.
      *
      * Issue #73: When letter-spacing is non-zero, text must be rendered character by
-     * character. This helper centralises two fixes applied during that iteration:
-     *   1. Add `letterSpacing` to each character's advance width (was previously
-     *      omitted, causing characters to render without any spacing).
-     *   2. Switch to the ideographic baseline for CJK glyphs so their vertical
-     *      position matches how browsers lay them out in the DOM.
+     * character, adding `letterSpacing` to each character's advance width.
+     *
+     * In horizontal text every glyph keeps the alphabetic baseline, CJK included:
+     * inline layout aligns a whole line on its alphabetic baseline regardless of
+     * script, and `baseline` was measured for that. Drawing CJK graphemes at the
+     * same y with `textBaseline = 'ideographic'` lifts them above the Latin text
+     * next to them, and away from where the `letterSpacing === 0` whole-string
+     * path draws them.
      *
      * The `renderFn` callback receives (letter, x, y) and performs the actual draw
      * call (fillText or strokeText), allowing fill and stroke paths to share one
@@ -152,15 +154,7 @@ class TextRenderer {
         const fontString = this.ctx.font;
         let left = text.bounds.left;
         for (const letter of letters) {
-            if ((0, exports.hasCJKCharacters)(letter)) {
-                const savedBaseline = this.ctx.textBaseline;
-                this.ctx.textBaseline = 'ideographic';
-                renderFn(letter, left, y);
-                this.ctx.textBaseline = savedBaseline;
-            }
-            else {
-                renderFn(letter, left, y);
-            }
+            renderFn(letter, left, y);
             left += this.cachedMeasureText(letter, fontString) + letterSpacing;
         }
     }
@@ -213,7 +207,7 @@ class TextRenderer {
     /**
      * Render text with letter-spacing applied (fill pass).
      * When letterSpacing is 0 the whole string is drawn in one call; otherwise each
-     * grapheme is drawn individually so spacing and CJK baseline are applied correctly.
+     * grapheme is drawn individually so spacing is applied correctly.
      */
     renderTextWithLetterSpacing(text, letterSpacing, baseline, writingMode = 0 /* WRITING_MODE.HORIZONTAL_TB */) {
         this.renderFillText(text, letterSpacing, baseline, writingMode);

package/dist/lib/render/stacking-context.js

@@ -83,12 +83,13 @@ class ElementPaint {
             this.effects.push(new effects_1.TransformEffect(offsetX, offsetY, zoomMatrix));
         }
     }
-    getEffects(target) {
+    getEffects(target, surfaceRoot) {
         let inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(this.container.styles.position) === -1;
-        let parent = this.parent;
-        const effects = this.effects.slice(0);
+        let parent = this === surfaceRoot ? null : this.parent;
+        const sourceEffects = (paint) => paint.effects.filter((effect) => paint !== surfaceRoot || (!(0, effects_1.isFilterEffect)(effect) && !(0, effects_1.isOpacityEffect)(effect)));
+        const effects = sourceEffects(this);
         while (parent) {
-            const croplessEffects = parent.effects.filter((effect) => !(0, effects_1.isClipEffect)(effect));
+            const croplessEffects = sourceEffects(parent).filter((effect) => !(0, effects_1.isClipEffect)(effect));
             if (inFlow || parent.container.styles.position !== 0 /* POSITION.STATIC */ || !parent.parent) {
                 inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(parent.container.styles.position) === -1;
                 if ((0, exports.hasOverflowClip)(parent.container.styles)) {
@@ -103,7 +104,7 @@ class ElementPaint {
             else {
                 effects.unshift(...croplessEffects);
             }
-            parent = parent.parent;
+            parent = parent === surfaceRoot ? null : parent.parent;
         }
         return effects.filter((effect) => (0, bitwise_1.contains)(effect.target, target));
     }

package/dist/types/render/canvas/box-shadow-geometry.d.ts

@@ -0,0 +1,3 @@
+import { Path } from '../path';
+export declare const shadowRadius: (radius: number, spread: number) => number;
+export declare const spreadShadowPath: (paths: Path[], spread: number) => Path[];

package/dist/types/render/canvas/box-shadow-painter.d.ts

@@ -0,0 +1,13 @@
+import { BoxShadow } from '../../css/property-descriptors/box-shadow';
+import { ElementPaint } from '../stacking-context';
+import { SurfaceBudget } from './surface-bounds';
+interface ShadowOptions {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    scale: number;
+    signal?: AbortSignal;
+}
+export declare const paintBoxShadow: (ctx: CanvasRenderingContext2D, paint: ElementPaint, shadow: BoxShadow[number], options: ShadowOptions, budget: SurfaceBudget) => Promise<void>;
+export {};

package/dist/types/render/canvas/box-shadow-transform.d.ts

@@ -0,0 +1,16 @@
+import { Bounds } from '../../css/layout/bounds';
+export interface ShadowTransform {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+export interface ShadowSpace {
+    matrix: ShadowTransform;
+    viewport: Bounds;
+    scale: number;
+    uniform: boolean;
+}
+export declare const shadowSpace: (matrix: ShadowTransform, width: number, height: number) => ShadowSpace | null;

package/dist/types/render/canvas/canvas-renderer.d.ts

@@ -4,6 +4,7 @@ import { ElementContainer } from '../../dom/element-container';
 import { Path } from '../path';
 import { BoundCurves } from '../bound-curves';
 import { ReplacedElementContainer } from '../../dom/replaced-elements';
+import { SurfaceBudget } from './surface-bounds';
 import { Context } from '../../core/context';
 export type RenderConfigurations = RenderOptions & {
     backgroundColor: Color | null;
@@ -33,6 +34,8 @@ export interface RenderOptions {
     height: number;
 }
 export declare class CanvasRenderer {
+    private readonly surfaceRoot?;
+    private readonly surfaceBudget;
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
     private readonly context;
@@ -42,8 +45,11 @@ export declare class CanvasRenderer {
     private readonly borderImageRenderer;
     private readonly effectsRenderer;
     private readonly textRenderer;
-    constructor(context: Context, options: RenderConfigurations);
+    private legacySubtree;
+    constructor(context: Context, options: RenderConfigurations, surfaceRoot?: ElementPaint | undefined, surfaceBudget?: SurfaceBudget);
     renderStack(stack: StackingContext): Promise<void>;
+    private canComposite;
+    private renderCompositedStack;
     renderNode(paint: ElementPaint): Promise<void>;
     /**
      * Helper method to render text with paint order support
@@ -55,6 +61,7 @@ export declare class CanvasRenderer {
     mask(paths: Path[]): void;
     path(paths: Path[]): void;
     formatPath(paths: Path[]): void;
+    private renderSurfaceBoxShadow;
     renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void>;
     render(element: ElementContainer): Promise<HTMLCanvasElement>;
     /**

package/dist/types/render/canvas/filter-surface.d.ts

@@ -0,0 +1,17 @@
+export declare class FilterSurfaceError extends Error {
+}
+export declare const releaseSurface: (canvas: HTMLCanvasElement) => void;
+export interface SimpleFilter {
+    blur: number;
+    shadow?: {
+        x: number;
+        y: number;
+        blur: number;
+        color: string;
+    };
+}
+export declare function parseSimpleFilter(value: string | null): SimpleFilter | null;
+export declare function filterOutset(filter: SimpleFilter): number;
+export declare function supportsNativeFilters(owner?: Document): boolean;
+export declare function renderFilterSurface(source: HTMLCanvasElement, filter: SimpleFilter, opacity: number, scale: number, signal?: AbortSignal): Promise<HTMLCanvasElement>;
+export declare function renderSvgFilterSurface(source: HTMLCanvasElement, { blur, shadow }: SimpleFilter, opacity: number, scale: number, signal?: AbortSignal): Promise<HTMLCanvasElement>;

package/dist/types/render/canvas/surface-bounds.d.ts

@@ -0,0 +1,10 @@
+import { Bounds } from '../../css/layout/bounds';
+import { ElementContainer } from '../../dom/element-container';
+export declare const MAX_SURFACE_PIXELS: number;
+export declare const MAX_SURFACE_SIDE = 8192;
+export interface SurfaceBudget {
+    pixels: number;
+}
+export declare function reserveSurface(budget: SurfaceBudget, width: number, height: number): number;
+export declare function surfaceBounds(container: ElementContainer): Bounds;
+export declare function cropSurface(bounds: Bounds, viewport: Bounds, margin: number, scale: number): Bounds;

package/dist/types/render/canvas/text-renderer.d.ts

@@ -49,15 +49,17 @@ export declare class TextRenderer {
      */
     private cachedMeasureText;
     /**
-     * Iterate grapheme clusters one-by-one, applying correct letter-spacing and
-     * per-script baseline for each character.
+     * Iterate grapheme clusters one-by-one, applying correct letter-spacing.
      *
      * Issue #73: When letter-spacing is non-zero, text must be rendered character by
-     * character. This helper centralises two fixes applied during that iteration:
-     *   1. Add `letterSpacing` to each character's advance width (was previously
-     *      omitted, causing characters to render without any spacing).
-     *   2. Switch to the ideographic baseline for CJK glyphs so their vertical
-     *      position matches how browsers lay them out in the DOM.
+     * character, adding `letterSpacing` to each character's advance width.
+     *
+     * In horizontal text every glyph keeps the alphabetic baseline, CJK included:
+     * inline layout aligns a whole line on its alphabetic baseline regardless of
+     * script, and `baseline` was measured for that. Drawing CJK graphemes at the
+     * same y with `textBaseline = 'ideographic'` lifts them above the Latin text
+     * next to them, and away from where the `letterSpacing === 0` whole-string
+     * path draws them.
      *
      * The `renderFn` callback receives (letter, x, y) and performs the actual draw
      * call (fillText or strokeText), allowing fill and stroke paths to share one
@@ -68,7 +70,7 @@ export declare class TextRenderer {
     /**
      * Render text with letter-spacing applied (fill pass).
      * When letterSpacing is 0 the whole string is drawn in one call; otherwise each
-     * grapheme is drawn individually so spacing and CJK baseline are applied correctly.
+     * grapheme is drawn individually so spacing is applied correctly.
      */
     renderTextWithLetterSpacing(text: TextBounds, letterSpacing: number, baseline: number, writingMode?: WRITING_MODE): void;
     private canRenderWholeText;

package/dist/types/render/stacking-context.d.ts

@@ -21,7 +21,7 @@ export declare class ElementPaint {
     readonly curves: BoundCurves;
     listValue?: string;
     constructor(container: ElementContainer, parent: ElementPaint | null);
-    getEffects(target: EffectTarget): IElementEffect[];
+    getEffects(target: EffectTarget, surfaceRoot?: ElementPaint): IElementEffect[];
 }
 /** @internal – exported for testing only. */
 export declare const hasOverflowClip: (styles: ElementContainer["styles"]) => boolean;

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.4.3",
+  "version": "2.4.5",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",
@@ -67,6 +67,7 @@
     "express": "^5.2.1",
     "filenamify-url": "4.0.0",
     "glob": "^13.0.0",
+    "html2canvas-pro-baseline": "npm:html2canvas-pro@2.4.3",
     "husky": "^9.1.7",
     "jsdom": "^29.1.1",
     "karma": "^6.3.2",
@@ -82,6 +83,7 @@
     "node-simctl": "^8.1.2",
     "pixelmatch": "^7.2.0",
     "platform": "^1.3.6",
+    "playwright": "1.60.0",
     "pngjs": "^7.0.0",
     "prettier": "^3.3.3",
     "puppeteer": "^24.34.0",
@@ -110,7 +112,7 @@
   },
   "scripts": {
     "prebuild": "rimraf dist/ && rimraf build/ && mkdir -p dist && mkdir -p build",
-    "build": "tsc --module commonjs -p tsconfig.build.json && rolldown -c rolldown.config.ts && pnpm build:create-reftest-list && rolldown -c tests/rolldown.testrunner.config.ts",
+    "build": "tsc --module commonjs -p tsconfig.build.json && rolldown -c rolldown.config.ts && pnpm build:create-reftest-list && rolldown -c tests/rolldown.testrunner.config.ts && node scripts/copy-filter-baseline.mjs",
     "build:testrunner": "rolldown -c tests/rolldown.testrunner.config.ts",
     "build:reftest-result-list": "tsx scripts/create-reftest-result-list.ts",
     "build:create-reftest-list": "tsx scripts/create-reftest-list.ts tests/reftests/ignore.txt build/reftests.js",