html2canvas-pro 2.4.3 → 2.4.4

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.4.3 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.4.4 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -5720,7 +5720,7 @@
 				const renderedArgs = renderFilterArgs(fn.values);
 				switch (fn.name) {
 					case "blur":
-						parts.push(`blur(${renderedArgs}px)`);
+						parts.push(`blur(${renderedArgs})`);
 						break;
 					case "brightness":
 					case "contrast":
@@ -5734,7 +5734,7 @@
 						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})`);
@@ -5752,14 +5752,20 @@
 	const renderFilterArgs = (values) => {
 		const parts = [];
 		for (const v of values) {
-			if (v.type === 31) continue;
-			if (v.type === 15) parts.push(`${v.number}${v.unit}`);
+			if (v.type === 31) {
+				parts.push(" ");
+				continue;
+			}
+			if (v.type === 18) parts.push(`${v.name}(${renderFilterArgs(v.values)})`);
+			else if (v.type === 4) parts.push(",");
+			else if (v.type === 6) parts.push(v.value);
+			else if (v.type === 15) parts.push(`${v.number}${v.unit}`);
 			else if (v.type === 17) parts.push(`${v.number}`);
 			else if (v.type === 16) parts.push(`${v.number}%`);
 			else if (v.type === 20) parts.push(v.value);
 			else if (v.type === 5) parts.push(`#${v.value}`);
 		}
-		return parts.join(" ");
+		return parts.join("").trim();
 	};
 	//#endregion
 	//#region src/css/property-descriptors/font-variant-ligatures.ts
@@ -8309,7 +8315,7 @@
 		return container;
 	};
 	const createsRealStackingContext = (node, container, root) => {
-		return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
+		return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || Boolean(container.styles.filter) || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
 	};
 	const createsStackingContext = (styles) => {
 		if (styles.isPositioned() || styles.isFloating()) return true;
@@ -8746,12 +8752,13 @@
 				this.effects.push(new TransformEffect(offsetX, offsetY, zoomMatrix));
 			}
 		}
-		getEffects(target) {
+		getEffects(target, surfaceRoot) {
 			let inFlow = [2, 3].indexOf(this.container.styles.position) === -1;
-			let parent = this.parent;
-			const effects = this.effects.slice(0);
+			let parent = this === surfaceRoot ? null : this.parent;
+			const sourceEffects = (paint) => paint.effects.filter((effect) => paint !== surfaceRoot || !isFilterEffect(effect) && !isOpacityEffect(effect));
+			const effects = sourceEffects(this);
 			while (parent) {
-				const croplessEffects = parent.effects.filter((effect) => !isClipEffect(effect));
+				const croplessEffects = sourceEffects(parent).filter((effect) => !isClipEffect(effect));
 				if (inFlow || parent.container.styles.position !== 0 || !parent.parent) {
 					inFlow = [2, 3].indexOf(parent.container.styles.position) === -1;
 					if (hasOverflowClip(parent.container.styles)) {
@@ -8761,7 +8768,7 @@
 					}
 					effects.unshift(...croplessEffects);
 				} else effects.unshift(...croplessEffects);
-				parent = parent.parent;
+				parent = parent === surfaceRoot ? null : parent.parent;
 			}
 			return effects.filter((effect) => contains(effect.target, target));
 		}
@@ -9042,6 +9049,268 @@
 		}
 	};
 	//#endregion
