html2canvas-pro 2.4.3 → 2.4.5

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/box-shadow-geometry.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spreadShadowPath = exports.shadowRadius = void 0;
+const bezier_curve_1 = require("../bezier-curve");
+const vector_1 = require("../vector");
+// CSS Backgrounds 3, 6.1.1: growing a small corner needs the cubic adjustment
+// to approach a square continuously as the original radius approaches zero.
+const shadowRadius = (radius, spread) => {
+    const delta = spread > radius ? spread * (1 + Math.pow(radius / spread - 1, 3)) : spread;
+    return Math.max(0, radius + delta);
+};
+exports.shadowRadius = shadowRadius;
+// Input is the four clockwise border/padding corner segments from BoundCurves.
+// Translation alone preserves the old radii and turns a spread circle into a
+// rounded square. Resize each quarter ellipse around its box corner instead.
+const spreadShadowPath = (paths, spread) => {
+    if (spread === 0)
+        return paths;
+    const corners = paths.map((point, index) => {
+        if (!(0, bezier_curve_1.isBezierCurve)(point))
+            return { x: point.x, y: point.y, rx: 0, ry: 0 };
+        return {
+            x: index % 2 === 0 ? point.start.x : point.end.x,
+            y: index % 2 === 0 ? point.end.y : point.start.y,
+            rx: Math.abs(point.end.x - point.start.x),
+            ry: Math.abs(point.end.y - point.start.y)
+        };
+    });
+    const width = corners[1].x - corners[0].x + 2 * spread;
+    const height = corners[3].y - corners[0].y + 2 * spread;
+    if (width <= 0 || height <= 0)
+        return [];
+    const radii = corners.map((c) => ({ x: (0, exports.shadowRadius)(c.rx, spread), y: (0, exports.shadowRadius)(c.ry, spread) }));
+    const ratio = (size, sum) => (sum > 0 ? size / sum : 1);
+    const factor = Math.min(1, ratio(width, radii[0].x + radii[1].x), ratio(width, radii[3].x + radii[2].x), ratio(height, radii[0].y + radii[3].y), ratio(height, radii[1].y + radii[2].y));
+    return paths.map((point, index) => {
+        const corner = corners[index];
+        const x = corner.x + (index === 1 || index === 2 ? spread : -spread);
+        const y = corner.y + (index >= 2 ? spread : -spread);
+        if (!(0, bezier_curve_1.isBezierCurve)(point))
+            return new vector_1.Vector(x, y);
+        const rx = radii[index].x * factor;
+        const ry = radii[index].y * factor;
+        if (!rx || !ry)
+            return new vector_1.Vector(x, y);
+        const sx = rx / corner.rx;
+        const sy = ry / corner.ry;
+        const resize = (v) => new vector_1.Vector(x + (v.x - corner.x) * sx, y + (v.y - corner.y) * sy);
+        return new bezier_curve_1.BezierCurve(resize(point.start), resize(point.startControl), resize(point.endControl), resize(point.end));
+    });
+};
+exports.spreadShadowPath = spreadShadowPath;

