html2canvas-pro 2.4.4 → 2.5.0

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

@@ -1,633 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasRenderer = void 0;
-const stacking_context_1 = require("../stacking-context");
-const color_utilities_1 = require("../../css/types/color-utilities");
-const path_1 = require("../path");
-const bound_curves_1 = require("../bound-curves");
-const background_1 = require("../background");
-const box_sizing_1 = require("../box-sizing");
-const effects_1 = require("../effects");
-const mix_blend_mode_1 = require("../../css/property-descriptors/mix-blend-mode");
-const filter_surface_1 = require("./filter-surface");
-const surface_bounds_1 = require("./surface-bounds");
-const bounds_1 = require("../../css/layout/bounds");
-const bitwise_1 = require("../../core/bitwise");
-const text_renderer_1 = require("./text-renderer");
-const background_renderer_1 = require("./background-renderer");
-const border_renderer_1 = require("./border-renderer");
-const border_image_renderer_1 = require("./border-image-renderer");
-const effects_renderer_1 = require("./effects-renderer");
-const canvas_path_1 = require("./canvas-path");
-const object_fit_1 = require("../object-fit");
-const content_renderer_1 = require("./content-renderer");
-const constants_1 = require("../../core/constants");
-const writing_mode_1 = require("../../css/property-descriptors/writing-mode");
-const font_utils_1 = require("./font-utils");
-const text_1 = require("../../css/layout/text");
-class CanvasRenderer {
-    constructor(context, options, surfaceRoot, surfaceBudget = { pixels: 0 }) {
-        this.surfaceRoot = surfaceRoot;
-        this.surfaceBudget = surfaceBudget;
-        this.legacySubtree = false;
-        this.context = context;
-        this.options = options;
-        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        const ctx = this.canvas.getContext('2d');
-        if (!ctx) {
-            if (!options.canvas)
-                (0, filter_surface_1.releaseSurface)(this.canvas);
-            if (surfaceRoot)
-                throw new filter_surface_1.FilterSurfaceError('Filter surface canvas is unavailable');
-            throw new Error('Failed to get 2D rendering context from canvas');
-        }
-        this.ctx = ctx;
-        if (!options.canvas) {
-            this.canvas.width = Math.floor(options.width * options.scale);
-            this.canvas.height = Math.floor(options.height * options.scale);
-            this.canvas.style.width = `${options.width}px`;
-            this.canvas.style.height = `${options.height}px`;
-        }
-        this.ctx.scale(this.options.scale, this.options.scale);
-        this.ctx.translate(-options.x, -options.y);
-        this.ctx.textBaseline = 'bottom';
-        // Set image smoothing options
-        if (options.imageSmoothing !== undefined) {
-            this.ctx.imageSmoothingEnabled = options.imageSmoothing;
-        }
-        if (options.imageSmoothingQuality) {
-            this.ctx.imageSmoothingQuality = options.imageSmoothingQuality;
-        }
-        // Initialize specialized renderers
-        this.backgroundRenderer = new background_renderer_1.BackgroundRenderer({
-            ctx: this.ctx,
-            context: this.context,
-            canvas: this.canvas,
-            options: {
-                width: options.width,
-                height: options.height,
-                scale: options.scale
-            }
-        });
-        this.borderRenderer = new border_renderer_1.BorderRenderer({ ctx: this.ctx }, {
-            path: (paths) => this.path(paths),
-            formatPath: (paths) => this.formatPath(paths)
-        });
-        this.borderImageRenderer = new border_image_renderer_1.BorderImageRenderer(this.ctx);
-        this.effectsRenderer = new effects_renderer_1.EffectsRenderer({ ctx: this.ctx }, { path: (paths) => this.path(paths) });
-        this.textRenderer = new text_renderer_1.TextRenderer({
-            ctx: this.ctx,
-            options: { scale: options.scale }
-        });
-        this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
-    }
-    async renderStack(stack) {
-        const styles = stack.element.container.styles;
-        if (styles.isVisible()) {
-            const filter = (0, filter_surface_1.parseSimpleFilter)(styles.filter);
-            if (stack.element !== this.surfaceRoot &&
-                !this.legacySubtree &&
-                filter &&
-                (styles.filter || styles.opacity < 1) &&
-                this.canComposite(stack.element)) {
-                if (!(await this.renderCompositedStack(stack, filter))) {
-                    // A rejected optional surface must preserve the previous subtree path.
-                    this.legacySubtree = true;
-                    try {
-                        await this.renderStackContent(stack);
-                    }
-                    finally {
-                        this.legacySubtree = false;
-                    }
-                }
-                return;
-            }
-            await this.renderStackContent(stack);
-        }
-    }
-    // Draft scope: transformed, blended and clip-path subtrees keep the old path.
-    // The surface root owns its filter/opacity; ancestors are applied at composition.
-    canComposite(paint) {
-        const supported = (container) => {
-            const styles = container.styles;
-            return (!styles.isTransformed() &&
-                styles.zoom === 1 &&
-                styles.mixBlendMode === mix_blend_mode_1.MIX_BLEND_MODE.NORMAL &&
-                styles.clipPath.type === 0 /* CLIP_PATH_TYPE.NONE */ &&
-                !(0, bitwise_1.contains)(styles.display, 2048 /* DISPLAY.LIST_ITEM */) &&
-                (0, filter_surface_1.parseSimpleFilter)(styles.filter) !== null);
-        };
-        const subtree = (container) => supported(container) && container.elements.every(subtree);
-        let ancestor = paint.parent;
-        while (ancestor && ancestor !== this.surfaceRoot) {
-            if (!supported(ancestor.container))
-                return false;
-            ancestor = ancestor.parent;
-        }
-        return subtree(paint.container);
-    }
-    async renderCompositedStack(stack, filter) {
-        const signal = this.options.signal;
-        if (signal?.aborted)
-            throw new DOMException('The operation was aborted.', 'AbortError');
-        const bounds = (0, surface_bounds_1.cropSurface)((0, surface_bounds_1.surfaceBounds)(stack.element.container), new bounds_1.Bounds(this.options.x, this.options.y, this.options.width, this.options.height), (0, filter_surface_1.filterOutset)(filter), this.options.scale);
-        if (!bounds.width || !bounds.height)
-            return true;
-        const reserved = (0, surface_bounds_1.reserveSurface)(this.surfaceBudget, Math.ceil(bounds.width * this.options.scale), Math.ceil(bounds.height * this.options.scale));
-        if (!reserved) {
-            this.context.logger.info('Filter surface budget exceeded; using the existing renderer');
-            return false;
-        }
-        const options = {
-            ...this.options,
-            canvas: undefined,
-            backgroundColor: null,
-            x: bounds.left,
-            y: bounds.top,
-            width: bounds.width,
-            height: bounds.height
-        };
-        let source;
-        let filtered;
-        try {
-            source = new CanvasRenderer(this.context, options, stack.element, this.surfaceBudget);
-            await source.renderStackContent(stack);
-            source.effectsRenderer.applyEffects([]);
-            filtered = await (0, filter_surface_1.renderFilterSurface)(source.canvas, filter, stack.element.container.styles.opacity, options.scale, signal);
-            if (signal?.aborted)
-                throw new DOMException('The operation was aborted.', 'AbortError');
-            const own = stack.element.effects;
-            const effects = stack.element
-                .getEffects(4 /* EffectTarget.CONTENT */, this.surfaceRoot)
-                .filter((effect) => !own.includes(effect) ||
-                (!(0, effects_1.isFilterEffect)(effect) && !(0, effects_1.isOpacityEffect)(effect) && !(0, effects_1.isClipEffect)(effect)));
-            this.effectsRenderer.applyEffects(effects);
-            this.ctx.drawImage(filtered, options.x, options.y, filtered.width / options.scale, filtered.height / options.scale);
-            return true;
-        }
-        catch (error) {
-            if (!(error instanceof filter_surface_1.FilterSurfaceError))
-                throw error;
-            this.context.logger.info(`${error.message}; using the existing renderer`);
-            return false;
-        }
-        finally {
-            if (source)
-                (0, filter_surface_1.releaseSurface)(source.canvas);
-            if (filtered)
-                (0, filter_surface_1.releaseSurface)(filtered);
-            this.surfaceBudget.pixels -= reserved;
-        }
-    }
-    async renderNode(paint) {
-        if (paint.container.debugRender) {
-            debugger;
-        }
-        if (paint.container.styles.isVisible()) {
-            await this.renderNodeBackgroundAndBorders(paint);
-            await this.renderNodeContent(paint);
-        }
-    }
-    /**
-     * Helper method to render text with paint order support
-     * Reduces code duplication in line-clamp and normal rendering
-     */
-    // Helper method to truncate text and add ellipsis if needed
-    renderReplacedElement(container, curves, image) {
-        const intrinsicWidth = image.naturalWidth || container.intrinsicWidth;
-        const intrinsicHeight = image.naturalHeight || container.intrinsicHeight;
-        if (image && intrinsicWidth > 0 && intrinsicHeight > 0) {
-            const box = (0, box_sizing_1.contentBox)(container);
-            const path = (0, bound_curves_1.calculatePaddingBoxPath)(curves);
-            this.path(path);
-            this.ctx.save();
-            this.ctx.clip();
-            const { sx, sy, sw, sh, dx, dy, dw, dh } = (0, object_fit_1.calculateObjectFitRendering)(intrinsicWidth, intrinsicHeight, box, container.styles.objectFit, container.styles.objectPosition);
-            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
-            this.ctx.restore();
-        }
-    }
-    async renderNodeContent(paint) {
-        this.effectsRenderer.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */, this.surfaceRoot));
-        const container = paint.container;
-        const curves = paint.curves;
-        const styles = container.styles;
-        // Use content box for text overflow calculation (excludes padding and border)
-        const textBounds = (0, box_sizing_1.contentBox)(container);
-        for (const child of container.textNodes) {
-            await this.textRenderer.renderTextNode(child, styles, textBounds);
-        }
-        await (0, content_renderer_1.renderReplacedElements)(this.ctx, this.context, {
-            scale: this.options.scale,
-            backgroundColor: this.options.backgroundColor,
-            x: this.options.x,
-            y: this.options.y,
-            width: this.options.width,
-            height: this.options.height
-        }, (ctx, opts) => new CanvasRenderer(ctx, opts), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
-        (0, content_renderer_1.renderFormElements)(this.ctx, this.textRenderer, this.path.bind(this), container, styles);
-        await (0, content_renderer_1.renderListMarker)(this.ctx, this.context, this.textRenderer, paint, container, styles);
-    }
-    async renderStackContent(stack) {
-        if (stack.element.container.debugRender) {
-            debugger;
-        }
-        const signal = this.options.signal;
-        // https://www.w3.org/TR/css-position-3/#painting-order
-        // 1. the background and borders of the element forming the stacking context.
-        await this.renderNodeBackgroundAndBorders(stack.element);
-        // 2. the child stacking contexts with negative stack levels (most negative first).
-        for (const child of stack.negativeZIndex) {
-            if (signal?.aborted)
-                throw new DOMException('The operation was aborted.', 'AbortError');
-            await this.renderStack(child);
-        }
-        // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
-        if (signal?.aborted)
-            throw new DOMException('The operation was aborted.', 'AbortError');
-        await this.renderNodeContent(stack.element);
-        for (const child of stack.nonInlineLevel) {
-            await this.renderNode(child);
-        }
-        // 4. All non-positioned floating descendants, in tree order. For each one of these,
-        // treat the element as if it created a new stacking context, but any positioned descendants and descendants
-        // which actually create a new stacking context should be considered part of the parent stacking context,
-        // not this new one.
-        for (const child of stack.nonPositionedFloats) {
-            if (signal?.aborted)
-                throw new DOMException('The operation was aborted.', 'AbortError');
-            await this.renderStack(child);
-        }
-        // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
-        for (const child of stack.nonPositionedInlineLevel) {
-            if (signal?.aborted)
-                throw new DOMException('The operation was aborted.', 'AbortError');
-            await this.renderStack(child);
-        }
-        for (const child of stack.inlineLevel) {
-            await this.renderNode(child);
-        }
-        // 6. All positioned, opacity or transform descendants, in tree order that fall into the following categories:
-        //  All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
-        //  For those with 'z-index: auto', treat the element as if it created a new stacking context,
-        //  but any positioned descendants and descendants which actually create a new stacking context should be
-        //  considered part of the parent stacking context, not this new one. For those with 'z-index: 0',
-        //  treat the stacking context generated atomically.
-        //
-        //  All opacity descendants with opacity less than 1
-        //
-        //  All transform descendants with transform other than none
-        for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {
-            if (signal?.aborted)
-                throw new DOMException('The operation was aborted.', 'AbortError');
-            await this.renderStack(child);
-        }
-        // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index
-        // order (smallest first) then tree order.
-        for (const child of stack.positiveZIndex) {
-            if (signal?.aborted)
-                throw new DOMException('The operation was aborted.', 'AbortError');
-            await this.renderStack(child);
-        }
-    }
-    mask(paths) {
-        this.ctx.beginPath();
-        // Anchor the mask rectangle to (options.x, options.y) instead of (0, 0)
-        // because ctx.translate(-options.x, -options.y) shifts the coordinate system.
-        // Fix for Issue #230: inset box-shadow rendering was inverted for elements
-        // not at document origin due to the mask covering the wrong region.
-        const x = this.options.x;
-        const y = this.options.y;
-        this.ctx.moveTo(x, y);
-        this.ctx.lineTo(x + this.options.width, y);
-        this.ctx.lineTo(x + this.options.width, y + this.options.height);
-        this.ctx.lineTo(x, y + this.options.height);
-        this.ctx.lineTo(x, y);
-        this.formatPath(paths.slice(0).reverse());
-        this.ctx.closePath();
-    }
-    path(paths) {
-        (0, canvas_path_1.createCanvasPath)(this.ctx, paths);
-    }
-    formatPath(paths) {
-        (0, canvas_path_1.formatCanvasPath)(this.ctx, paths);
-    }
-    async renderSurfaceBoxShadow(paint, shadow) {
-        // Rasterize a visible silhouette, then blur it. Linux WebKit can drop the
-        // interior of Canvas shadows whose solid mask is outside a cropped canvas.
-        const spread = shadow.spread.number;
-        const blur = shadow.blur.number / 2;
-        const margin = Math.ceil(3 * blur) + 1;
-        const box = paint.container.bounds.add(-spread, -spread, 2 * spread, 2 * spread);
-        if (box.width <= 0 || box.height <= 0)
-            return;
-        const scale = this.options.scale;
-        const bounds = (0, surface_bounds_1.cropSurface)(box.add(-margin, -margin, 2 * margin, 2 * margin), new bounds_1.Bounds(this.options.x - shadow.offsetX.number, this.options.y - shadow.offsetY.number, this.options.width, this.options.height), margin, scale);
-        if (!bounds.width || !bounds.height)
-            return;
-        const width = Math.ceil(bounds.width * scale), height = Math.ceil(bounds.height * scale);
-        const reserved = (0, surface_bounds_1.reserveSurface)(this.surfaceBudget, width, height);
-        if (!reserved)
-            throw new filter_surface_1.FilterSurfaceError('Box shadow surface budget exceeded');
-        let source;
-        let filtered;
-        try {
-            source = document.createElement('canvas');
-            source.width = width;
-            source.height = height;
-            const ctx = source.getContext('2d');
-            if (!ctx)
-                throw new filter_surface_1.FilterSurfaceError('Box shadow surface canvas is unavailable');
-            ctx.scale(scale, scale);
-            ctx.translate(-bounds.left, -bounds.top);
-            (0, canvas_path_1.createCanvasPath)(ctx, (0, path_1.transformPath)((0, bound_curves_1.calculateBorderBoxPath)(paint.curves), -spread, -spread, 2 * spread, 2 * spread));
-            ctx.fillStyle = (0, color_utilities_1.asString)(shadow.color);
-            ctx.fill();
-            filtered = await (0, filter_surface_1.renderFilterSurface)(source, { blur }, 1, scale, this.options.signal);
-            this.ctx.save();
-            try {
-                this.ctx.beginPath();
-                this.ctx.rect(this.options.x, this.options.y, this.options.width, this.options.height);
-                (0, canvas_path_1.formatCanvasPath)(this.ctx, (0, bound_curves_1.calculateBorderBoxPath)(paint.curves));
-                this.ctx.closePath();
-                this.ctx.clip('evenodd');
-                this.ctx.drawImage(filtered, bounds.left + shadow.offsetX.number, bounds.top + shadow.offsetY.number, filtered.width / scale, filtered.height / scale);
-            }
-            finally {
-                this.ctx.restore();
-            }
-        }
-        finally {
-            if (source)
-                (0, filter_surface_1.releaseSurface)(source);
-            if (filtered)
-                (0, filter_surface_1.releaseSurface)(filtered);
-            this.surfaceBudget.pixels -= reserved;
-        }
-    }
-    async renderNodeBackgroundAndBorders(paint) {
-        this.effectsRenderer.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */, this.surfaceRoot));
-        const styles = paint.container.styles;
-        const hasBackground = !(0, color_utilities_1.isTransparent)(styles.backgroundColor) || styles.backgroundImage.length;
-        const hasTextClip = hasTextBackgroundClip(styles);
-        const borders = [
-            { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth },
-            { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth },
-            { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth },
-            { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth }
-        ];
-        const backgroundClipValue = (0, background_1.getBackgroundValueForIndex)(styles.backgroundClip, 0);
-        const backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(backgroundClipValue, paint.curves);
-        if (hasBackground || styles.boxShadow.length) {
-            // Handle background-clip: text
-            if (hasTextClip && paint.container.textNodes.length > 0) {
-                await this.renderTextClippedBackground(paint);
-            }
-            else {
-                this.ctx.save();
-                this.path(backgroundPaintingArea);
-                this.ctx.clip();
-                if (!(0, color_utilities_1.isTransparent)(styles.backgroundColor)) {
-                    this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.backgroundColor);
-                    this.ctx.fill();
-                }
-                await this.backgroundRenderer.renderBackgroundImage(paint.container);
-                this.ctx.restore();
-            }
-            for (const shadow of styles.boxShadow.slice(0).reverse()) {
-                if (this.surfaceRoot && !shadow.inset) {
-                    await this.renderSurfaceBoxShadow(paint, shadow);
-                    continue;
-                }
-                this.ctx.save();
-                const borderBoxArea = (0, bound_curves_1.calculateBorderBoxPath)(paint.curves);
-                const maskOffset = shadow.inset ? 0 : constants_1.SHADOW_MASK_OFFSET;
-                const shadowPaintingArea = (0, path_1.transformPath)(borderBoxArea, -maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number, (shadow.inset ? 1 : -1) * shadow.spread.number, shadow.spread.number * (shadow.inset ? -2 : 2), shadow.spread.number * (shadow.inset ? -2 : 2));
-                if (shadow.inset) {
-                    this.path(borderBoxArea);
-                    this.ctx.clip();
-                    this.mask(shadowPaintingArea);
-                }
-                else {
-                    this.mask(borderBoxArea);
-                    this.ctx.clip();
-                    this.path(shadowPaintingArea);
-                }
-                // Canvas shadow metrics ignore the transform. Surface sources
-                // need capture-pixel offsets, including the displaced mask.
-                const shadowScale = this.surfaceRoot ? this.options.scale : 1;
-                this.ctx.shadowOffsetX = (shadow.offsetX.number + maskOffset) * shadowScale;
-                this.ctx.shadowOffsetY = shadow.offsetY.number * shadowScale;
-                this.ctx.shadowColor = (0, color_utilities_1.asString)(shadow.color);
-                this.ctx.shadowBlur = shadow.blur.number * shadowScale;
-                this.ctx.fillStyle = shadow.inset ? (0, color_utilities_1.asString)(shadow.color) : 'rgba(0,0,0,1)';
-                this.ctx.fill();
-                this.ctx.restore();
-            }
-        }
-        // Render border-image if present (replaces traditional borders per CSS spec)
-        if (styles.borderImageSource) {
-            const source = styles.borderImageSource;
-            if (source.type === 0 /* CSSImageType.URL */) {
-                const url = source.url;
-                try {
-                    const image = await this.context.cache.match(url);
-                    if (image) {
-                        const bounds = paint.container.bounds;
-                        this.borderImageRenderer.renderBorderImage(bounds, image, styles.borderImageSlice, styles.borderImageRepeat, Math.max(0, styles.borderTopWidth), Math.max(0, styles.borderRightWidth), Math.max(0, styles.borderBottomWidth), Math.max(0, styles.borderLeftWidth));
-                    }
-                }
-                catch (e) {
-                    this.context.logger.error(`Error loading border-image ${url}`);
-                }
-            }
-            // When border-image is present, skip regular border rendering
-            return;
-        }
-        let side = 0;
-        for (const border of borders) {
-            if (border.style !== 0 /* BORDER_STYLE.NONE */ && !(0, color_utilities_1.isTransparent)(border.color) && border.width > 0) {
-                const renderBorderSide = async () => {
-                    if (border.style === 2 /* BORDER_STYLE.DASHED */) {
-                        await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */);
-                    }
-                    else if (border.style === 3 /* BORDER_STYLE.DOTTED */) {
-                        await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */);
-                    }
-                    else if (border.style === 4 /* BORDER_STYLE.DOUBLE */) {
-                        await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
-                    }
-                    else {
-                        await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
-                    }
-                };
-                // Browsers break a <fieldset>'s top border where its <legend>
-                // sits, instead of drawing the border through the legend (issue
-                // #227). Render the top border in two clipped segments around
-                // the legend's horizontal span.
-                const legend = paint.container.legendBounds;
-                if (side === 0 && legend) {
-                    const bounds = paint.container.bounds;
-                    const legendLeft = legend.left - bounds.left;
-                    const legendRight = legend.left + legend.width - bounds.left;
-                    if (legendLeft > 0) {
-                        this.ctx.save();
-                        this.ctx.beginPath();
-                        this.ctx.rect(bounds.left, bounds.top, legendLeft, bounds.height);
-                        this.ctx.clip();
-                        await renderBorderSide();
-                        this.ctx.restore();
-                    }
-                    const rightStart = bounds.left + legendRight;
-                    const rightWidth = bounds.width - legendRight;
-                    if (rightWidth > 0) {
-                        this.ctx.save();
-                        this.ctx.beginPath();
-                        this.ctx.rect(rightStart, bounds.top, rightWidth, bounds.height);
-                        this.ctx.clip();
-                        await renderBorderSide();
-                        this.ctx.restore();
-                    }
-                }
-                else {
-                    await renderBorderSide();
-                }
-            }
-            side++;
-        }
-    }
-    async render(element) {
-        try {
-            if (this.options.backgroundColor) {
-                this.ctx.fillStyle = (0, color_utilities_1.asString)(this.options.backgroundColor);
-                this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
-            }
-            const stack = (0, stacking_context_1.parseStackingContexts)(element);
-            await this.renderStack(stack);
-            this.effectsRenderer.applyEffects([]);
-            return this.canvas;
-        }
-        catch (error) {
-            // Failed captures have no returned canvas. Release only our backing
-            // store; a canvas supplied by the caller remains caller-owned.
-            if (!this.options.canvas)
-                (0, filter_surface_1.releaseSurface)(this.canvas);
-            throw error;
-        }
-    }
-    /**
-     * Render background clipped to text shape using offscreen canvas with destination-in compositing.
-     * This implements background-clip: text support.
-     *
-     * Algorithm:
-     *   1. Draw background (color + images) onto an offscreen canvas
-     *   2. Use destination-in compositing to clip the background to the text glyph shapes
-     *   3. Composite the result back onto the main canvas
-     *
-     * The offscreen canvas uses CSS-pixel dimensions (not device-pixel) because the
-     * background renderer handles scaling internally via BackgroundRenderer options.
-     */
-    async renderTextClippedBackground(paint) {
-        const container = paint.container;
-        const styles = container.styles;
-        const bounds = container.bounds;
-        if (bounds.width <= 0 || bounds.height <= 0) {
-            return;
-        }
-        const ownerDocument = this.canvas.ownerDocument ?? document;
-        const offscreen = ownerDocument.createElement('canvas');
-        const width = Math.ceil(bounds.width);
-        const height = Math.ceil(bounds.height);
-        offscreen.width = width;
-        offscreen.height = height;
-        const offCtx = offscreen.getContext('2d');
-        if (!offCtx) {
-            return;
-        }
-        // ── Set up font matching the main context ──
-        const [fontString] = this.textRenderer.createFontStyle(styles);
-        offCtx.font = fontString;
-        offCtx.textBaseline = 'alphabetic';
-        offCtx.textAlign = 'left';
-        offCtx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
-        // Measure baseline from the actual rendered font
-        const baseline = (0, font_utils_1.measureBaseline)(offCtx, styles.fontSize.number);
-        // ── Draw background onto offscreen canvas ──
-        const bgRenderer = new background_renderer_1.BackgroundRenderer({
-            ctx: offCtx,
-            context: this.context,
-            canvas: offscreen,
-            options: { width, height, scale: 1 }
-        });
-        if (!(0, color_utilities_1.isTransparent)(styles.backgroundColor)) {
-            offCtx.fillStyle = (0, color_utilities_1.asString)(styles.backgroundColor);
-            offCtx.fillRect(0, 0, width, height);
-        }
-        // Background images are positioned relative to the element bounds,
-        // so we need the BackgroundRenderer to compute offsets in the same
-        // coordinate space as the main renderer.  We do that by translating
-        // the offscreen context so that the element origin (bounds.left, bounds.top)
-        // falls at (0, 0).
-        offCtx.save();
-        offCtx.translate(-bounds.left, -bounds.top);
-        await bgRenderer.renderBackgroundImage(container);
-        offCtx.restore();
-        // ── Clip background to text glyphs ──
-        // destination-in: keep background pixels only where the source (text) is non-transparent.
-        offCtx.globalCompositeOperation = 'destination-in';
-        offCtx.fillStyle = '#000';
-        const writingMode = styles.writingMode;
-        const letterSpacing = styles.letterSpacing;
-        for (const textNode of container.textNodes) {
-            for (const textBound of textNode.textBounds) {
-                // Offset from element bounds to canvas-local coordinates
-                const localLeft = textBound.bounds.left - bounds.left;
-                const localTop = textBound.bounds.top - bounds.top + baseline;
-                if (letterSpacing > 0) {
-                    this.renderTextMaskWithLetterSpacing(offCtx, textBound, letterSpacing, localLeft, localTop, writingMode);
-                }
-                else {
-                    offCtx.fillText(textBound.text, localLeft, localTop);
-                }
-            }
-        }
-        // ── Composite back to main canvas ──
-        this.ctx.drawImage(offscreen, bounds.left, bounds.top);
-    }
-    /**
-     * Render text glyphs one-by-one as a mask, applying letter-spacing between characters.
-     * This ensures the mask matches how the text renderer lays out the characters.
-     */
-    renderTextMaskWithLetterSpacing(ctx, text, letterSpacing, x, y, writingMode) {
-        const letters = (0, text_1.segmentGraphemes)(text.text);
-        let offset = x;
-        for (const letter of letters) {
-            if ((0, writing_mode_1.isVerticalWritingMode)(writingMode)) {
-                // Vertical writing mode: not yet supported for text-clip;
-                // fall back to single fillText call.
-                ctx.fillText(text.text, x, y);
-                return;
-            }
-            ctx.fillText(letter, offset, y);
-            offset += ctx.measureText(letter).width + letterSpacing;
-        }
-    }
-}
-exports.CanvasRenderer = CanvasRenderer;
-const calculateBackgroundCurvedPaintingArea = (clip, curves) => {
-    switch (clip) {
-        case 0 /* BACKGROUND_CLIP.BORDER_BOX */:
-            return (0, bound_curves_1.calculateBorderBoxPath)(curves);
-        case 2 /* BACKGROUND_CLIP.CONTENT_BOX */:
-            return (0, bound_curves_1.calculateContentBoxPath)(curves);
-        case 1 /* BACKGROUND_CLIP.PADDING_BOX */:
-        default:
-            return (0, bound_curves_1.calculatePaddingBoxPath)(curves);
-    }
-};
-/**
- * Check if any background layer uses background-clip: text
- */
-const hasTextBackgroundClip = (styles) => {
-    return styles.backgroundClip.some((clip) => clip === 3 /* BACKGROUND_CLIP.TEXT */);
-};