+	//#region src/core/abort-helper.ts
+	/**
+	* AbortSignal helper utilities.
+	*/
+	/**
+	* Throw a DOMException if the given AbortSignal is already aborted.
+	* Used at checkpoints throughout the rendering pipeline to support
+	* cancellable renders.
+	*
+	* @param signal - The AbortSignal to check. If undefined or not aborted, this is a no-op.
+	* @throws {DOMException} With name 'AbortError' if the signal has been aborted.
+	*/
+	const throwIfAborted = (signal) => {
+		if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
+	};
+	//#endregion
+	//#region src/render/canvas/filter-surface.ts
+	var FilterSurfaceError = class extends Error {};
+	const releaseSurface = (canvas) => {
+		canvas.width = canvas.height = 0;
+	};
+	function parseSimpleFilter(value) {
+		if (!value || value === "none") return { blur: 0 };
+		const effect = new 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
+			} : void 0
+		};
+	}
+	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")), 1e4);
+		signal?.addEventListener("abort", abort, { once: true });
+		if (signal?.aborted) abort();
+		else image.decode().then(() => finish(), () => finish(new FilterSurfaceError("Filter surface image decode failed")));
+	});
+	const canvasFilterSupport = /* @__PURE__ */ new WeakMap();
+	function supportsNativeFilters(owner = document) {
+		const cached = canvasFilterSupport.get(owner);
+		if (cached !== void 0) 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");
+			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 {} finally {
+			releaseSurface(source);
+			releaseSurface(target);
+		}
+		canvasFilterSupport.set(owner, supported);
+		return supported;
+	}
+	function tryNativeFilterSurface(source, { blur, shadow }, opacity, scale, signal) {
+		let filtered;
+		let output;
+		let complete = false;
+		try {
+			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;
+			context.drawImage(source, 0, 0);
+			throwIfAborted(signal);
+			output = canvasLike(source);
+			const composite = output.getContext("2d");
+			if (!composite) return null;
+			composite.globalAlpha = opacity;
+			composite.drawImage(filtered, 0, 0);
+			throwIfAborted(signal);
+			complete = true;
+			return output;
+		} catch {
+			throwIfAborted(signal);
+			return null;
+		} finally {
+			if (filtered) releaseSurface(filtered);
+			if (output && !complete) releaseSurface(output);
+		}
+	}
+	async function renderFilterSurface(source, filter, opacity, scale, signal) {
+		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);
+	}
+	async function renderSvgFilterSurface(source, { blur, shadow }, opacity, scale, signal) {
+		throwIfAborted(signal);
+		if (!blur && !shadow) {
+			const output = canvasLike(source);
+			const context = output.getContext("2d");
+			if (!context) {
+				releaseSurface(output);
+				throw new FilterSurfaceError("Filter surface canvas is unavailable");
+			}
+			context.globalAlpha = opacity;
+			try {
+				context.drawImage(source, 0, 0);
+				return output;
+			} catch {
+				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) {
+			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 {
+			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);
+			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) releaseSurface(output);
+			if (signal?.aborted) throwIfAborted(signal);
+			throw error instanceof FilterSurfaceError ? error : new FilterSurfaceError("Filter surface image cannot be drawn");
+		} finally {
+			image.removeAttribute("src");
+		}
+	}
+	function reserveSurface(budget, width, height) {
+		const pixels = width * height * 4;
+		if (!Number.isFinite(pixels) || width <= 0 || height <= 0 || width > 8192 || height > 8192 || budget.pixels + pixels > 16777216) return 0;
+		budget.pixels += pixels;
+		return pixels;
+	}
+	const expand = (b, margin) => b.add(-margin, -margin, margin * 2, margin * 2);
+	const union = (a, b) => new Bounds(Math.min(a.left, b.left), Math.min(a.top, b.top), Math.max(a.left + a.width, b.left + b.width) - Math.min(a.left, b.left), Math.max(a.top + a.height, b.top + b.height) - Math.min(a.top, b.top));
+	function surfaceBounds(container) {
+		const styles = container.styles;
+		let bounds = container.bounds;
+		for (const shadow of styles.boxShadow) if (!shadow.inset) {
+			const spread = Math.max(0, shadow.spread.number) + 3 * shadow.blur.number;
+			bounds = union(bounds, expand(container.bounds.add(shadow.offsetX.number, shadow.offsetY.number, 0, 0), spread));
+		}
+		for (const text of container.textNodes) for (const part of text.textBounds) {
+			const ink = expand(part.bounds, 2 * getAbsoluteValue(styles.fontSize, container.bounds.height) + styles.webkitTextStrokeWidth);
+			bounds = union(bounds, ink);
+			for (const shadow of styles.textShadow) bounds = union(bounds, expand(ink.add(shadow.offsetX.number, shadow.offsetY.number, 0, 0), 3 * shadow.blur.number));
+		}
+		for (const child of container.elements) if (child.styles.isVisible()) bounds = union(bounds, surfaceBounds(child));
+		const filter = parseSimpleFilter(styles.filter);
+		return expand(bounds, filter ? filterOutset(filter) : 0);
+	}
+	function cropSurface(bounds, viewport, margin, scale) {
+		const area = expand(viewport, margin);
+		const left = Math.floor(Math.max(bounds.left, area.left) * scale) / scale;
+		const top = Math.floor(Math.max(bounds.top, area.top) * scale) / scale;
+		const right = Math.ceil(Math.min(bounds.left + bounds.width, area.left + area.width) * scale) / scale;
+		const bottom = Math.ceil(Math.min(bounds.top + bounds.height, area.top + area.height) * scale) / scale;
+		return new Bounds(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
+	}
+	//#endregion
 	//#region src/render/canvas/text/text-decoration-renderer.ts
 	var TextDecorationRenderer = class {
 		constructor(ctx) {
@@ -9171,8 +9440,8 @@
 	const TEXT_OVERFLOW_EPSILON = 1;
 	/**
 	* Detect CJK (Chinese, Japanese, Korean) characters in a string.
-	* CJK characters use the ideographic baseline in browsers, which differs
-	* from the alphabetic baseline used for Latin script.
+	* Vertical writing modes use it to keep CJK glyphs upright and on the
+	* ideographic baseline while other scripts are rotated.
 	*
 	* Covers:
 	*   U+2E80–U+2FFF  CJK Radicals Supplement, Kangxi Radicals
@@ -9242,15 +9511,17 @@
 			return w;
 		}
 		/**
-		* Iterate grapheme clusters one-by-one, applying correct letter-spacing and
-		* per-script baseline for each character.
+		* Iterate grapheme clusters one-by-one, applying correct letter-spacing.
 		*
 		* Issue #73: When letter-spacing is non-zero, text must be rendered character by
-		* character. This helper centralises two fixes applied during that iteration:
-		*   1. Add `letterSpacing` to each character's advance width (was previously
-		*      omitted, causing characters to render without any spacing).
-		*   2. Switch to the ideographic baseline for CJK glyphs so their vertical
-		*      position matches how browsers lay them out in the DOM.
+		* character, adding `letterSpacing` to each character's advance width.
+		*
+		* In horizontal text every glyph keeps the alphabetic baseline, CJK included:
+		* inline layout aligns a whole line on its alphabetic baseline regardless of
+		* script, and `baseline` was measured for that. Drawing CJK graphemes at the
+		* same y with `textBaseline = 'ideographic'` lifts them above the Latin text
+		* next to them, and away from where the `letterSpacing === 0` whole-string
+		* path draws them.
 		*
 		* The `renderFn` callback receives (letter, x, y) and performs the actual draw
 		* call (fillText or strokeText), allowing fill and stroke paths to share one
@@ -9266,12 +9537,7 @@
 			const fontString = this.ctx.font;
 			let left = text.bounds.left;
 			for (const letter of letters) {
-				if (hasCJKCharacters(letter)) {
-					const savedBaseline = this.ctx.textBaseline;
-					this.ctx.textBaseline = "ideographic";
-					renderFn(letter, left, y);
-					this.ctx.textBaseline = savedBaseline;
-				} else renderFn(letter, left, y);
+				renderFn(letter, left, y);
 				left += this.cachedMeasureText(letter, fontString) + letterSpacing;
 			}
 		}
@@ -9313,7 +9579,7 @@
 		/**
 		* Render text with letter-spacing applied (fill pass).
 		* When letterSpacing is 0 the whole string is drawn in one call; otherwise each
-		* grapheme is drawn individually so spacing and CJK baseline are applied correctly.
+		* grapheme is drawn individually so spacing is applied correctly.
 		*/
 		renderTextWithLetterSpacing(text, letterSpacing, baseline, writingMode = 0) {
 			this.renderFillText(text, letterSpacing, baseline, writingMode);
@@ -10548,12 +10814,19 @@
 	//#endregion
 	//#region src/render/canvas/canvas-renderer.ts
 	var CanvasRenderer = 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) throw new Error("Failed to get 2D rendering context from canvas");
+			if (!ctx) {
+				if (!options.canvas) releaseSurface(this.canvas);
+				if (surfaceRoot) throw new 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);
@@ -10589,7 +10862,77 @@
 			this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
 		}
 		async renderStack(stack) {
-			if (stack.element.container.styles.isVisible()) await this.renderStackContent(stack);
+			const styles = stack.element.container.styles;
+			if (styles.isVisible()) {
+				const filter = 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)) {
+						this.legacySubtree = true;
+						try {
+							await this.renderStackContent(stack);
+						} finally {
+							this.legacySubtree = false;
+						}
+					}
+					return;
+				}
+				await this.renderStackContent(stack);
+			}
+		}
+		canComposite(paint) {
+			const supported = (container) => {
+				const styles = container.styles;
+				return !styles.isTransformed() && styles.zoom === 1 && styles.mixBlendMode === MIX_BLEND_MODE$1.NORMAL && styles.clipPath.type === 0 && !contains(styles.display, 2048) && 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 = cropSurface(surfaceBounds(stack.element.container), new Bounds(this.options.x, this.options.y, this.options.width, this.options.height), filterOutset(filter), this.options.scale);
+			if (!bounds.width || !bounds.height) return true;
+			const reserved = 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: void 0,
+				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 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, this.surfaceRoot).filter((effect) => !own.includes(effect) || !isFilterEffect(effect) && !isOpacityEffect(effect) && !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 FilterSurfaceError)) throw error;
+				this.context.logger.info(`${error.message}; using the existing renderer`);
+				return false;
+			} finally {
+				if (source) releaseSurface(source.canvas);
+				if (filtered) releaseSurface(filtered);
+				this.surfaceBudget.pixels -= reserved;
+			}
 		}
 		async renderNode(paint) {
 			if (paint.container.debugRender) debugger;
@@ -10617,7 +10960,7 @@
 			}
 		}
 		async renderNodeContent(paint) {
-			this.effectsRenderer.applyEffects(paint.getEffects(4));
+			this.effectsRenderer.applyEffects(paint.getEffects(4, this.surfaceRoot));
 			const container = paint.container;
 			const curves = paint.curves;
 			const styles = container.styles;
@@ -10681,8 +11024,51 @@
 		formatPath(paths) {
 			formatCanvasPath(this.ctx, paths);
 		}
+		async renderSurfaceBoxShadow(paint, shadow) {
+			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 = cropSurface(box.add(-margin, -margin, 2 * margin, 2 * margin), new 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 = reserveSurface(this.surfaceBudget, width, height);
+			if (!reserved) throw new 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 FilterSurfaceError("Box shadow surface canvas is unavailable");
+				ctx.scale(scale, scale);
+				ctx.translate(-bounds.left, -bounds.top);
+				createCanvasPath(ctx, transformPath(calculateBorderBoxPath(paint.curves), -spread, -spread, 2 * spread, 2 * spread));
+				ctx.fillStyle = asString(shadow.color);
+				ctx.fill();
+				filtered = await 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);
+					formatCanvasPath(this.ctx, 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) releaseSurface(source);
+				if (filtered) releaseSurface(filtered);
+				this.surfaceBudget.pixels -= reserved;
+			}
+		}
 		async renderNodeBackgroundAndBorders(paint) {
-			this.effectsRenderer.applyEffects(paint.getEffects(2));
+			this.effectsRenderer.applyEffects(paint.getEffects(2, this.surfaceRoot));
 			const styles = paint.container.styles;
 			const hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
 			const hasTextClip = hasTextBackgroundClip(styles);
@@ -10723,7 +11109,11 @@
 					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 = calculateBorderBoxPath(paint.curves);
 					const maskOffset = shadow.inset ? 0 : SHADOW_MASK_OFFSET;
@@ -10737,14 +11127,15 @@
 						this.ctx.clip();
 						this.path(shadowPaintingArea);
 					}