package/dist/lib/render/canvas/box-shadow-painter.js

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.paintBoxShadow = void 0;
+const color_utilities_1 = require("../../css/types/color-utilities");
+const constants_1 = require("../../core/constants");
+const bound_curves_1 = require("../bound-curves");
+const box_sizing_1 = require("../box-sizing");
+const path_1 = require("../path");
+const canvas_path_1 = require("./canvas-path");
+const filter_surface_1 = require("./filter-surface");
+const surface_bounds_1 = require("./surface-bounds");
+const box_shadow_geometry_1 = require("./box-shadow-geometry");
+const box_shadow_transform_1 = require("./box-shadow-transform");
+// Separate closed subpaths plus even-odd filling avoid reversing only the order
+// of corner Beziers, which does not reverse the curves themselves.
+const complement = (ctx, rect, hole) => {
+    ctx.beginPath();
+    ctx.rect(rect.left, rect.top, rect.width, rect.height);
+    if (hole.length) {
+        (0, canvas_path_1.formatCanvasPath)(ctx, hole);
+        ctx.closePath();
+    }
+};
+const insetHole = (paint, shadow) => {
+    const spread = shadow.spread.number;
+    const box = (0, box_sizing_1.paddingBox)(paint.container);
+    if (box.width - 2 * spread <= 0 || box.height - 2 * spread <= 0)
+        return [];
+    return (0, box_shadow_geometry_1.spreadShadowPath)((0, bound_curves_1.calculatePaddingBoxPath)(paint.curves), -spread);
+};
+// Rasterize in local coordinates, blur once, and then let the destination CTM
+// transform the complete shadow. This also preserves anisotropic/sheared blur.
+const paintShadowSurface = async (ctx, paint, shadow, options, budget, space) => {
+    const padding = (0, box_sizing_1.paddingBox)(paint.container);
+    const blur = shadow.blur.number / 2;
+    const margin = Math.ceil(3 * blur) + 2;
+    const spread = shadow.spread.number;
+    const area = shadow.inset
+        ? padding
+        : paint.container.bounds.add(shadow.offsetX.number - spread, shadow.offsetY.number - spread, 2 * spread, 2 * spread);
+    const bounds = (0, surface_bounds_1.cropSurface)(area.add(-margin, -margin, 2 * margin, 2 * margin), space.viewport, margin, space.scale);
+    if (!bounds.width || !bounds.height)
+        return true;
+    const width = Math.ceil(bounds.width * space.scale);
+    const height = Math.ceil(bounds.height * space.scale);
+    const reserved = (0, surface_bounds_1.reserveSurface)(budget, width, height);
+    if (!reserved)
+        return false;
+    let source;
+    let filtered;
+    try {
+        source = ctx.canvas.ownerDocument.createElement('canvas');
+        source.width = width;
+        source.height = height;
+        const sourceCtx = source.getContext('2d');
+        if (!sourceCtx)
+            return false;
+        sourceCtx.scale(space.scale, space.scale);
+        sourceCtx.translate(-bounds.left, -bounds.top);
+        const silhouette = shadow.inset
+            ? insetHole(paint, shadow)
+            : (0, box_shadow_geometry_1.spreadShadowPath)((0, bound_curves_1.calculateBorderBoxPath)(paint.curves), spread);
+        const path = (0, path_1.transformPath)(silhouette, shadow.offsetX.number, shadow.offsetY.number, 0, 0);
+        if (shadow.inset)
+            complement(sourceCtx, bounds, path);
+        else
+            (0, canvas_path_1.createCanvasPath)(sourceCtx, path);
+        sourceCtx.fillStyle = (0, color_utilities_1.asString)(shadow.color);
+        sourceCtx.fill(shadow.inset ? 'evenodd' : 'nonzero');
+        filtered = await (0, filter_surface_1.renderFilterSurface)(source, { blur }, 1, space.scale, options.signal);
+        ctx.save();
+        try {
+            if (shadow.inset) {
+                (0, canvas_path_1.createCanvasPath)(ctx, (0, bound_curves_1.calculatePaddingBoxPath)(paint.curves));
+                ctx.clip();
+            }
+            else {
+                complement(ctx, space.viewport, (0, bound_curves_1.calculateBorderBoxPath)(paint.curves));
+                ctx.clip('evenodd');
+            }
+            ctx.drawImage(filtered, bounds.left, bounds.top, filtered.width / space.scale, filtered.height / space.scale);
+        }
+        finally {
+            ctx.restore();
+        }
+        return true;
+    }
+    catch (error) {
+        if (!(error instanceof filter_surface_1.FilterSurfaceError))
+            throw error;
+        return false;
+    }
+    finally {
+        if (filtered && filtered !== source)
+            (0, filter_surface_1.releaseSurface)(filtered);
+        if (source)
+            (0, filter_surface_1.releaseSurface)(source);
+        budget.pixels -= reserved;
+    }
+};
+const paintBoxShadow = async (ctx, paint, shadow, options, budget) => {
+    if (options.signal?.aborted)
+        throw new DOMException('The operation was aborted.', 'AbortError');
+    if ((0, color_utilities_1.isTransparent)(shadow.color))
+        return;
+    const spread = shadow.spread.number;
+    if (!shadow.inset &&
+        (paint.container.bounds.width + 2 * spread <= 0 || paint.container.bounds.height + 2 * spread <= 0))
+        return;
+    // getTransform includes capture scale, CSS transforms and their origins.
+    // Without it the CTM is unknown: approximate it with the capture transform
+    // and only ever move the mask relative to the real CTM (see below).
+    const knownTransform = typeof ctx.getTransform === 'function';
+    const matrix = knownTransform
+        ? ctx.getTransform()
+        : {
+            a: options.scale,
+            b: 0,
+            c: 0,
+            d: options.scale,
+            e: -options.x * options.scale,
+            f: -options.y * options.scale
+        };
+    const space = (0, box_shadow_transform_1.shadowSpace)(matrix, ctx.canvas.width, ctx.canvas.height);
+    // Singular transforms have zero painted area; never attempt to invert them.
+    if (!space)
+        return;
+    const { viewport } = space;
+    if (shadow.blur.number > 0 &&
+        (shadow.inset || !space.uniform) &&
+        (await paintShadowSurface(ctx, paint, shadow, options, budget, space)))
+        return;
+    const padding = (0, box_sizing_1.paddingBox)(paint.container);
+    ctx.save();
+    try {
+        if (shadow.inset && shadow.blur.number === 0) {
+            (0, canvas_path_1.createCanvasPath)(ctx, (0, bound_curves_1.calculatePaddingBoxPath)(paint.curves));
+            ctx.clip();
+            complement(ctx, padding, (0, path_1.transformPath)(insetHole(paint, shadow), shadow.offsetX.number, shadow.offsetY.number, 0, 0));
+            ctx.fillStyle = (0, color_utilities_1.asString)(shadow.color);
+            ctx.fill('evenodd');
+            return;
+        }
+        const margin = Math.ceil(shadow.blur.number * 2 +
+            Math.abs(spread) +
+            Math.abs(shadow.offsetX.number) +
+            Math.abs(shadow.offsetY.number)) + 2;
+        // Displace in OUTPUT pixels, not along a CSS axis. A rotated or reflected
+        // local x axis need not point off the left edge of the output bitmap.
+        const sourceBounds = shadow.inset
+            ? padding.add(-margin, -margin, 2 * margin, 2 * margin)
+            : paint.container.bounds.add(-spread, -spread, 2 * spread, 2 * spread);
+        const { a, b, c, d, e, f } = matrix;
+        const right = sourceBounds.left + sourceBounds.width;
+        const bottom = sourceBounds.top + sourceBounds.height;
+        const maxX = Math.max(a * sourceBounds.left + c * sourceBounds.top + e, a * right + c * sourceBounds.top + e, a * right + c * bottom + e, a * sourceBounds.left + c * bottom + e);
+        const displacement = Math.max(constants_1.SHADOW_MASK_OFFSET, maxX + margin * space.scale + 2);
+        if (shadow.inset) {
+            (0, canvas_path_1.createCanvasPath)(ctx, (0, bound_curves_1.calculatePaddingBoxPath)(paint.curves));
+            ctx.clip();
+        }
+        else {
+            complement(ctx, viewport, (0, bound_curves_1.calculateBorderBoxPath)(paint.curves));
+            ctx.clip('evenodd');
+        }
+        // Current paths retain their device coordinates across transform changes.
+        // setTransform with an approximate matrix would discard CSS transforms
+        // on the real CTM, so the legacy path translates relative to it instead.
+        if (knownTransform)
+            ctx.setTransform(a, b, c, d, e - displacement, f);
+        else
+            ctx.translate(-displacement / a, 0);
+        if (shadow.inset)
+            complement(ctx, sourceBounds, insetHole(paint, shadow));
+        else
+            (0, canvas_path_1.createCanvasPath)(ctx, (0, box_shadow_geometry_1.spreadShadowPath)((0, bound_curves_1.calculateBorderBoxPath)(paint.curves), spread));
+        if (knownTransform)
+            ctx.setTransform(a, b, c, d, e, f);
+        else
+            ctx.translate(displacement / a, 0);
+        ctx.shadowOffsetX = displacement + a * shadow.offsetX.number + c * shadow.offsetY.number;
+        ctx.shadowOffsetY = b * shadow.offsetX.number + d * shadow.offsetY.number;
+        // Allocation/filter-failure fallback remains bounded-memory. Its blur is
+        // isotropic under nonuniform transforms, but positioning stays correct.
+        ctx.shadowBlur = shadow.blur.number * space.scale;
+        ctx.shadowColor = (0, color_utilities_1.asString)(shadow.color);
+        ctx.fillStyle = 'rgb(0, 0, 0)';
+        ctx.fill(shadow.inset ? 'evenodd' : 'nonzero');
+    }
+    finally {
+        ctx.restore();
+    }
+};
+exports.paintBoxShadow = paintBoxShadow;

