html2canvas-pro 2.4.3 → 2.4.5

package/dist/html2canvas-pro.cjs

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.4.3 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.4.5 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -5717,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":
@@ -5731,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})`);
@@ -5749,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
@@ -8306,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;
@@ -8743,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)) {
@@ -8758,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));
 	}
@@ -9039,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) {
@@ -9168,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
@@ -9239,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
@@ -9263,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;
 		}
 	}
@@ -9310,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);
@@ -10543,14 +10809,235 @@ const canvasTextAlign = (textAlign) => {
 	}
 };
 //#endregion
+//#region src/render/canvas/box-shadow-geometry.ts
+const shadowRadius = (radius, spread) => {
+	const delta = spread > radius ? spread * (1 + Math.pow(radius / spread - 1, 3)) : spread;
+	return Math.max(0, radius + delta);
+};
+const spreadShadowPath = (paths, spread) => {
+	if (spread === 0) return paths;
+	const corners = paths.map((point, index) => {
+		if (!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: shadowRadius(c.rx, spread),
+		y: 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 (!isBezierCurve(point)) return new Vector(x, y);
+		const rx = radii[index].x * factor;
+		const ry = radii[index].y * factor;
+		if (!rx || !ry) return new Vector(x, y);
+		const sx = rx / corner.rx;
+		const sy = ry / corner.ry;
+		const resize = (v) => new Vector(x + (v.x - corner.x) * sx, y + (v.y - corner.y) * sy);
+		return new BezierCurve(resize(point.start), resize(point.startControl), resize(point.endControl), resize(point.end));
+	});
+};
+//#endregion
+//#region src/render/canvas/box-shadow-transform.ts
+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));
+	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(left, top, right - left, bottom - top),
+		scale,
+		uniform: Math.abs(xx - yy) <= tolerance && Math.abs(xy) <= tolerance
+	};
+};
+//#endregion
+//#region src/render/canvas/box-shadow-painter.ts
+const complement = (ctx, rect, hole) => {
+	ctx.beginPath();
+	ctx.rect(rect.left, rect.top, rect.width, rect.height);
+	if (hole.length) {
+		formatCanvasPath(ctx, hole);
+		ctx.closePath();
+	}
+};
+const insetHole = (paint, shadow) => {
+	const spread = shadow.spread.number;
+	const box = paddingBox(paint.container);
+	if (box.width - 2 * spread <= 0 || box.height - 2 * spread <= 0) return [];
+	return spreadShadowPath(calculatePaddingBoxPath(paint.curves), -spread);
+};
+const paintShadowSurface = async (ctx, paint, shadow, options, budget, space) => {
+	const padding = paddingBox(paint.container);
+	const blur = shadow.blur.number / 2;
+	const margin = Math.ceil(3 * blur) + 2;
+	const spread = shadow.spread.number;
+	const bounds = cropSurface((shadow.inset ? padding : paint.container.bounds.add(shadow.offsetX.number - spread, shadow.offsetY.number - spread, 2 * spread, 2 * spread)).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 = 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 path = transformPath(shadow.inset ? insetHole(paint, shadow) : spreadShadowPath(calculateBorderBoxPath(paint.curves), spread), shadow.offsetX.number, shadow.offsetY.number, 0, 0);
+		if (shadow.inset) complement(sourceCtx, bounds, path);
+		else createCanvasPath(sourceCtx, path);
+		sourceCtx.fillStyle = asString(shadow.color);
+		sourceCtx.fill(shadow.inset ? "evenodd" : "nonzero");
+		filtered = await renderFilterSurface(source, { blur }, 1, space.scale, options.signal);
+		ctx.save();
+		try {
+			if (shadow.inset) {
+				createCanvasPath(ctx, calculatePaddingBoxPath(paint.curves));
+				ctx.clip();
+			} else {
+				complement(ctx, space.viewport, 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 FilterSurfaceError)) throw error;
+		return false;
+	} finally {
+		if (filtered && filtered !== source) releaseSurface(filtered);
+		if (source) 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 (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;
+	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 = shadowSpace(matrix, ctx.canvas.width, ctx.canvas.height);
+	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 = paddingBox(paint.container);
+	ctx.save();
+	try {
+		if (shadow.inset && shadow.blur.number === 0) {
+			createCanvasPath(ctx, calculatePaddingBoxPath(paint.curves));
+			ctx.clip();
+			complement(ctx, padding, transformPath(insetHole(paint, shadow), shadow.offsetX.number, shadow.offsetY.number, 0, 0));
+			ctx.fillStyle = 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;
+		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(SHADOW_MASK_OFFSET, maxX + margin * space.scale + 2);
+		if (shadow.inset) {
+			createCanvasPath(ctx, calculatePaddingBoxPath(paint.curves));
+			ctx.clip();
+		} else {
+			complement(ctx, viewport, calculateBorderBoxPath(paint.curves));
+			ctx.clip("evenodd");
+		}
+		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 createCanvasPath(ctx, spreadShadowPath(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;
+		ctx.shadowBlur = shadow.blur.number * space.scale;
+		ctx.shadowColor = asString(shadow.color);
+		ctx.fillStyle = "rgb(0, 0, 0)";
+		ctx.fill(shadow.inset ? "evenodd" : "nonzero");
+	} finally {
+		ctx.restore();
+	}
+};
+//#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);
@@ -10586,7 +11073,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;
@@ -10614,7 +11171,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;
@@ -10678,8 +11235,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);
@@ -10720,28 +11320,13 @@ var CanvasRenderer = class CanvasRenderer {
 				await this.backgroundRenderer.renderBackgroundImage(paint.container);
 				this.ctx.restore();
 			}
-			styles.boxShadow.slice(0).reverse().forEach((shadow) => {
-				this.ctx.save();
-				const borderBoxArea = calculateBorderBoxPath(paint.curves);
-				const maskOffset = shadow.inset ? 0 : SHADOW_MASK_OFFSET;
-				const shadowPaintingArea = 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 = asString(shadow.color);
-				this.ctx.shadowBlur = shadow.blur.number;
-				this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : "rgba(0,0,0,1)";
-				this.ctx.fill();
-				this.ctx.restore();
-			});
+				await paintBoxShadow(this.ctx, paint, shadow, this.options, this.surfaceBudget);
+			}
 		}
 		if (styles.borderImageSource) {
 			const source = styles.borderImageSource;
@@ -10797,14 +11382,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.
@@ -11220,22 +11810,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.
@@ -11404,18 +11978,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