-					this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
-					this.ctx.shadowOffsetY = shadow.offsetY.number;
+					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 = asString(shadow.color);
-					this.ctx.shadowBlur = shadow.blur.number;
+					this.ctx.shadowBlur = shadow.blur.number * shadowScale;
 					this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : "rgba(0,0,0,1)";
 					this.ctx.fill();
 					this.ctx.restore();
-				});
+				}
 			}
 			if (styles.borderImageSource) {
 				const source = styles.borderImageSource;
@@ -10800,14 +11191,19 @@
 			}
 		}
 		async render(element) {
-			if (this.options.backgroundColor) {
-				this.ctx.fillStyle = asString(this.options.backgroundColor);
-				this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
+			try {
+				if (this.options.backgroundColor) {
+					this.ctx.fillStyle = asString(this.options.backgroundColor);
+					this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
+				}
+				const stack = parseStackingContexts(element);
+				await this.renderStack(stack);
+				this.effectsRenderer.applyEffects([]);
+				return this.canvas;
+			} catch (error) {
+				if (!this.options.canvas) releaseSurface(this.canvas);
+				throw error;
 			}
-			const stack = parseStackingContexts(element);
-			await this.renderStack(stack);
-			this.effectsRenderer.applyEffects([]);
-			return this.canvas;
 		}
 		/**
 		* Render background clipped to text shape using offscreen canvas with destination-in compositing.
@@ -11223,22 +11619,6 @@
 		}
 	};
 	//#endregion
-	//#region src/core/abort-helper.ts
-	/**
-	* AbortSignal helper utilities.
-	*/
-	/**
-	* Throw a DOMException if the given AbortSignal is already aborted.
-	* Used at checkpoints throughout the rendering pipeline to support
-	* cancellable renders.
-	*
-	* @param signal - The AbortSignal to check. If undefined or not aborted, this is a no-op.
-	* @throws {DOMException} With name 'AbortError' if the signal has been aborted.
-	*/
-	const throwIfAborted = (signal) => {
-		if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-	};
-	//#endregion
 	//#region src/core/config-assembler.ts
 	/**
 	* Coerce known numeric options from string (or other) values to actual numbers.
@@ -11407,18 +11787,19 @@
 				canvas = await new CanvasRenderer(context, renderOptions).render(root);
 				perfMonitor.end("render");
 			}
+		} finally {
 			perfMonitor.start("cleanup");
-			if (opts.removeContainer ?? true) {
-				if (!DocumentCloner.destroy(container)) context.logger.error(`Cannot detach cloned iframe as it is not in the DOM anymore`);
+			try {
+				if (root) root.restoreTree();
+			} finally {
+				if (opts.removeContainer ?? true) DocumentCloner.destroy(container);
+				perfMonitor.end("cleanup");
 			}
-			perfMonitor.end("cleanup");
-			perfMonitor.end("total");
-			context.logger.debug(`Finished rendering`);
-			if (performanceMonitoring) perfMonitor.logSummary();
-			return canvas;
-		} finally {
-			if (root) root.restoreTree();
 		}
+		perfMonitor.end("total");
+		context.logger.debug(`Finished rendering`);
+		if (performanceMonitoring) perfMonitor.logSummary();
+		return canvas;
 	};
 	//#endregion
 	//#region src/index.ts