package/dist/lib/render/canvas/box-shadow-transform.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shadowSpace = void 0;
+const bounds_1 = require("../../css/layout/bounds");
+// Map the output bitmap back into the current user space. Capture x/y are not
+// in this space once CSS transforms (including ancestor transforms) are active.
+// An AABB of all four inverse-transformed corners is conservative under rotation.
+const shadowSpace = (matrix, width, height) => {
+    const { a, b, c, d, e, f } = matrix;
+    if (![a, b, c, d, e, f, width, height].every(Number.isFinite))
+        return null;
+    const determinant = a * d - b * c;
+    if (!Number.isFinite(determinant) || determinant === 0)
+        return null;
+    const inversePoint = (x, y) => ({
+        x: (d * (x - e) - c * (y - f)) / determinant,
+        y: (-b * (x - e) + a * (y - f)) / determinant
+    });
+    const corners = [inversePoint(0, 0), inversePoint(width, 0), inversePoint(width, height), inversePoint(0, height)];
+    if (!corners.every((point) => Number.isFinite(point.x) && Number.isFinite(point.y)))
+        return null;
+    const left = Math.min(...corners.map((point) => point.x));
+    const top = Math.min(...corners.map((point) => point.y));
+    const right = Math.max(...corners.map((point) => point.x));
+    const bottom = Math.max(...corners.map((point) => point.y));
+    // Largest singular value: enough local raster resolution for either output
+    // axis. A scalar Canvas shadow blur is exact only for similarity transforms.
+    const xx = a * a + b * b;
+    const yy = c * c + d * d;
+    const xy = a * c + b * d;
+    const scale = Math.sqrt((xx + yy + Math.hypot(xx - yy, 2 * xy)) / 2);
+    if (!Number.isFinite(scale) || scale <= 0)
+        return null;
+    const tolerance = 1e-10 * Math.max(xx, yy);
+    return {
+        matrix,
+        viewport: new bounds_1.Bounds(left, top, right - left, bottom - top),
+        scale,
+        uniform: Math.abs(xx - yy) <= tolerance && Math.abs(xy) <= tolerance
+    };
+};
+exports.shadowSpace = shadowSpace;

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");
@@ -15,17 +21,24 @@ 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 box_shadow_painter_1 = require("./box-shadow-painter");
 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,32 +394,13 @@ class CanvasRenderer {
                 await this.backgroundRenderer.renderBackgroundImage(paint.container);
                 this.ctx.restore();
             }
-            styles.boxShadow
-                .slice(0)
-                .reverse()
-                .forEach((shadow) => {
-                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);
+            for (const shadow of styles.boxShadow.slice(0).reverse()) {
+                if (this.surfaceRoot && !shadow.inset) {
+                    await this.renderSurfaceBoxShadow(paint, shadow);
+                    continue;
                 }
-                this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
-                this.ctx.shadowOffsetY = shadow.offsetY.number;
-                this.ctx.shadowColor = (0, color_utilities_1.asString)(shadow.color);
-                this.ctx.shadowBlur = shadow.blur.number;
-                this.ctx.fillStyle = shadow.inset ? (0, color_utilities_1.asString)(shadow.color) : 'rgba(0,0,0,1)';
-                this.ctx.fill();
-                this.ctx.restore();
-            });
+                await (0, box_shadow_painter_1.paintBoxShadow)(this.ctx, paint, shadow, this.options, this.surfaceBudget);
+            }
         }
         // Render border-image if present (replaces traditional borders per CSS spec)
         if (styles.borderImageSource) {
@@ -335,14 +474,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.