html2canvas-pro 2.4.2 → 2.4.4

package/dist/html2canvas-pro.cjs

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.4.2 <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
 */
@@ -5328,10 +5328,15 @@ const fontFamily = {
 	parse: (_context, tokens) => {
 		const accumulator = [];
 		const results = [];
+		const quoted = [];
+		let isQuoted = false;
 		tokens.forEach((token) => {
 			switch (token.type) {
 				case 20:
+					accumulator.push(token.value);
+					break;
 				case 0:
+					isQuoted = true;
 					accumulator.push(token.value);
 					break;
 				case 17:
@@ -5339,12 +5344,17 @@ const fontFamily = {
 					break;
 				case 4:
 					results.push(accumulator.join(" "));
+					quoted.push(isQuoted);
+					isQuoted = false;
 					accumulator.length = 0;
 					break;
 			}
 		});
-		if (accumulator.length) results.push(accumulator.join(" "));
-		return results.map((result) => result.indexOf(" ") === -1 ? result : `'${result}'`);
+		if (accumulator.length) {
+			results.push(accumulator.join(" "));
+			quoted.push(isQuoted);
+		}
+		return results.map((result, index) => quoted[index] || result.indexOf(" ") !== -1 ? `'${result.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\f/g, "\\c ")}'` : result);
 	}
 };
 //#endregion
@@ -5707,7 +5717,7 @@ const filter = {
 			const renderedArgs = renderFilterArgs(fn.values);
 			switch (fn.name) {
 				case "blur":
-					parts.push(`blur(${renderedArgs}px)`);
+					parts.push(`blur(${renderedArgs})`);
 					break;
 				case "brightness":
 				case "contrast":
@@ -5721,7 +5731,7 @@ const 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})`);
@@ -5739,14 +5749,20 @@ const filter = {
 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
@@ -8296,7 +8312,7 @@ const parseTree = (context, element) => {
 	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;
@@ -8733,12 +8749,13 @@ var ElementPaint = class {
 			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)) {
@@ -8748,7 +8765,7 @@ var ElementPaint = class {
 				}
 				effects.unshift(...croplessEffects);
 			} else effects.unshift(...croplessEffects);
-			parent = parent.parent;
+			parent = parent === surfaceRoot ? null : parent.parent;
 		}
 		return effects.filter((effect) => contains(effect.target, target));
 	}
@@ -9029,6 +9046,268 @@ const calculateBackgroundRepeatPath = (repeat, [x, y], [width, height], backgrou
 	}
 };
 //#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) {
@@ -9158,8 +9437,8 @@ const iOSBrokenFonts = ["-apple-system", "system-ui"];
 const TEXT_OVERFLOW_EPSILON = 1;
 /**
 * Detect CJK (Chinese, Japanese, Korean) characters in a string.
-* CJK characters use the ideographic baseline in browsers, which differs
-* from the alphabetic baseline used for Latin script.
+* Vertical writing modes use it to keep CJK glyphs upright and on the
+* ideographic baseline while other scripts are rotated.
 *
 * Covers:
 *   U+2E80–U+2FFF  CJK Radicals Supplement, Kangxi Radicals
@@ -9229,15 +9508,17 @@ var TextRenderer = class {
 		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
@@ -9253,12 +9534,7 @@ var TextRenderer = class {
 		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;
 		}
 	}
@@ -9300,7 +9576,7 @@ var TextRenderer = class {
 	/**
 	* 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);
@@ -10535,12 +10811,19 @@ const canvasTextAlign = (textAlign) => {
 //#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);
@@ -10576,7 +10859,77 @@ var CanvasRenderer = class CanvasRenderer {
 		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;
@@ -10604,7 +10957,7 @@ var CanvasRenderer = class CanvasRenderer {
 		}
 	}
 	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;
@@ -10668,8 +11021,51 @@ var CanvasRenderer = class CanvasRenderer {
 	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);
@@ -10710,7 +11106,11 @@ var CanvasRenderer = 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 = calculateBorderBoxPath(paint.curves);
 				const maskOffset = shadow.inset ? 0 : SHADOW_MASK_OFFSET;
@@ -10724,14 +11124,15 @@ var CanvasRenderer = class CanvasRenderer {
 					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;
@@ -10787,14 +11188,19 @@ var CanvasRenderer = class CanvasRenderer {
 		}
 	}
 	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.
@@ -11210,22 +11616,6 @@ var Context = class Context {
 	}
 };
 //#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.
@@ -11394,18 +11784,19 @@ const renderElement = async (element, opts, config) => {
 			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