html2canvas-pro 2.4.3 → 2.4.4

package/dist/lib/core/render-element.js

@@ -109,24 +109,23 @@ const renderElement = async (element, opts, config) => {
             canvas = await renderer.render(root);
             perfMonitor.end('render');
         }
-        perfMonitor.start('cleanup');
-        if (opts.removeContainer ?? true) {
-            if (!document_cloner_1.DocumentCloner.destroy(container)) {
-                context.logger.error(`Cannot detach cloned iframe as it is not in the DOM anymore`);
-            }
-        }
-        perfMonitor.end('cleanup');
-        perfMonitor.end('total');
-        context.logger.debug(`Finished rendering`);
-        if (performanceMonitoring) {
-            perfMonitor.logSummary();
-        }
-        return canvas;
     }
     finally {
-        if (root) {
-            root.restoreTree();
+        perfMonitor.start('cleanup');
+        try {
+            if (root)
+                root.restoreTree();
+        }
+        finally {
+            if (opts.removeContainer ?? true)
+                document_cloner_1.DocumentCloner.destroy(container);
+            perfMonitor.end('cleanup');
         }
     }
+    perfMonitor.end('total');
+    context.logger.debug(`Finished rendering`);
+    if (performanceMonitoring)
+        perfMonitor.logSummary();
+    return canvas;
 };
 exports.renderElement = renderElement;

package/dist/lib/css/property-descriptors/filter.js

@@ -19,7 +19,7 @@ exports.filter = {
                 // Canvas API supports the same CSS filter string format
                 switch (fn.name) {
                     case 'blur':
-                        parts.push(`blur(${renderedArgs}px)`);
+                        parts.push(`blur(${renderedArgs})`);
                         break;
                     case 'brightness':
                     case 'contrast':
@@ -33,7 +33,7 @@ exports.filter = {
                         parts.push(`grayscale(${renderedArgs})`);
                         break;
                     case 'hue-rotate':
-                        parts.push(`hue-rotate(${renderedArgs}deg)`);
+                        parts.push(`hue-rotate(${renderedArgs})`);
                         break;
                     case 'drop-shadow':
                         parts.push(`drop-shadow(${renderedArgs})`);
@@ -54,9 +54,19 @@ const renderFilterArgs = (values) => {
     const parts = [];
     for (const v of values) {
         if (v.type === 31 /* TokenType.WHITESPACE_TOKEN */) {
+            parts.push(' ');
             continue;
         }
-        if (v.type === 15 /* TokenType.DIMENSION_TOKEN */) {
+        if (v.type === 18 /* TokenType.FUNCTION */) {
+            parts.push(`${v.name}(${renderFilterArgs(v.values)})`);
+        }
+        else if (v.type === 4 /* TokenType.COMMA_TOKEN */) {
+            parts.push(',');
+        }
+        else if (v.type === 6 /* TokenType.DELIM_TOKEN */) {
+            parts.push(v.value);
+        }
+        else if (v.type === 15 /* TokenType.DIMENSION_TOKEN */) {
             parts.push(`${v.number}${v.unit}`);
         }
         else if (v.type === 17 /* TokenType.NUMBER_TOKEN */) {
@@ -72,5 +82,5 @@ const renderFilterArgs = (values) => {
             parts.push(`#${v.value}`);
         }
     }
-    return parts.join(' ');
+    return parts.join('').trim();
 };

package/dist/lib/dom/node-parser.js

@@ -106,6 +106,7 @@ exports.parseTree = parseTree;
 const createsRealStackingContext = (node, container, root) => {
     return (container.styles.isPositionedWithZIndex() ||
         container.styles.opacity < 1 ||
+        Boolean(container.styles.filter) ||
         container.styles.isTransformed() ||
         ((0, node_type_guards_1.isBodyElement)(node) && root.styles.isTransparent()));
 };

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

@@ -7,6 +7,12 @@ 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");
@@ -20,12 +26,19 @@ 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) {
+    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;
@@ -71,9 +84,101 @@ class CanvasRenderer {
     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;
@@ -103,7 +208,7 @@ class CanvasRenderer {
         }
     }
     async renderNodeContent(paint) {
-        this.effectsRenderer.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
+        this.effectsRenderer.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */, this.surfaceRoot));
         const container = paint.container;
         const curves = paint.curves;
         const styles = container.styles;
@@ -207,8 +312,61 @@ class CanvasRenderer {
     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.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);
@@ -236,10 +394,11 @@ class CanvasRenderer {
                 await this.backgroundRenderer.renderBackgroundImage(paint.container);
                 this.ctx.restore();
             }
-            styles.boxShadow
-                .slice(0)
-                .reverse()
-                .forEach((shadow) => {
+            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;
@@ -254,14 +413,17 @@ class CanvasRenderer {
                     this.ctx.clip();
                     this.path(shadowPaintingArea);
                 }
-                this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
-                this.ctx.shadowOffsetY = shadow.offsetY.number;
+                // 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;
+                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) {
@@ -335,14 +497,23 @@ class CanvasRenderer {
         }
     }
     async render(element) {
-        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;
+        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.

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');
+    }
+}