html2canvas-pro 1.6.7 → 2.0.0

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 1.6.7 <https://yorickshan.github.io/html2canvas-pro/>
+ * html2canvas-pro 2.0.0 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
@@ -1499,6 +1499,97 @@ const isEndingTokenFor = (token, type) => {
     return type === 2 /* TokenType.LEFT_PARENTHESIS_TOKEN */ && token.type === 3 /* TokenType.RIGHT_PARENTHESIS_TOKEN */;
 };
 
+/**
+ * Color mathematics utilities
+ * Extracted to break circular dependency between srgb.ts and color-utilities.ts
+ */
+/**
+ * Clamp a value between min and max
+ */
+const clamp = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+/**
+ * Multiply two 3x3 matrices
+ */
+const multiplyMatrices = (A, B) => {
+    return [
+        A[0] * B[0] + A[1] * B[1] + A[2] * B[2],
+        A[3] * B[0] + A[4] * B[1] + A[5] * B[2],
+        A[6] * B[0] + A[7] * B[1] + A[8] * B[2]
+    ];
+};
+
+/**
+ * SRGB related functions
+ */
+/**
+ * Convert XYZ to linear-light sRGB
+ *
+ * @param xyz
+ */
+const xyz2rgbLinear = (xyz) => {
+    return multiplyMatrices([
+        3.2409699419045226, -1.537383177570094, -0.4986107602930034, -0.9692436362808796, 1.8759675015077202,
+        0.04155505740717559, 0.05563007969699366, -0.20397695888897652, 1.0569715142428786
+    ], xyz);
+};
+/**
+ * Convert XYZ to linear-light sRGB
+ *
+ * @param xyz
+ */
+const rgbLinear2xyz = (xyz) => {
+    return multiplyMatrices([
+        0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756,
+        0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607
+    ], xyz);
+};
+/**
+ * Convert sRGB to RGB
+ *
+ * @param rgb
+ */
+const srgbLinear2rgb = (rgb) => {
+    return rgb.map((c) => {
+        const sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+        return abs > 0.0031308 ? sign * (1.055 * abs ** (1 / 2.4) - 0.055) : 12.92 * c;
+    });
+};
+/**
+ * Convert RGB to sRGB
+ *
+ * @param rgb
+ */
+const rgb2rgbLinear = (rgb) => {
+    return rgb.map((c) => {
+        const sign = c < 0 ? -1 : 1, abs = Math.abs(c);
+        return abs <= 0.04045 ? c / 12.92 : sign * ((abs + 0.055) / 1.055) ** 2.4;
+    });
+};
+/**
+ * XYZ to SRGB
+ *
+ * @param args
+ */
+const srgbFromXYZ = (args) => {
+    const [r, g, b] = srgbLinear2rgb(xyz2rgbLinear([args[0], args[1], args[2]]));
+    return [r, g, b, args[3]];
+};
+/**
+ * XYZ to SRGB-Linear
+ * @param args
+ */
+const srgbLinearFromXYZ = (args) => {
+    const [r, g, b] = xyz2rgbLinear([args[0], args[1], args[2]]);
+    return [
+        clamp(Math.round(r * 255), 0, 255),
+        clamp(Math.round(g * 255), 0, 255),
+        clamp(Math.round(b * 255), 0, 255),
+        args[3]
+    ];
+};
+
 const isLength = (token) => token.type === 17 /* TokenType.NUMBER_TOKEN */ || token.type === 15 /* TokenType.DIMENSION_TOKEN */;
 
 const isLengthPercentage = (token) => token.type === 16 /* TokenType.PERCENTAGE_TOKEN */ || isLength(token);
@@ -1716,16 +1807,6 @@ const getTokenColorValue = (token, i) => {
     return 0;
 };
 const isRelativeTransform = (tokens) => (tokens[0].type === 20 /* TokenType.IDENT_TOKEN */ ? tokens[0].value : 'unknown') === 'from';
-const clamp = (value, min, max) => {
-    return Math.min(Math.max(value, min), max);
-};
-const multiplyMatrices = (A, B) => {
-    return [
-        A[0] * B[0] + A[1] * B[1] + A[2] * B[2],
-        A[3] * B[0] + A[4] * B[1] + A[5] * B[2],
-        A[6] * B[0] + A[7] * B[1] + A[8] * B[2]
-    ];
-};
 const packSrgb = (args) => {
     return pack(clamp(Math.round(args[0] * 255), 0, 255), clamp(Math.round(args[1] * 255), 0, 255), clamp(Math.round(args[2] * 255), 0, 255), clamp(args[3], 0, 1));
 };
@@ -2008,76 +2089,6 @@ const convertXyz50 = (args) => {
     return packXYZ([xyz[0], xyz[1], xyz[2], args[3]]);
 };
 
-/**
- * SRGB related functions
- */
-/**
- * Convert XYZ to linear-light sRGB
- *
- * @param xyz
- */
-const xyz2rgbLinear = (xyz) => {
-    return multiplyMatrices([
-        3.2409699419045226, -1.537383177570094, -0.4986107602930034, -0.9692436362808796, 1.8759675015077202,
-        0.04155505740717559, 0.05563007969699366, -0.20397695888897652, 1.0569715142428786
-    ], xyz);
-};
-/**
- * Convert XYZ to linear-light sRGB
- *
- * @param xyz
- */
-const rgbLinear2xyz = (xyz) => {
-    return multiplyMatrices([
-        0.41239079926595934, 0.357584339383878, 0.1804807884018343, 0.21263900587151027, 0.715168678767756,
-        0.07219231536073371, 0.01933081871559182, 0.11919477979462598, 0.9505321522496607
-    ], xyz);
-};
-/**
- * Convert sRGB to RGB
- *
- * @param rgb
- */
-const srgbLinear2rgb = (rgb) => {
-    return rgb.map((c) => {
-        const sign = c < 0 ? -1 : 1, abs = Math.abs(c);
-        return abs > 0.0031308 ? sign * (1.055 * abs ** (1 / 2.4) - 0.055) : 12.92 * c;
-    });
-};
-/**
- * Convert RGB to sRGB
- *
- * @param rgb
- */
-const rgb2rgbLinear = (rgb) => {
-    return rgb.map((c) => {
-        const sign = c < 0 ? -1 : 1, abs = Math.abs(c);
-        return abs <= 0.04045 ? c / 12.92 : sign * ((abs + 0.055) / 1.055) ** 2.4;
-    });
-};
-/**
- * XYZ to SRGB
- *
- * @param args
- */
-const srgbFromXYZ = (args) => {
-    const [r, g, b] = srgbLinear2rgb(xyz2rgbLinear([args[0], args[1], args[2]]));
-    return [r, g, b, args[3]];
-};
-/**
- * XYZ to SRGB-Linear
- * @param args
- */
-const srgbLinearFromXYZ = (args) => {
-    const [r, g, b] = xyz2rgbLinear([args[0], args[1], args[2]]);
-    return [
-        clamp(Math.round(r * 255), 0, 255),
-        clamp(Math.round(g * 255), 0, 255),
-        clamp(Math.round(b * 255), 0, 255),
-        args[3]
-    ];
-};
-
 /**
  * Display-P3 related functions
  */
@@ -4553,6 +4564,37 @@ const textOverflow = {
     }
 };
 
+var IMAGE_RENDERING;
+(function (IMAGE_RENDERING) {
+    IMAGE_RENDERING[IMAGE_RENDERING["AUTO"] = 0] = "AUTO";
+    IMAGE_RENDERING[IMAGE_RENDERING["CRISP_EDGES"] = 1] = "CRISP_EDGES";
+    IMAGE_RENDERING[IMAGE_RENDERING["PIXELATED"] = 2] = "PIXELATED";
+    IMAGE_RENDERING[IMAGE_RENDERING["SMOOTH"] = 3] = "SMOOTH";
+})(IMAGE_RENDERING || (IMAGE_RENDERING = {}));
+const imageRendering = {
+    name: 'image-rendering',
+    initialValue: 'auto',
+    prefix: false,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
+    parse: (_context, value) => {
+        switch (value.toLowerCase()) {
+            case 'crisp-edges':
+            case '-webkit-crisp-edges':
+            case '-moz-crisp-edges':
+                return IMAGE_RENDERING.CRISP_EDGES;
+            case 'pixelated':
+            case '-webkit-optimize-contrast':
+                return IMAGE_RENDERING.PIXELATED;
+            case 'smooth':
+            case 'high-quality':
+                return IMAGE_RENDERING.SMOOTH;
+            case 'auto':
+            default:
+                return IMAGE_RENDERING.AUTO;
+        }
+    }
+};
+
 class CSSParsedDeclaration {
     constructor(context, declaration) {
         this.animationDuration = parse(context, duration, declaration.animationDuration);
@@ -4629,6 +4671,7 @@ class CSSParsedDeclaration {
         this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
         this.zIndex = parse(context, zIndex, declaration.zIndex);
         this.objectFit = parse(context, objectFit, declaration.objectFit);
+        this.imageRendering = parse(context, imageRendering, declaration.imageRendering);
     }
     isVisible() {
         return this.display > 0 && this.opacity > 0 && this.visibility === 0 /* VISIBILITY.VISIBLE */;
@@ -4705,8 +4748,45 @@ const parse = (context, descriptor, style) => {
     }
 };
 
+/**
+ * DOM Node Type Guards
+ * Extracted to break circular dependencies
+ */
+/**
+ * Check if node is an Element
+ */
+const isElementNode = (node) => node.nodeType === Node.ELEMENT_NODE;
+/**
+ * Check if node is a Text node
+ */
+const isTextNode = (node) => node.nodeType === Node.TEXT_NODE;
+/**
+ * Check if element is an SVG element
+ */
+const isSVGElementNode = (element) => typeof element.className === 'object';
+/**
+ * Check if node is an HTML element
+ */
+const isHTMLElementNode = (node) => isElementNode(node) && typeof node.style !== 'undefined' && !isSVGElementNode(node);
+/**
+ * Check if node is an LI element
+ */
+const isLIElement = (node) => node.tagName === 'LI';
+/**
+ * Check if node is an OL element
+ */
+const isOLElement = (node) => node.tagName === 'OL';
+/**
+ * Check if element is a custom element
+ * Custom elements must have a hyphen and cannot be SVG elements
+ */
+const isCustomElement = (element) => !isSVGElementNode(element) && element.tagName.indexOf('-') > 0;
+
 const elementDebuggerAttribute = 'data-html2canvas-debug';
 const getElementDebugType = (element) => {
+    if (typeof element.getAttribute !== 'function') {
+        return 0 /* DebuggerType.NONE */;
+    }
     const attribute = element.getAttribute(elementDebuggerAttribute);
     switch (attribute) {
         case 'all':
@@ -4726,8 +4806,83 @@ const isDebugging = (element, type) => {
     return elementType === 1 /* DebuggerType.ALL */ || type === elementType;
 };
 
+/**
+ * DOM Normalizer
+ * Handles DOM side effects that need to happen before rendering
+ * Extracted from ElementContainer to follow SRP
+ */
+/**
+ * Normalize element styles for accurate rendering
+ * This includes disabling animations and resetting transforms
+ */
+class DOMNormalizer {
+    /**
+     * Normalize a single element and return original styles
+     *
+     * @param element - Element to normalize
+     * @param styles - Parsed CSS styles
+     * @returns Original styles map for restoration
+     */
+    static normalizeElement(element, styles) {
+        const originalStyles = {};
+        if (!isHTMLElementNode(element)) {
+            return originalStyles;
+        }
+        // Disable animations to capture static state
+        if (styles.animationDuration.some((duration) => duration > 0)) {
+            originalStyles.animationDuration = element.style.animationDuration;
+            element.style.animationDuration = '0s';
+        }
+        // Reset transform for accurate bounds calculation
+        // getBoundingClientRect takes transforms into account
+        if (styles.transform !== null) {
+            originalStyles.transform = element.style.transform;
+            element.style.transform = 'none';
+        }
+        // Reset rotate property similarly to transform
+        if (styles.rotate !== null) {
+            originalStyles.rotate = element.style.rotate;
+            element.style.rotate = 'none';
+        }
+        return originalStyles;
+    }
+    /**
+     * Normalize element and its descendants recursively
+     *
+     * @param element - Element to normalize
+     * @param styles - Parsed CSS styles
+     * @returns Original styles map for restoration
+     */
+    static normalizeTree(element, styles) {
+        return this.normalizeElement(element, styles);
+        // Could add recursive normalization here if needed
+        // For now, only normalize the element itself
+    }
+    /**
+     * Restore element styles after rendering
+     *
+     * @param element - Element to restore
+     * @param originalStyles - Original styles to restore
+     */
+    static restoreElement(element, originalStyles) {
+        if (!isHTMLElementNode(element)) {
+            return;
+        }
+        // Restore each property that was saved
+        if (originalStyles.animationDuration !== undefined) {
+            element.style.animationDuration = originalStyles.animationDuration;
+        }
+        if (originalStyles.transform !== undefined) {
+            element.style.transform = originalStyles.transform;
+        }
+        if (originalStyles.rotate !== undefined) {
+            element.style.rotate = originalStyles.rotate;
+        }
+    }
+}
+
 class ElementContainer {
-    constructor(context, element) {
+    constructor(context, element, options = {}) {
         this.context = context;
         this.textNodes = [];
         this.elements = [];
@@ -4735,25 +4890,41 @@ class ElementContainer {
         if (isDebugging(element, 3 /* DebuggerType.PARSE */)) {
             debugger;
         }
-        this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
-        if (isHTMLElementNode(element)) {
-            if (this.styles.animationDuration.some((duration) => duration > 0)) {
-                element.style.animationDuration = '0s';
-            }
-            if (this.styles.transform !== null) {
-                // getBoundingClientRect takes transforms into account
-                element.style.transform = 'none';
-            }
-            if (this.styles.rotate !== null) {
-                // Handle rotate property similarly to transform
-                element.style.rotate = 'none';
-            }
+        this.styles = new CSSParsedDeclaration(context, context.config.window.getComputedStyle(element, null));
+        // Side effects moved to DOMNormalizer (can be disabled via options)
+        const shouldNormalize = options.normalizeDom !== false; // Default: true
+        if (shouldNormalize && isHTMLElementNode(element)) {
+            this.originalStyles = DOMNormalizer.normalizeElement(element, this.styles);
+            this.originalElement = element; // Save reference for restoration
         }
         this.bounds = parseBounds(this.context, element);
         if (isDebugging(element, 4 /* DebuggerType.RENDER */)) {
             this.flags |= 16 /* FLAGS.DEBUG_RENDER */;
         }
     }
+    /**
+     * Restore original element styles (if normalized)
+     * Call this after rendering is complete to clean up DOM state
+     */
+    restore() {
+        if (this.originalStyles && this.originalElement) {
+            DOMNormalizer.restoreElement(this.originalElement, this.originalStyles);
+            // Clear references to prevent memory leaks
+            this.originalStyles = undefined;
+            this.originalElement = undefined;
+        }
+    }
+    /**
+     * Recursively restore all elements in the tree
+     * Call this on the root container after rendering is complete
+     */
+    restoreTree() {
+        this.restore();
+        // Recursively restore all child elements
+        for (const child of this.elements) {
+            child.restoreTree();
+        }
+    }
 }
 
 /*
@@ -5607,17 +5778,19 @@ class TextareaElementContainer extends ElementContainer {
 }
 
 class IFrameElementContainer extends ElementContainer {
-    constructor(context, iframe) {
+    constructor(context, iframe, parseTreeFn) {
         super(context, iframe);
         this.src = iframe.src;
         this.width = parseInt(iframe.width, 10) || 0;
         this.height = parseInt(iframe.height, 10) || 0;
         this.backgroundColor = this.styles.backgroundColor;
+        this.parseTreeFn = parseTreeFn;
         try {
             if (iframe.contentWindow &&
                 iframe.contentWindow.document &&
-                iframe.contentWindow.document.documentElement) {
-                this.tree = parseTree(context, iframe.contentWindow.document.documentElement);
+                iframe.contentWindow.document.documentElement &&
+                this.parseTreeFn) {
+                this.tree = this.parseTreeFn(context, iframe.contentWindow.document.documentElement);
                 // http://www.w3.org/TR/css3-background/#special-backgrounds
                 const documentBackgroundColor = iframe.contentWindow.document.documentElement
                     ? parseColor(context, getComputedStyle(iframe.contentWindow.document.documentElement).backgroundColor)
@@ -5701,7 +5874,7 @@ const createContainer = (context, element) => {
         return new TextareaElementContainer(context, element);
     }
     if (isIFrameElement(element)) {
-        return new IFrameElementContainer(context, element);
+        return new IFrameElementContainer(context, element, parseTree);
     }
     return new ElementContainer(context, element);
 };
@@ -5730,12 +5903,7 @@ const createsStackingContext = (styles) => {
         contains(styles.display, 536870912 /* DISPLAY.INLINE_GRID */) ||
         contains(styles.display, 134217728 /* DISPLAY.INLINE_TABLE */));
 };
-const isTextNode = (node) => node.nodeType === Node.TEXT_NODE;
-const isElementNode = (node) => node.nodeType === Node.ELEMENT_NODE;
-const isHTMLElementNode = (node) => isElementNode(node) && typeof node.style !== 'undefined' && !isSVGElementNode(node);
-const isSVGElementNode = (element) => typeof element.className === 'object';
-const isLIElement = (node) => node.tagName === 'LI';
-const isOLElement = (node) => node.tagName === 'OL';
+// Type guards moved to node-type-guards.ts and re-exported above
 const isInputElement = (node) => node.tagName === 'INPUT';
 const isHTMLElement = (node) => node.tagName === 'HTML';
 const isSVGElement = (node) => node.tagName === 'svg';
@@ -5750,7 +5918,7 @@ const isTextareaElement = (node) => node.tagName === 'TEXTAREA';
 const isSelectElement = (node) => node.tagName === 'SELECT';
 const isSlotElement = (node) => node.tagName === 'SLOT';
 // https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
-const isCustomElement = (node) => node.tagName.indexOf('-') > 0;
+// isCustomElement moved to node-type-guards.ts and re-exported above
 
 class CounterState {
     constructor() {
@@ -6158,7 +6326,7 @@ class DocumentCloner {
     toIFrame(ownerDocument, windowSize) {
         const iframe = createIFrameContainer(ownerDocument, windowSize, this.options.iframeContainer);
         if (!iframe.contentWindow) {
-            return Promise.reject(`Unable to find iframe window`);
+            throw new Error('Unable to find iframe window');
         }
         const scrollX = ownerDocument.defaultView.pageXOffset;
         const scrollY = ownerDocument.defaultView.pageYOffset;
@@ -6180,7 +6348,7 @@ class DocumentCloner {
             const onclone = this.options.onclone;
             const referenceElement = this.clonedReferenceElement;
             if (typeof referenceElement === 'undefined') {
-                return Promise.reject(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
+                throw new Error(`Error finding the ${this.referenceElement.nodeName} in the cloned document`);
             }
             if (documentClone.fonts && documentClone.fonts.ready) {
                 await documentClone.fonts.ready;
@@ -6256,7 +6424,7 @@ class DocumentCloner {
                 clone.loading = 'eager';
             }
         }
-        if (isCustomElement(clone)) {
+        if (isCustomElement(clone) && !isSVGElementNode(clone)) {
             return this.createCustomElementClone(clone);
         }
         return clone;
@@ -6812,152 +6980,14 @@ const addBase = (targetELement, baseUri) => {
     headEle?.insertBefore(baseNode, headEle?.firstChild ?? null);
 };
 
-class CacheStorage {
-    static getOrigin(url) {
-        const link = CacheStorage._link;
-        if (!link) {
-            return 'about:blank';
-        }
-        link.href = url;
-        link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
-        return link.protocol + link.hostname + link.port;
-    }
-    static isSameOrigin(src) {
-        return CacheStorage.getOrigin(src) === CacheStorage._origin;
+class Vector {
+    constructor(x, y) {
+        this.type = 0 /* PathType.VECTOR */;
+        this.x = x;
+        this.y = y;
     }
-    static setContext(window) {
-        CacheStorage._link = window.document.createElement('a');
-        CacheStorage._origin = CacheStorage.getOrigin(window.location.href);
-    }
-}
-CacheStorage._origin = 'about:blank';
-class Cache {
-    constructor(context, _options) {
-        this.context = context;
-        this._options = _options;
-        this._cache = {};
-    }
-    addImage(src) {
-        const result = Promise.resolve();
-        if (this.has(src)) {
-            return result;
-        }
-        if (isBlobImage(src) || isRenderable(src)) {
-            (this._cache[src] = this.loadImage(src)).catch(() => {
-                // prevent unhandled rejection
-            });
-            return result;
-        }
-        return result;
-    }
-    match(src) {
-        return this._cache[src];
-    }
-    async loadImage(key) {
-        const isSameOrigin = typeof this._options.customIsSameOrigin === 'function'
-            ? await this._options.customIsSameOrigin(key, CacheStorage.isSameOrigin)
-            : CacheStorage.isSameOrigin(key);
-        const useCORS = !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
-        const useProxy = !isInlineImage(key) &&
-            !isSameOrigin &&
-            !isBlobImage(key) &&
-            typeof this._options.proxy === 'string' &&
-            FEATURES.SUPPORT_CORS_XHR &&
-            !useCORS;
-        if (!isSameOrigin &&
-            this._options.allowTaint === false &&
-            !isInlineImage(key) &&
-            !isBlobImage(key) &&
-            !useProxy &&
-            !useCORS) {
-            return;
-        }
-        let src = key;
-        if (useProxy) {
-            src = await this.proxy(src);
-        }
-        this.context.logger.debug(`Added image ${key.substring(0, 256)}`);
-        return await new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => resolve(img);
-            img.onerror = reject;
-            //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
-            if (isInlineBase64Image(src) || useCORS) {
-                img.crossOrigin = 'anonymous';
-            }
-            img.src = src;
-            if (img.complete === true) {
-                // Inline XML images may fail to parse, throwing an Error later on
-                setTimeout(() => resolve(img), 500);
-            }
-            if (this._options.imageTimeout > 0) {
-                setTimeout(() => reject(`Timed out (${this._options.imageTimeout}ms) loading image`), this._options.imageTimeout);
-            }
-        });
-    }
-    has(key) {
-        return typeof this._cache[key] !== 'undefined';
-    }
-    keys() {
-        return Promise.resolve(Object.keys(this._cache));
-    }
-    proxy(src) {
-        const proxy = this._options.proxy;
-        if (!proxy) {
-            throw new Error('No proxy defined');
-        }
-        const key = src.substring(0, 256);
-        return new Promise((resolve, reject) => {
-            const responseType = FEATURES.SUPPORT_RESPONSE_TYPE ? 'blob' : 'text';
-            const xhr = new XMLHttpRequest();
-            xhr.onload = () => {
-                if (xhr.status === 200) {
-                    if (responseType === 'text') {
-                        resolve(xhr.response);
-                    }
-                    else {
-                        const reader = new FileReader();
-                        reader.addEventListener('load', () => resolve(reader.result), false);
-                        reader.addEventListener('error', (e) => reject(e), false);
-                        reader.readAsDataURL(xhr.response);
-                    }
-                }
-                else {
-                    reject(`Failed to proxy resource ${key} with status code ${xhr.status}`);
-                }
-            };
-            xhr.onerror = reject;
-            const queryString = proxy.indexOf('?') > -1 ? '&' : '?';
-            xhr.open('GET', `${proxy}${queryString}url=${encodeURIComponent(src)}&responseType=${responseType}`);
-            if (responseType !== 'text' && xhr instanceof XMLHttpRequest) {
-                xhr.responseType = responseType;
-            }
-            if (this._options.imageTimeout) {
-                const timeout = this._options.imageTimeout;
-                xhr.timeout = timeout;
-                xhr.ontimeout = () => reject(`Timed out (${timeout}ms) proxying ${key}`);
-            }
-            xhr.send();
-        });
-    }
-}
-const INLINE_SVG = /^data:image\/svg\+xml/i;
-const INLINE_BASE64 = /^data:image\/.*;base64,/i;
-const INLINE_IMG = /^data:image\/.*/i;
-const isRenderable = (src) => FEATURES.SUPPORT_SVG_DRAWING || !isSVG(src);
-const isInlineImage = (src) => INLINE_IMG.test(src);
-const isInlineBase64Image = (src) => INLINE_BASE64.test(src);
-const isBlobImage = (src) => src.substr(0, 4) === 'blob';
-const isSVG = (src) => src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);
-
-class Vector {
-    constructor(x, y) {
-        this.type = 0 /* PathType.VECTOR */;
-        this.x = x;
-        this.y = y;
-    }
-    add(deltaX, deltaY) {
-        return new Vector(this.x + deltaX, this.y + deltaY);
+    add(deltaX, deltaY) {
+        return new Vector(this.x + deltaX, this.y + deltaY);
     }
 }
 
@@ -7388,103 +7418,6 @@ const parseStackingContexts = (container) => {
     return root;
 };
 
-const parsePathForBorder = (curves, borderSide) => {
-    switch (borderSide) {
-        case 0:
-            return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftPaddingBox, curves.topRightBorderBox, curves.topRightPaddingBox);
-        case 1:
-            return createPathFromCurves(curves.topRightBorderBox, curves.topRightPaddingBox, curves.bottomRightBorderBox, curves.bottomRightPaddingBox);
-        case 2:
-            return createPathFromCurves(curves.bottomRightBorderBox, curves.bottomRightPaddingBox, curves.bottomLeftBorderBox, curves.bottomLeftPaddingBox);
-        case 3:
-        default:
-            return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftPaddingBox, curves.topLeftBorderBox, curves.topLeftPaddingBox);
-    }
-};
-const parsePathForBorderDoubleOuter = (curves, borderSide) => {
-    switch (borderSide) {
-        case 0:
-            return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftBorderDoubleOuterBox, curves.topRightBorderBox, curves.topRightBorderDoubleOuterBox);
-        case 1:
-            return createPathFromCurves(curves.topRightBorderBox, curves.topRightBorderDoubleOuterBox, curves.bottomRightBorderBox, curves.bottomRightBorderDoubleOuterBox);
-        case 2:
-            return createPathFromCurves(curves.bottomRightBorderBox, curves.bottomRightBorderDoubleOuterBox, curves.bottomLeftBorderBox, curves.bottomLeftBorderDoubleOuterBox);
-        case 3:
-        default:
-            return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftBorderDoubleOuterBox, curves.topLeftBorderBox, curves.topLeftBorderDoubleOuterBox);
-    }
-};
-const parsePathForBorderDoubleInner = (curves, borderSide) => {
-    switch (borderSide) {
-        case 0:
-            return createPathFromCurves(curves.topLeftBorderDoubleInnerBox, curves.topLeftPaddingBox, curves.topRightBorderDoubleInnerBox, curves.topRightPaddingBox);
-        case 1:
-            return createPathFromCurves(curves.topRightBorderDoubleInnerBox, curves.topRightPaddingBox, curves.bottomRightBorderDoubleInnerBox, curves.bottomRightPaddingBox);
-        case 2:
-            return createPathFromCurves(curves.bottomRightBorderDoubleInnerBox, curves.bottomRightPaddingBox, curves.bottomLeftBorderDoubleInnerBox, curves.bottomLeftPaddingBox);
-        case 3:
-        default:
-            return createPathFromCurves(curves.bottomLeftBorderDoubleInnerBox, curves.bottomLeftPaddingBox, curves.topLeftBorderDoubleInnerBox, curves.topLeftPaddingBox);
-    }
-};
-const parsePathForBorderStroke = (curves, borderSide) => {
-    switch (borderSide) {
-        case 0:
-            return createStrokePathFromCurves(curves.topLeftBorderStroke, curves.topRightBorderStroke);
-        case 1:
-            return createStrokePathFromCurves(curves.topRightBorderStroke, curves.bottomRightBorderStroke);
-        case 2:
-            return createStrokePathFromCurves(curves.bottomRightBorderStroke, curves.bottomLeftBorderStroke);
-        case 3:
-        default:
-            return createStrokePathFromCurves(curves.bottomLeftBorderStroke, curves.topLeftBorderStroke);
-    }
-};
-const createStrokePathFromCurves = (outer1, outer2) => {
-    const path = [];
-    if (isBezierCurve(outer1)) {
-        path.push(outer1.subdivide(0.5, false));
-    }
-    else {
-        path.push(outer1);
-    }
-    if (isBezierCurve(outer2)) {
-        path.push(outer2.subdivide(0.5, true));
-    }
-    else {
-        path.push(outer2);
-    }
-    return path;
-};
-const createPathFromCurves = (outer1, inner1, outer2, inner2) => {
-    const path = [];
-    if (isBezierCurve(outer1)) {
-        path.push(outer1.subdivide(0.5, false));
-    }
-    else {
-        path.push(outer1);
-    }
-    if (isBezierCurve(outer2)) {
-        path.push(outer2.subdivide(0.5, true));
-    }
-    else {
-        path.push(outer2);
-    }
-    if (isBezierCurve(inner2)) {
-        path.push(inner2.subdivide(0.5, true).reverse());
-    }
-    else {
-        path.push(inner2);
-    }
-    if (isBezierCurve(inner1)) {
-        path.push(inner1.subdivide(0.5, false).reverse());
-    }
-    else {
-        path.push(inner1);
-    }
-    return path;
-};
-
 const paddingBox = (element) => {
     const bounds = element.bounds;
     const styles = element.styles;
@@ -7729,248 +7662,834 @@ class Renderer {
     }
 }
 
-const MASK_OFFSET = 10000;
-class CanvasRenderer extends Renderer {
-    constructor(context, options) {
-        super(context, options);
-        this._activeEffects = [];
-        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
-        if (!options.canvas) {
-            this.canvas.width = Math.floor(options.width * options.scale);
-            this.canvas.height = Math.floor(options.height * options.scale);
-            this.canvas.style.width = `${options.width}px`;
-            this.canvas.style.height = `${options.height}px`;
-        }
-        this.fontMetrics = new FontMetrics(document);
-        this.ctx.scale(this.options.scale, this.options.scale);
-        this.ctx.translate(-options.x, -options.y);
-        this.ctx.textBaseline = 'bottom';
-        this._activeEffects = [];
-        this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
+/**
+ * Background Renderer
+ *
+ * Handles rendering of element backgrounds including:
+ * - Background colors
+ * - Background images (URL)
+ * - Linear gradients
+ * - Radial gradients
+ * - Background patterns and repeats
+ */
+/**
+ * Background Renderer
+ *
+ * Specialized renderer for element backgrounds.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+class BackgroundRenderer {
+    constructor(deps) {
+        this.ctx = deps.ctx;
+        this.context = deps.context;
+        this.canvas = deps.canvas;
+        // Options stored in deps but not needed as instance property
     }
-    applyEffects(effects) {
-        while (this._activeEffects.length) {
-            this.popEffect();
+    /**
+     * Render background images for a container
+     * Supports URL images, linear gradients, and radial gradients
+     *
+     * @param container - Element container with background styles
+     */
+    async renderBackgroundImage(container) {
+        let index = container.styles.backgroundImage.length - 1;
+        for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
+            if (backgroundImage.type === 0 /* CSSImageType.URL */) {
+                await this.renderBackgroundURLImage(container, backgroundImage, index);
+            }
+            else if (isLinearGradient(backgroundImage)) {
+                this.renderLinearGradient(container, backgroundImage, index);
+            }
+            else if (isRadialGradient(backgroundImage)) {
+                this.renderRadialGradient(container, backgroundImage, index);
+            }
+            index--;
         }
-        effects.forEach((effect) => this.applyEffect(effect));
     }
-    applyEffect(effect) {
-        this.ctx.save();
-        if (isOpacityEffect(effect)) {
-            this.ctx.globalAlpha = effect.opacity;
-        }
-        if (isTransformEffect(effect)) {
-            this.ctx.translate(effect.offsetX, effect.offsetY);
-            this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
-            this.ctx.translate(-effect.offsetX, -effect.offsetY);
-        }
-        if (isClipEffect(effect)) {
-            this.path(effect.path);
-            this.ctx.clip();
+    /**
+     * Render a URL-based background image
+     */
+    async renderBackgroundURLImage(container, backgroundImage, index) {
+        let image;
+        const url = backgroundImage.url;
+        try {
+            image = await this.context.cache.match(url);
         }
-        this._activeEffects.push(effect);
-    }
-    popEffect() {
-        this._activeEffects.pop();
-        this.ctx.restore();
-    }
-    async renderStack(stack) {
-        const styles = stack.element.container.styles;
-        if (styles.isVisible()) {
-            await this.renderStackContent(stack);
+        catch (e) {
+            this.context.logger.error(`Error loading background-image ${url}`);
+        }
+        if (image) {
+            const imageWidth = isNaN(image.width) || image.width === 0 ? 1 : image.width;
+            const imageHeight = isNaN(image.height) || image.height === 0 ? 1 : image.height;
+            const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [
+                imageWidth,
+                imageHeight,
+                imageWidth / imageHeight
+            ]);
+            const pattern = this.ctx.createPattern(this.resizeImage(image, width, height, container.styles.imageRendering), 'repeat');
+            this.renderRepeat(path, pattern, x, y);
         }
     }
-    async renderNode(paint) {
-        if (contains(paint.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
-            debugger;
-        }
-        if (paint.container.styles.isVisible()) {
-            await this.renderNodeBackgroundAndBorders(paint);
-            await this.renderNodeContent(paint);
+    /**
+     * Render a linear gradient background
+     */
+    renderLinearGradient(container, backgroundImage, index) {
+        const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);
+        const [lineLength, x0, x1, y0, y1] = calculateGradientDirection(backgroundImage.angle, width, height);
+        const ownerDocument = this.canvas.ownerDocument ?? document;
+        const canvas = ownerDocument.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+        processColorStops(backgroundImage.stops, lineLength || 1).forEach((colorStop) => gradient.addColorStop(colorStop.stop, asString(colorStop.color)));
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+        if (width > 0 && height > 0) {
+            const pattern = this.ctx.createPattern(canvas, 'repeat');
+            this.renderRepeat(path, pattern, x, y);
         }
     }
-    renderTextWithLetterSpacing(text, letterSpacing, baseline) {
-        if (letterSpacing === 0) {
-            // Use alphabetic baseline for consistent text positioning across browsers
-            // Issue #129: text.bounds.top + text.bounds.height causes text to render too low
-            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
-        }
-        else {
-            const letters = segmentGraphemes(text.text);
-            letters.reduce((left, letter) => {
-                this.ctx.fillText(letter, left, text.bounds.top + baseline);
-                return left + this.ctx.measureText(letter).width;
-            }, text.bounds.left);
+    /**
+     * Render a radial gradient background
+     */
+    renderRadialGradient(container, backgroundImage, index) {
+        const [path, left, top, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);
+        const position = backgroundImage.position.length === 0 ? [FIFTY_PERCENT] : backgroundImage.position;
+        const x = getAbsoluteValue(position[0], width);
+        const y = getAbsoluteValue(position[position.length - 1], height);
+        let [rx, ry] = calculateRadius(backgroundImage, x, y, width, height);
+        // Handle edge case where radial gradient size is 0
+        // Use a minimum value of 0.01 to ensure gradient is still rendered
+        if (rx === 0 || ry === 0) {
+            rx = Math.max(rx, 0.01);
+            ry = Math.max(ry, 0.01);
+        }
+        if (rx > 0 && ry > 0) {
+            const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
+            processColorStops(backgroundImage.stops, rx * 2).forEach((colorStop) => radialGradient.addColorStop(colorStop.stop, asString(colorStop.color)));
+            this.path(path);
+            this.ctx.fillStyle = radialGradient;
+            if (rx !== ry) {
+                // transforms for elliptical radial gradient
+                const midX = container.bounds.left + 0.5 * container.bounds.width;
+                const midY = container.bounds.top + 0.5 * container.bounds.height;
+                const f = ry / rx;
+                const invF = 1 / f;
+                this.ctx.save();
+                this.ctx.translate(midX, midY);
+                this.ctx.transform(1, 0, 0, f, 0, 0);
+                this.ctx.translate(-midX, -midY);
+                this.ctx.fillRect(left, invF * (top - midY) + midY, width, height * invF);
+                this.ctx.restore();
+            }
+            else {
+                this.ctx.fill();
+            }
         }
     }
     /**
-     * Helper method to render text with paint order support
-     * Reduces code duplication in line-clamp and normal rendering
+     * Render a repeating pattern with offset
+     *
+     * @param path - Path to fill
+     * @param pattern - Canvas pattern or gradient
+     * @param offsetX - X offset for pattern
+     * @param offsetY - Y offset for pattern
      */
-    renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers) {
-        paintOrderLayers.forEach((paintOrderLayer) => {
-            switch (paintOrderLayer) {
-                case 0 /* PAINT_ORDER_LAYER.FILL */:
-                    this.ctx.fillStyle = asString(styles.color);
-                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
-                    break;
-                case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                    if (styles.webkitTextStrokeWidth && textBound.text.trim().length) {
-                        this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
-                        this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                        this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                        this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
-                    }
-                    break;
-            }
-        });
+    renderRepeat(path, pattern, offsetX, offsetY) {
+        this.path(path);
+        this.ctx.fillStyle = pattern;
+        this.ctx.translate(offsetX, offsetY);
+        this.ctx.fill();
+        this.ctx.translate(-offsetX, -offsetY);
     }
-    renderTextDecoration(bounds, styles) {
-        this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
-        // Calculate decoration line thickness
-        let thickness = 1; // default
-        if (typeof styles.textDecorationThickness === 'number') {
-            thickness = styles.textDecorationThickness;
+    /**
+     * Resize an image to target dimensions
+     *
+     * @param image - Source image
+     * @param width - Target width
+     * @param height - Target height
+     * @param imageRendering - CSS image-rendering property value
+     * @returns Resized canvas or original image
+     */
+    resizeImage(image, width, height, imageRendering) {
+        // https://github.com/niklasvh/html2canvas/pull/2911
+        // if (image.width === width && image.height === height) {
+        //     return image;
+        // }
+        const ownerDocument = this.canvas.ownerDocument ?? document;
+        const canvas = ownerDocument.createElement('canvas');
+        canvas.width = Math.max(1, width);
+        canvas.height = Math.max(1, height);
+        const ctx = canvas.getContext('2d');
+        // Apply image smoothing based on CSS image-rendering property
+        if (imageRendering === IMAGE_RENDERING.PIXELATED || imageRendering === IMAGE_RENDERING.CRISP_EDGES) {
+            this.context.logger.debug(`Disabling image smoothing for background image due to CSS image-rendering`);
+            ctx.imageSmoothingEnabled = false;
         }
-        else if (styles.textDecorationThickness === 'from-font') {
-            // Use a reasonable default based on font size
-            thickness = Math.max(1, Math.floor(styles.fontSize.number * 0.05));
+        else if (imageRendering === IMAGE_RENDERING.SMOOTH) {
+            this.context.logger.debug(`Enabling image smoothing for background image due to CSS image-rendering: smooth`);
+            ctx.imageSmoothingEnabled = true;
         }
-        // 'auto' uses default thickness of 1
-        // Calculate underline offset
-        let underlineOffset = 0;
-        if (typeof styles.textUnderlineOffset === 'number') {
-            // It's a pixel value
-            underlineOffset = styles.textUnderlineOffset;
+        else {
+            // AUTO: inherit from main renderer context
+            ctx.imageSmoothingEnabled = this.ctx.imageSmoothingEnabled;
         }
-        // 'auto' uses default offset of 0
-        const decorationStyle = styles.textDecorationStyle;
-        styles.textDecorationLine.forEach((textDecorationLine) => {
-            let y = 0;
-            switch (textDecorationLine) {
-                case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
-                    y = bounds.top + bounds.height - thickness + underlineOffset;
-                    break;
-                case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
-                    y = bounds.top;
-                    break;
-                case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
-                    y = bounds.top + (bounds.height / 2 - thickness / 2);
-                    break;
-                default:
-                    return;
-            }
-            this.drawDecorationLine(bounds.left, y, bounds.width, thickness, decorationStyle);
-        });
-    }
-    drawDecorationLine(x, y, width, thickness, style) {
-        switch (style) {
-            case 0 /* TEXT_DECORATION_STYLE.SOLID */:
-                // Solid line (default)
-                this.ctx.fillRect(x, y, width, thickness);
-                break;
-            case 1 /* TEXT_DECORATION_STYLE.DOUBLE */:
-                // Double line
-                const gap = Math.max(1, thickness);
-                this.ctx.fillRect(x, y, width, thickness);
-                this.ctx.fillRect(x, y + thickness + gap, width, thickness);
-                break;
-            case 2 /* TEXT_DECORATION_STYLE.DOTTED */:
-                // Dotted line
-                this.ctx.save();
-                this.ctx.beginPath();
-                this.ctx.setLineDash([thickness, thickness * 2]);
-                this.ctx.lineWidth = thickness;
-                this.ctx.strokeStyle = this.ctx.fillStyle;
-                this.ctx.moveTo(x, y + thickness / 2);
-                this.ctx.lineTo(x + width, y + thickness / 2);
-                this.ctx.stroke();
-                this.ctx.restore();
-                break;
-            case 3 /* TEXT_DECORATION_STYLE.DASHED */:
-                // Dashed line
-                this.ctx.save();
-                this.ctx.beginPath();
-                this.ctx.setLineDash([thickness * 3, thickness * 2]);
-                this.ctx.lineWidth = thickness;
-                this.ctx.strokeStyle = this.ctx.fillStyle;
-                this.ctx.moveTo(x, y + thickness / 2);
-                this.ctx.lineTo(x + width, y + thickness / 2);
-                this.ctx.stroke();
-                this.ctx.restore();
-                break;
-            case 4 /* TEXT_DECORATION_STYLE.WAVY */:
-                // Wavy line (approximation using quadratic curves)
-                this.ctx.save();
-                this.ctx.beginPath();
-                this.ctx.lineWidth = thickness;
-                this.ctx.strokeStyle = this.ctx.fillStyle;
-                const amplitude = thickness * 2;
-                const wavelength = thickness * 4;
-                let currentX = x;
-                this.ctx.moveTo(currentX, y + thickness / 2);
-                while (currentX < x + width) {
-                    const nextX = Math.min(currentX + wavelength / 2, x + width);
-                    this.ctx.quadraticCurveTo(currentX + wavelength / 4, y + thickness / 2 - amplitude, nextX, y + thickness / 2);
-                    currentX = nextX;
-                    if (currentX < x + width) {
-                        const nextX2 = Math.min(currentX + wavelength / 2, x + width);
-                        this.ctx.quadraticCurveTo(currentX + wavelength / 4, y + thickness / 2 + amplitude, nextX2, y + thickness / 2);
-                        currentX = nextX2;
-                    }
-                }
-                this.ctx.stroke();
-                this.ctx.restore();
-                break;
-            default:
-                // Fallback to solid
-                this.ctx.fillRect(x, y, width, thickness);
+        // Inherit quality setting
+        if (this.ctx.imageSmoothingQuality) {
+            ctx.imageSmoothingQuality = this.ctx.imageSmoothingQuality;
         }
+        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
+        return canvas;
     }
-    // Helper method to truncate text and add ellipsis if needed
-    truncateTextWithEllipsis(text, maxWidth, letterSpacing) {
-        const ellipsis = '...';
-        const ellipsisWidth = this.ctx.measureText(ellipsis).width;
-        if (letterSpacing === 0) {
-            let truncated = text;
-            while (this.ctx.measureText(truncated).width + ellipsisWidth > maxWidth && truncated.length > 0) {
-                truncated = truncated.slice(0, -1);
+    /**
+     * Create a canvas path from path array
+     *
+     * @param paths - Array of path points
+     */
+    path(paths) {
+        this.ctx.beginPath();
+        this.formatPath(paths);
+        this.ctx.closePath();
+    }
+    /**
+     * Format path points into canvas path
+     *
+     * @param paths - Array of path points
+     */
+    formatPath(paths) {
+        paths.forEach((point, index) => {
+            const start = isBezierCurve(point) ? point.start : point;
+            if (index === 0) {
+                this.ctx.moveTo(start.x, start.y);
             }
-            return truncated + ellipsis;
-        }
-        else {
-            const letters = segmentGraphemes(text);
-            let width = ellipsisWidth;
-            let result = [];
-            for (const letter of letters) {
-                const letterWidth = this.ctx.measureText(letter).width + letterSpacing;
-                if (width + letterWidth > maxWidth) {
-                    break;
-                }
-                result.push(letter);
-                width += letterWidth;
+            else {
+                this.ctx.lineTo(start.x, start.y);
             }
-            return result.join('') + ellipsis;
-        }
-    }
-    createFontStyle(styles) {
-        const fontVariant = styles.fontVariant
-            .filter((variant) => variant === 'normal' || variant === 'small-caps')
-            .join('');
-        const fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
-        const fontSize = isDimensionToken(styles.fontSize)
-            ? `${styles.fontSize.number}${styles.fontSize.unit}`
-            : `${styles.fontSize.number}px`;
-        return [
-            [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '),
-            fontFamily,
-            fontSize
-        ];
+            if (isBezierCurve(point)) {
+                this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
+            }
+        });
     }
-    async renderTextNode(text, styles, containerBounds) {
-        const [font] = this.createFontStyle(styles);
-        this.ctx.font = font;
+}
+
+const parsePathForBorder = (curves, borderSide) => {
+    switch (borderSide) {
+        case 0:
+            return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftPaddingBox, curves.topRightBorderBox, curves.topRightPaddingBox);
+        case 1:
+            return createPathFromCurves(curves.topRightBorderBox, curves.topRightPaddingBox, curves.bottomRightBorderBox, curves.bottomRightPaddingBox);
+        case 2:
+            return createPathFromCurves(curves.bottomRightBorderBox, curves.bottomRightPaddingBox, curves.bottomLeftBorderBox, curves.bottomLeftPaddingBox);
+        case 3:
+        default:
+            return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftPaddingBox, curves.topLeftBorderBox, curves.topLeftPaddingBox);
+    }
+};
+const parsePathForBorderDoubleOuter = (curves, borderSide) => {
+    switch (borderSide) {
+        case 0:
+            return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftBorderDoubleOuterBox, curves.topRightBorderBox, curves.topRightBorderDoubleOuterBox);
+        case 1:
+            return createPathFromCurves(curves.topRightBorderBox, curves.topRightBorderDoubleOuterBox, curves.bottomRightBorderBox, curves.bottomRightBorderDoubleOuterBox);
+        case 2:
+            return createPathFromCurves(curves.bottomRightBorderBox, curves.bottomRightBorderDoubleOuterBox, curves.bottomLeftBorderBox, curves.bottomLeftBorderDoubleOuterBox);
+        case 3:
+        default:
+            return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftBorderDoubleOuterBox, curves.topLeftBorderBox, curves.topLeftBorderDoubleOuterBox);
+    }
+};
+const parsePathForBorderDoubleInner = (curves, borderSide) => {
+    switch (borderSide) {
+        case 0:
+            return createPathFromCurves(curves.topLeftBorderDoubleInnerBox, curves.topLeftPaddingBox, curves.topRightBorderDoubleInnerBox, curves.topRightPaddingBox);
+        case 1:
+            return createPathFromCurves(curves.topRightBorderDoubleInnerBox, curves.topRightPaddingBox, curves.bottomRightBorderDoubleInnerBox, curves.bottomRightPaddingBox);
+        case 2:
+            return createPathFromCurves(curves.bottomRightBorderDoubleInnerBox, curves.bottomRightPaddingBox, curves.bottomLeftBorderDoubleInnerBox, curves.bottomLeftPaddingBox);
+        case 3:
+        default:
+            return createPathFromCurves(curves.bottomLeftBorderDoubleInnerBox, curves.bottomLeftPaddingBox, curves.topLeftBorderDoubleInnerBox, curves.topLeftPaddingBox);
+    }
+};
+const parsePathForBorderStroke = (curves, borderSide) => {
+    switch (borderSide) {
+        case 0:
+            return createStrokePathFromCurves(curves.topLeftBorderStroke, curves.topRightBorderStroke);
+        case 1:
+            return createStrokePathFromCurves(curves.topRightBorderStroke, curves.bottomRightBorderStroke);
+        case 2:
+            return createStrokePathFromCurves(curves.bottomRightBorderStroke, curves.bottomLeftBorderStroke);
+        case 3:
+        default:
+            return createStrokePathFromCurves(curves.bottomLeftBorderStroke, curves.topLeftBorderStroke);
+    }
+};
+const createStrokePathFromCurves = (outer1, outer2) => {
+    const path = [];
+    if (isBezierCurve(outer1)) {
+        path.push(outer1.subdivide(0.5, false));
+    }
+    else {
+        path.push(outer1);
+    }
+    if (isBezierCurve(outer2)) {
+        path.push(outer2.subdivide(0.5, true));
+    }
+    else {
+        path.push(outer2);
+    }
+    return path;
+};
+const createPathFromCurves = (outer1, inner1, outer2, inner2) => {
+    const path = [];
+    if (isBezierCurve(outer1)) {
+        path.push(outer1.subdivide(0.5, false));
+    }
+    else {
+        path.push(outer1);
+    }
+    if (isBezierCurve(outer2)) {
+        path.push(outer2.subdivide(0.5, true));
+    }
+    else {
+        path.push(outer2);
+    }
+    if (isBezierCurve(inner2)) {
+        path.push(inner2.subdivide(0.5, true).reverse());
+    }
+    else {
+        path.push(inner2);
+    }
+    if (isBezierCurve(inner1)) {
+        path.push(inner1.subdivide(0.5, false).reverse());
+    }
+    else {
+        path.push(inner1);
+    }
+    return path;
+};
+
+/**
+ * Border Renderer
+ *
+ * Handles rendering of element borders including:
+ * - Solid borders
+ * - Double borders
+ * - Dashed borders
+ * - Dotted borders
+ */
+/**
+ * Border Renderer
+ *
+ * Specialized renderer for element borders.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+class BorderRenderer {
+    constructor(deps, pathCallbacks) {
+        this.ctx = deps.ctx;
+        this.pathCallbacks = pathCallbacks;
+    }
+    /**
+     * Render a solid border
+     *
+     * @param color - Border color
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     */
+    async renderSolidBorder(color, side, curvePoints) {
+        this.pathCallbacks.path(parsePathForBorder(curvePoints, side));
+        this.ctx.fillStyle = asString(color);
+        this.ctx.fill();
+    }
+    /**
+     * Render a double border
+     * Falls back to solid border if width is too small
+     *
+     * @param color - Border color
+     * @param width - Border width
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     */
+    async renderDoubleBorder(color, width, side, curvePoints) {
+        if (width < 3) {
+            await this.renderSolidBorder(color, side, curvePoints);
+            return;
+        }
+        const outerPaths = parsePathForBorderDoubleOuter(curvePoints, side);
+        this.pathCallbacks.path(outerPaths);
+        this.ctx.fillStyle = asString(color);
+        this.ctx.fill();
+        const innerPaths = parsePathForBorderDoubleInner(curvePoints, side);
+        this.pathCallbacks.path(innerPaths);
+        this.ctx.fill();
+    }
+    /**
+     * Render a dashed or dotted border
+     *
+     * @param color - Border color
+     * @param width - Border width
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     * @param style - Border style (DASHED or DOTTED)
+     */
+    async renderDashedDottedBorder(color, width, side, curvePoints, style) {
+        this.ctx.save();
+        const strokePaths = parsePathForBorderStroke(curvePoints, side);
+        const boxPaths = parsePathForBorder(curvePoints, side);
+        if (style === 2 /* BORDER_STYLE.DASHED */) {
+            this.pathCallbacks.path(boxPaths);
+            this.ctx.clip();
+        }
+        // Extract start and end coordinates
+        let startX, startY, endX, endY;
+        if (isBezierCurve(boxPaths[0])) {
+            startX = boxPaths[0].start.x;
+            startY = boxPaths[0].start.y;
+        }
+        else {
+            startX = boxPaths[0].x;
+            startY = boxPaths[0].y;
+        }
+        if (isBezierCurve(boxPaths[1])) {
+            endX = boxPaths[1].end.x;
+            endY = boxPaths[1].end.y;
+        }
+        else {
+            endX = boxPaths[1].x;
+            endY = boxPaths[1].y;
+        }
+        // Calculate border length
+        let length;
+        if (side === 0 || side === 2) {
+            length = Math.abs(startX - endX);
+        }
+        else {
+            length = Math.abs(startY - endY);
+        }
+        this.ctx.beginPath();
+        if (style === 3 /* BORDER_STYLE.DOTTED */) {
+            this.pathCallbacks.formatPath(strokePaths);
+        }
+        else {
+            this.pathCallbacks.formatPath(boxPaths.slice(0, 2));
+        }
+        // Calculate dash and space lengths
+        let dashLength = width < 3 ? width * 3 : width * 2;
+        let spaceLength = width < 3 ? width * 2 : width;
+        if (style === 3 /* BORDER_STYLE.DOTTED */) {
+            dashLength = width;
+            spaceLength = width;
+        }
+        // Adjust dash pattern for border length
+        let useLineDash = true;
+        if (length <= dashLength * 2) {
+            useLineDash = false;
+        }
+        else if (length <= dashLength * 2 + spaceLength) {
+            const multiplier = length / (2 * dashLength + spaceLength);
+            dashLength *= multiplier;
+            spaceLength *= multiplier;
+        }
+        else {
+            const numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
+            const minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
+            const maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
+            spaceLength =
+                maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
+                    ? minSpace
+                    : maxSpace;
+        }
+        // Apply line dash pattern
+        if (useLineDash) {
+            if (style === 3 /* BORDER_STYLE.DOTTED */) {
+                this.ctx.setLineDash([0, dashLength + spaceLength]);
+            }
+            else {
+                this.ctx.setLineDash([dashLength, spaceLength]);
+            }
+        }
+        // Set line style and stroke
+        if (style === 3 /* BORDER_STYLE.DOTTED */) {
+            this.ctx.lineCap = 'round';
+            this.ctx.lineWidth = width;
+        }
+        else {
+            this.ctx.lineWidth = width * 2 + 1.1;
+        }
+        this.ctx.strokeStyle = asString(color);
+        this.ctx.stroke();
+        this.ctx.setLineDash([]);
+        // Fill dashed round edge gaps
+        if (style === 2 /* BORDER_STYLE.DASHED */) {
+            if (isBezierCurve(boxPaths[0])) {
+                const path1 = boxPaths[3];
+                const path2 = boxPaths[0];
+                this.ctx.beginPath();
+                this.pathCallbacks.formatPath([
+                    new Vector(path1.end.x, path1.end.y),
+                    new Vector(path2.start.x, path2.start.y)
+                ]);
+                this.ctx.stroke();
+            }
+            if (isBezierCurve(boxPaths[1])) {
+                const path1 = boxPaths[1];
+                const path2 = boxPaths[2];
+                this.ctx.beginPath();
+                this.pathCallbacks.formatPath([
+                    new Vector(path1.end.x, path1.end.y),
+                    new Vector(path2.start.x, path2.start.y)
+                ]);
+                this.ctx.stroke();
+            }
+        }
+        this.ctx.restore();
+    }
+}
+
+/**
+ * Effects Renderer
+ *
+ * Handles rendering effects including:
+ * - Opacity effects
+ * - Transform effects (matrix transformations)
+ * - Clip effects (clipping paths)
+ */
+/**
+ * Effects Renderer
+ *
+ * Manages rendering effects stack including opacity, transforms, and clipping.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+class EffectsRenderer {
+    constructor(deps, pathCallback) {
+        this.activeEffects = [];
+        this.ctx = deps.ctx;
+        this.pathCallback = pathCallback;
+    }
+    /**
+     * Apply multiple effects
+     * Clears existing effects and applies new ones
+     *
+     * @param effects - Array of effects to apply
+     */
+    applyEffects(effects) {
+        // Clear all existing effects
+        while (this.activeEffects.length) {
+            this.popEffect();
+        }
+        // Apply new effects
+        effects.forEach((effect) => this.applyEffect(effect));
+    }
+    /**
+     * Apply a single effect
+     *
+     * @param effect - Effect to apply
+     */
+    applyEffect(effect) {
+        this.ctx.save();
+        // Apply opacity effect
+        if (isOpacityEffect(effect)) {
+            this.ctx.globalAlpha = effect.opacity;
+        }
+        // Apply transform effect
+        if (isTransformEffect(effect)) {
+            this.ctx.translate(effect.offsetX, effect.offsetY);
+            this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
+            this.ctx.translate(-effect.offsetX, -effect.offsetY);
+        }
+        // Apply clip effect
+        if (isClipEffect(effect)) {
+            this.pathCallback.path(effect.path);
+            this.ctx.clip();
+        }
+        this.activeEffects.push(effect);
+    }
+    /**
+     * Remove the most recent effect
+     * Restores the canvas state before the effect was applied
+     */
+    popEffect() {
+        this.activeEffects.pop();
+        this.ctx.restore();
+    }
+    /**
+     * Get the current number of active effects
+     *
+     * @returns Number of active effects
+     */
+    getActiveEffectCount() {
+        return this.activeEffects.length;
+    }
+    /**
+     * Check if there are any active effects
+     *
+     * @returns True if there are active effects
+     */
+    hasActiveEffects() {
+        return this.activeEffects.length > 0;
+    }
+}
+
+/**
+ * Text Renderer
+ *
+ * Handles rendering of text content including:
+ * - Text with letter spacing
+ * - Text decorations (underline, overline, line-through)
+ * - Text shadows
+ * - Webkit line clamp
+ * - Text overflow ellipsis
+ * - Paint order (fill/stroke)
+ * - Font styles
+ */
+// iOS font fix - see https://github.com/niklasvh/html2canvas/pull/2645
+const iOSBrokenFonts = ['-apple-system', 'system-ui'];
+/**
+ * Detect iOS version from user agent
+ * Returns null if not iOS or version cannot be determined
+ */
+const getIOSVersion = () => {
+    if (typeof navigator === 'undefined') {
+        return null;
+    }
+    const userAgent = navigator.userAgent;
+    // Check if it's iOS or iPadOS
+    // iPadOS 13+ may identify as Macintosh, check for touch support
+    const isIOS = /iPhone|iPad|iPod/.test(userAgent);
+    const isIPadOS = /Macintosh/.test(userAgent) && navigator.maxTouchPoints && navigator.maxTouchPoints > 1;
+    if (!isIOS && !isIPadOS) {
+        return null;
+    }
+    // Extract version number from various iOS user agent formats:
+    // - "iPhone OS 15_0" or "iPhone OS 15_0_1"
+    // - "CPU OS 15_0 like Mac OS X"
+    // - "CPU iPhone OS 15_0 like Mac OS X"
+    // - "Version/15.0" (for iPadOS)
+    const patterns = [
+        /(?:iPhone|CPU(?:\siPhone)?)\sOS\s(\d+)[\._](\d+)/, // iPhone OS, CPU OS, CPU iPhone OS
+        /Version\/(\d+)\.(\d+)/ // Version/15.0 (iPadOS)
+    ];
+    for (const pattern of patterns) {
+        const match = userAgent.match(pattern);
+        if (match && match[1]) {
+            return parseInt(match[1], 10);
+        }
+    }
+    return null;
+};
+const fixIOSSystemFonts = (fontFamilies) => {
+    const iosVersion = getIOSVersion();
+    // On iOS 15.0 and 15.1, system fonts have rendering issues
+    // Fixed in iOS 17+
+    if (iosVersion !== null && iosVersion >= 15 && iosVersion < 17) {
+        return fontFamilies.map((fontFamily) => iOSBrokenFonts.indexOf(fontFamily) !== -1
+            ? `-apple-system, "Helvetica Neue", Arial, sans-serif`
+            : fontFamily);
+    }
+    return fontFamilies;
+};
+/**
+ * Text Renderer
+ *
+ * Specialized renderer for text content.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+class TextRenderer {
+    constructor(deps) {
+        this.ctx = deps.ctx;
+        // context stored but not used directly in this renderer
+        this.options = deps.options;
+    }
+    /**
+     * Render text with letter spacing
+     * Public method used by list rendering
+     */
+    renderTextWithLetterSpacing(text, letterSpacing, baseline) {
+        if (letterSpacing === 0) {
+            // Use alphabetic baseline for consistent text positioning across browsers
+            // Issue #129: text.bounds.top + text.bounds.height causes text to render too low
+            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
+        }
+        else {
+            const letters = segmentGraphemes(text.text);
+            letters.reduce((left, letter) => {
+                this.ctx.fillText(letter, left, text.bounds.top + baseline);
+                return left + this.ctx.measureText(letter).width;
+            }, text.bounds.left);
+        }
+    }
+    /**
+     * Helper method to render text with paint order support
+     * Reduces code duplication in line-clamp and normal rendering
+     */
+    renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers) {
+        paintOrderLayers.forEach((paintOrderLayer) => {
+            switch (paintOrderLayer) {
+                case 0 /* PAINT_ORDER_LAYER.FILL */:
+                    this.ctx.fillStyle = asString(styles.color);
+                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
+                    break;
+                case 1 /* PAINT_ORDER_LAYER.STROKE */:
+                    if (styles.webkitTextStrokeWidth && textBound.text.trim().length) {
+                        this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                        this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                        this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
+                        this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
+                    }
+                    break;
+            }
+        });
+    }
+    renderTextDecoration(bounds, styles) {
+        this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
+        // Calculate decoration line thickness
+        let thickness = 1; // default
+        if (typeof styles.textDecorationThickness === 'number') {
+            thickness = styles.textDecorationThickness;
+        }
+        else if (styles.textDecorationThickness === 'from-font') {
+            // Use a reasonable default based on font size
+            thickness = Math.max(1, Math.floor(styles.fontSize.number * 0.05));
+        }
+        // 'auto' uses default thickness of 1
+        // Calculate underline offset
+        let underlineOffset = 0;
+        if (typeof styles.textUnderlineOffset === 'number') {
+            // It's a pixel value
+            underlineOffset = styles.textUnderlineOffset;
+        }
+        // 'auto' uses default offset of 0
+        const decorationStyle = styles.textDecorationStyle;
+        styles.textDecorationLine.forEach((textDecorationLine) => {
+            let y = 0;
+            switch (textDecorationLine) {
+                case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
+                    y = bounds.top + bounds.height - thickness + underlineOffset;
+                    break;
+                case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
+                    y = bounds.top;
+                    break;
+                case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
+                    y = bounds.top + (bounds.height / 2 - thickness / 2);
+                    break;
+                default:
+                    return;
+            }
+            this.drawDecorationLine(bounds.left, y, bounds.width, thickness, decorationStyle);
+        });
+    }
+    drawDecorationLine(x, y, width, thickness, style) {
+        switch (style) {
+            case 0 /* TEXT_DECORATION_STYLE.SOLID */:
+                // Solid line (default)
+                this.ctx.fillRect(x, y, width, thickness);
+                break;
+            case 1 /* TEXT_DECORATION_STYLE.DOUBLE */:
+                // Double line
+                const gap = Math.max(1, thickness);
+                this.ctx.fillRect(x, y, width, thickness);
+                this.ctx.fillRect(x, y + thickness + gap, width, thickness);
+                break;
+            case 2 /* TEXT_DECORATION_STYLE.DOTTED */:
+                // Dotted line
+                this.ctx.save();
+                this.ctx.beginPath();
+                this.ctx.setLineDash([thickness, thickness * 2]);
+                this.ctx.lineWidth = thickness;
+                this.ctx.strokeStyle = this.ctx.fillStyle;
+                this.ctx.moveTo(x, y + thickness / 2);
+                this.ctx.lineTo(x + width, y + thickness / 2);
+                this.ctx.stroke();
+                this.ctx.restore();
+                break;
+            case 3 /* TEXT_DECORATION_STYLE.DASHED */:
+                // Dashed line
+                this.ctx.save();
+                this.ctx.beginPath();
+                this.ctx.setLineDash([thickness * 3, thickness * 2]);
+                this.ctx.lineWidth = thickness;
+                this.ctx.strokeStyle = this.ctx.fillStyle;
+                this.ctx.moveTo(x, y + thickness / 2);
+                this.ctx.lineTo(x + width, y + thickness / 2);
+                this.ctx.stroke();
+                this.ctx.restore();
+                break;
+            case 4 /* TEXT_DECORATION_STYLE.WAVY */:
+                // Wavy line (approximation using quadratic curves)
+                this.ctx.save();
+                this.ctx.beginPath();
+                this.ctx.lineWidth = thickness;
+                this.ctx.strokeStyle = this.ctx.fillStyle;
+                const amplitude = thickness * 2;
+                const wavelength = thickness * 4;
+                let currentX = x;
+                this.ctx.moveTo(currentX, y + thickness / 2);
+                while (currentX < x + width) {
+                    const nextX = Math.min(currentX + wavelength / 2, x + width);
+                    this.ctx.quadraticCurveTo(currentX + wavelength / 4, y + thickness / 2 - amplitude, nextX, y + thickness / 2);
+                    currentX = nextX;
+                    if (currentX < x + width) {
+                        const nextX2 = Math.min(currentX + wavelength / 2, x + width);
+                        this.ctx.quadraticCurveTo(currentX + wavelength / 4, y + thickness / 2 + amplitude, nextX2, y + thickness / 2);
+                        currentX = nextX2;
+                    }
+                }
+                this.ctx.stroke();
+                this.ctx.restore();
+                break;
+            default:
+                // Fallback to solid
+                this.ctx.fillRect(x, y, width, thickness);
+        }
+    }
+    // Helper method to truncate text and add ellipsis if needed
+    truncateTextWithEllipsis(text, maxWidth, letterSpacing) {
+        const ellipsis = '...';
+        const ellipsisWidth = this.ctx.measureText(ellipsis).width;
+        if (letterSpacing === 0) {
+            let truncated = text;
+            while (this.ctx.measureText(truncated).width + ellipsisWidth > maxWidth && truncated.length > 0) {
+                truncated = truncated.slice(0, -1);
+            }
+            return truncated + ellipsis;
+        }
+        else {
+            const letters = segmentGraphemes(text);
+            let width = ellipsisWidth;
+            let result = [];
+            for (const letter of letters) {
+                const letterWidth = this.ctx.measureText(letter).width + letterSpacing;
+                if (width + letterWidth > maxWidth) {
+                    break;
+                }
+                result.push(letter);
+                width += letterWidth;
+            }
+            return result.join('') + ellipsis;
+        }
+    }
+    /**
+     * Create font style array
+     * Public method used by list rendering
+     */
+    createFontStyle(styles) {
+        const fontVariant = styles.fontVariant
+            .filter((variant) => variant === 'normal' || variant === 'small-caps')
+            .join('');
+        const fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
+        const fontSize = isDimensionToken(styles.fontSize)
+            ? `${styles.fontSize.number}${styles.fontSize.unit}`
+            : `${styles.fontSize.number}px`;
+        return [
+            [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '),
+            fontFamily,
+            fontSize
+        ];
+    }
+    async renderTextNode(text, styles, containerBounds) {
+        const [font] = this.createFontStyle(styles);
+        this.ctx.font = font;
         this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
         this.ctx.textAlign = 'left';
         this.ctx.textBaseline = 'alphabetic';
@@ -8136,846 +8655,1756 @@ class CanvasRenderer extends Renderer {
                         }
                         break;
                     case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                        if (styles.webkitTextStrokeWidth && truncatedText.trim().length) {
+                        if (styles.webkitTextStrokeWidth && truncatedText.trim().length) {
+                            this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                            this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
+                            if (styles.letterSpacing === 0) {
+                                this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
+                            }
+                            else {
+                                const letters = segmentGraphemes(truncatedText);
+                                letters.reduce((left, letter) => {
+                                    this.ctx.strokeText(letter, left, firstBound.bounds.top + styles.fontSize.number);
+                                    return left + this.ctx.measureText(letter).width + styles.letterSpacing;
+                                }, firstBound.bounds.left);
+                            }
+                        }
+                        break;
+                }
+            });
+            return;
+        }
+        // Normal rendering (no ellipsis needed)
+        text.textBounds.forEach((text) => {
+            paintOrder.forEach((paintOrderLayer) => {
+                switch (paintOrderLayer) {
+                    case 0 /* PAINT_ORDER_LAYER.FILL */:
+                        this.ctx.fillStyle = asString(styles.color);
+                        this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
+                        const textShadows = styles.textShadow;
+                        if (textShadows.length && text.text.trim().length) {
+                            textShadows
+                                .slice(0)
+                                .reverse()
+                                .forEach((textShadow) => {
+                                this.ctx.shadowColor = asString(textShadow.color);
+                                this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
+                                this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
+                                this.ctx.shadowBlur = textShadow.blur.number;
+                                this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
+                            });
+                            this.ctx.shadowColor = '';
+                            this.ctx.shadowOffsetX = 0;
+                            this.ctx.shadowOffsetY = 0;
+                            this.ctx.shadowBlur = 0;
+                        }
+                        if (styles.textDecorationLine.length) {
+                            this.renderTextDecoration(text.bounds, styles);
+                        }
+                        break;
+                    case 1 /* PAINT_ORDER_LAYER.STROKE */:
+                        if (styles.webkitTextStrokeWidth && text.text.trim().length) {
                             this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
                             this.ctx.lineWidth = styles.webkitTextStrokeWidth;
                             this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
+                            // Issue #110: Use baseline (fontSize) for consistent positioning with fill
+                            // Previously used text.bounds.height which caused stroke to render too low
+                            const baseline = styles.fontSize.number;
                             if (styles.letterSpacing === 0) {
-                                this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
+                                this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
                             }
                             else {
-                                const letters = segmentGraphemes(truncatedText);
+                                const letters = segmentGraphemes(text.text);
                                 letters.reduce((left, letter) => {
-                                    this.ctx.strokeText(letter, left, firstBound.bounds.top + styles.fontSize.number);
-                                    return left + this.ctx.measureText(letter).width + styles.letterSpacing;
-                                }, firstBound.bounds.left);
+                                    this.ctx.strokeText(letter, left, text.bounds.top + baseline);
+                                    return left + this.ctx.measureText(letter).width;
+                                }, text.bounds.left);
                             }
                         }
+                        this.ctx.strokeStyle = '';
+                        this.ctx.lineWidth = 0;
+                        this.ctx.lineJoin = 'miter';
                         break;
                 }
             });
-            return;
+        });
+    }
+}
+
+const MASK_OFFSET = 10000;
+class CanvasRenderer extends Renderer {
+    constructor(context, options) {
+        super(context, options);
+        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        if (!options.canvas) {
+            this.canvas.width = Math.floor(options.width * options.scale);
+            this.canvas.height = Math.floor(options.height * options.scale);
+            this.canvas.style.width = `${options.width}px`;
+            this.canvas.style.height = `${options.height}px`;
+        }
+        this.fontMetrics = new FontMetrics(document);
+        this.ctx.scale(this.options.scale, this.options.scale);
+        this.ctx.translate(-options.x, -options.y);
+        this.ctx.textBaseline = 'bottom';
+        // Set image smoothing options
+        if (options.imageSmoothing !== undefined) {
+            this.ctx.imageSmoothingEnabled = options.imageSmoothing;
+        }
+        if (options.imageSmoothingQuality) {
+            this.ctx.imageSmoothingQuality = options.imageSmoothingQuality;
+        }
+        // Initialize specialized renderers
+        this.backgroundRenderer = new BackgroundRenderer({
+            ctx: this.ctx,
+            context: this.context,
+            canvas: this.canvas,
+            options: {
+                width: options.width,
+                height: options.height,
+                scale: options.scale
+            }
+        });
+        this.borderRenderer = new BorderRenderer({ ctx: this.ctx }, {
+            path: (paths) => this.path(paths),
+            formatPath: (paths) => this.formatPath(paths)
+        });
+        this.effectsRenderer = new EffectsRenderer({ ctx: this.ctx }, { path: (paths) => this.path(paths) });
+        this.textRenderer = new TextRenderer({
+            ctx: this.ctx,
+            context: this.context,
+            options: { scale: options.scale }
+        });
+        this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
+    }
+    async renderStack(stack) {
+        const styles = stack.element.container.styles;
+        if (styles.isVisible()) {
+            await this.renderStackContent(stack);
+        }
+    }
+    async renderNode(paint) {
+        if (contains(paint.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
+            debugger;
+        }
+        if (paint.container.styles.isVisible()) {
+            await this.renderNodeBackgroundAndBorders(paint);
+            await this.renderNodeContent(paint);
+        }
+    }
+    /**
+     * Helper method to render text with paint order support
+     * Reduces code duplication in line-clamp and normal rendering
+     */
+    // Helper method to truncate text and add ellipsis if needed
+    renderReplacedElement(container, curves, image) {
+        const intrinsicWidth = image.naturalWidth || container.intrinsicWidth;
+        const intrinsicHeight = image.naturalHeight || container.intrinsicHeight;
+        if (image && intrinsicWidth > 0 && intrinsicHeight > 0) {
+            const box = contentBox(container);
+            const path = calculatePaddingBoxPath(curves);
+            this.path(path);
+            this.ctx.save();
+            this.ctx.clip();
+            let sx = 0, sy = 0, sw = intrinsicWidth, sh = intrinsicHeight, dx = box.left, dy = box.top, dw = box.width, dh = box.height;
+            const { objectFit } = container.styles;
+            const boxRatio = dw / dh;
+            const imgRatio = sw / sh;
+            if (objectFit === 2 /* OBJECT_FIT.CONTAIN */) {
+                if (imgRatio > boxRatio) {
+                    dh = dw / imgRatio;
+                    dy += (box.height - dh) / 2;
+                }
+                else {
+                    dw = dh * imgRatio;
+                    dx += (box.width - dw) / 2;
+                }
+            }
+            else if (objectFit === 4 /* OBJECT_FIT.COVER */) {
+                if (imgRatio > boxRatio) {
+                    sw = sh * boxRatio;
+                    sx += (intrinsicWidth - sw) / 2;
+                }
+                else {
+                    sh = sw / boxRatio;
+                    sy += (intrinsicHeight - sh) / 2;
+                }
+            }
+            else if (objectFit === 8 /* OBJECT_FIT.NONE */) {
+                if (sw > dw) {
+                    sx += (sw - dw) / 2;
+                    sw = dw;
+                }
+                else {
+                    dx += (dw - sw) / 2;
+                    dw = sw;
+                }
+                if (sh > dh) {
+                    sy += (sh - dh) / 2;
+                    sh = dh;
+                }
+                else {
+                    dy += (dh - sh) / 2;
+                    dh = sh;
+                }
+            }
+            else if (objectFit === 16 /* OBJECT_FIT.SCALE_DOWN */) {
+                const containW = imgRatio > boxRatio ? dw : dh * imgRatio;
+                const noneW = sw > dw ? sw : dw;
+                if (containW < noneW) {
+                    if (imgRatio > boxRatio) {
+                        dh = dw / imgRatio;
+                        dy += (box.height - dh) / 2;
+                    }
+                    else {
+                        dw = dh * imgRatio;
+                        dx += (box.width - dw) / 2;
+                    }
+                }
+                else {
+                    if (sw > dw) {
+                        sx += (sw - dw) / 2;
+                        sw = dw;
+                    }
+                    else {
+                        dx += (dw - sw) / 2;
+                        dw = sw;
+                    }
+                    if (sh > dh) {
+                        sy += (sh - dh) / 2;
+                        sh = dh;
+                    }
+                    else {
+                        dy += (dh - sh) / 2;
+                        dh = sh;
+                    }
+                }
+            }
+            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
+            this.ctx.restore();
+        }
+    }
+    async renderNodeContent(paint) {
+        this.effectsRenderer.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
+        const container = paint.container;
+        const curves = paint.curves;
+        const styles = container.styles;
+        // Use content box for text overflow calculation (excludes padding and border)
+        // This matches browser behavior where text-overflow uses the content width
+        const textBounds = contentBox(container);
+        for (const child of container.textNodes) {
+            await this.textRenderer.renderTextNode(child, styles, textBounds);
+        }
+        if (container instanceof ImageElementContainer) {
+            try {
+                const image = await this.context.cache.match(container.src);
+                // Apply image smoothing based on CSS image-rendering property and global options
+                const prevSmoothing = this.ctx.imageSmoothingEnabled;
+                // CSS image-rendering property overrides global settings
+                if (styles.imageRendering === IMAGE_RENDERING.PIXELATED ||
+                    styles.imageRendering === IMAGE_RENDERING.CRISP_EDGES) {
+                    this.context.logger.debug(`Disabling image smoothing for ${container.src} due to CSS image-rendering: ${styles.imageRendering === IMAGE_RENDERING.PIXELATED ? 'pixelated' : 'crisp-edges'}`);
+                    this.ctx.imageSmoothingEnabled = false;
+                }
+                else if (styles.imageRendering === IMAGE_RENDERING.SMOOTH) {
+                    this.context.logger.debug(`Enabling image smoothing for ${container.src} due to CSS image-rendering: smooth`);
+                    this.ctx.imageSmoothingEnabled = true;
+                }
+                // IMAGE_RENDERING.AUTO: keep current global setting
+                this.renderReplacedElement(container, curves, image);
+                // Restore previous smoothing state
+                this.ctx.imageSmoothingEnabled = prevSmoothing;
+            }
+            catch (e) {
+                this.context.logger.error(`Error loading image ${container.src}`);
+            }
+        }
+        if (container instanceof CanvasElementContainer) {
+            this.renderReplacedElement(container, curves, container.canvas);
+        }
+        if (container instanceof SVGElementContainer) {
+            try {
+                const image = await this.context.cache.match(container.svg);
+                this.renderReplacedElement(container, curves, image);
+            }
+            catch (e) {
+                this.context.logger.error(`Error loading svg ${container.svg.substring(0, 255)}`);
+            }
+        }
+        if (container instanceof IFrameElementContainer && container.tree) {
+            const iframeRenderer = new CanvasRenderer(this.context, {
+                scale: this.options.scale,
+                backgroundColor: container.backgroundColor,
+                x: 0,
+                y: 0,
+                width: container.width,
+                height: container.height
+            });
+            const canvas = await iframeRenderer.render(container.tree);
+            if (container.width && container.height) {
+                this.ctx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height);
+            }
+        }
+        if (container instanceof InputElementContainer) {
+            const size = Math.min(container.bounds.width, container.bounds.height);
+            if (container.type === CHECKBOX) {
+                if (container.checked) {
+                    this.ctx.save();
+                    this.path([
+                        new Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
+                        new Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
+                        new Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
+                        new Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
+                        new Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
+                        new Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
+                        new Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
+                    ]);
+                    this.ctx.fillStyle = asString(INPUT_COLOR);
+                    this.ctx.fill();
+                    this.ctx.restore();
+                }
+            }
+            else if (container.type === RADIO) {
+                if (container.checked) {
+                    this.ctx.save();
+                    this.ctx.beginPath();
+                    this.ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
+                    this.ctx.fillStyle = asString(INPUT_COLOR);
+                    this.ctx.fill();
+                    this.ctx.restore();
+                }
+            }
+        }
+        if (isTextInputElement(container) && container.value.length) {
+            const [font, fontFamily, fontSize] = this.textRenderer.createFontStyle(styles);
+            const { baseline } = this.fontMetrics.getMetrics(fontFamily, fontSize);
+            this.ctx.font = font;
+            // Fix for Issue #92: Use placeholder color when rendering placeholder text
+            const isPlaceholder = container instanceof InputElementContainer && container.isPlaceholder;
+            this.ctx.fillStyle = isPlaceholder ? asString(PLACEHOLDER_COLOR) : asString(styles.color);
+            this.ctx.textBaseline = 'alphabetic';
+            this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
+            const bounds = contentBox(container);
+            let x = 0;
+            switch (container.styles.textAlign) {
+                case 1 /* TEXT_ALIGN.CENTER */:
+                    x += bounds.width / 2;
+                    break;
+                case 2 /* TEXT_ALIGN.RIGHT */:
+                    x += bounds.width;
+                    break;
+            }
+            // Fix for Issue #92: Position text vertically centered in single-line input
+            // Only apply vertical centering for InputElementContainer, not for textarea or select
+            let verticalOffset = 0;
+            if (container instanceof InputElementContainer) {
+                const fontSizeValue = getAbsoluteValue(styles.fontSize, 0);
+                verticalOffset = (bounds.height - fontSizeValue) / 2;
+            }
+            // Create text bounds with horizontal and vertical offsets
+            // Height is not modified as it doesn't affect text rendering position
+            const textBounds = bounds.add(x, verticalOffset, 0, 0);
+            this.ctx.save();
+            this.path([
+                new Vector(bounds.left, bounds.top),
+                new Vector(bounds.left + bounds.width, bounds.top),
+                new Vector(bounds.left + bounds.width, bounds.top + bounds.height),
+                new Vector(bounds.left, bounds.top + bounds.height)
+            ]);
+            this.ctx.clip();
+            this.textRenderer.renderTextWithLetterSpacing(new TextBounds(container.value, textBounds), styles.letterSpacing, baseline);
+            this.ctx.restore();
+            this.ctx.textBaseline = 'alphabetic';
+            this.ctx.textAlign = 'left';
         }
-        // Normal rendering (no ellipsis needed)
-        text.textBounds.forEach((text) => {
-            paintOrder.forEach((paintOrderLayer) => {
-                switch (paintOrderLayer) {
-                    case 0 /* PAINT_ORDER_LAYER.FILL */:
-                        this.ctx.fillStyle = asString(styles.color);
-                        this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
-                        const textShadows = styles.textShadow;
-                        if (textShadows.length && text.text.trim().length) {
-                            textShadows
-                                .slice(0)
-                                .reverse()
-                                .forEach((textShadow) => {
-                                this.ctx.shadowColor = asString(textShadow.color);
-                                this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
-                                this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-                                this.ctx.shadowBlur = textShadow.blur.number;
-                                this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
-                            });
-                            this.ctx.shadowColor = '';
-                            this.ctx.shadowOffsetX = 0;
-                            this.ctx.shadowOffsetY = 0;
-                            this.ctx.shadowBlur = 0;
-                        }
-                        if (styles.textDecorationLine.length) {
-                            this.renderTextDecoration(text.bounds, styles);
-                        }
-                        break;
-                    case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                        if (styles.webkitTextStrokeWidth && text.text.trim().length) {
-                            this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
-                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                            this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                            // Issue #110: Use baseline (fontSize) for consistent positioning with fill
-                            // Previously used text.bounds.height which caused stroke to render too low
-                            const baseline = styles.fontSize.number;
-                            if (styles.letterSpacing === 0) {
-                                this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
-                            }
-                            else {
-                                const letters = segmentGraphemes(text.text);
-                                letters.reduce((left, letter) => {
-                                    this.ctx.strokeText(letter, left, text.bounds.top + baseline);
-                                    return left + this.ctx.measureText(letter).width;
-                                }, text.bounds.left);
-                            }
-                        }
-                        this.ctx.strokeStyle = '';
-                        this.ctx.lineWidth = 0;
-                        this.ctx.lineJoin = 'miter';
-                        break;
+        if (contains(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) {
+            if (container.styles.listStyleImage !== null) {
+                const img = container.styles.listStyleImage;
+                if (img.type === 0 /* CSSImageType.URL */) {
+                    let image;
+                    const url = img.url;
+                    try {
+                        image = await this.context.cache.match(url);
+                        this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
+                    }
+                    catch (e) {
+                        this.context.logger.error(`Error loading list-style-image ${url}`);
+                    }
                 }
-            });
+            }
+            else if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
+                const [font] = this.textRenderer.createFontStyle(styles);
+                this.ctx.font = font;
+                this.ctx.fillStyle = asString(styles.color);
+                this.ctx.textBaseline = 'middle';
+                this.ctx.textAlign = 'right';
+                const bounds = new Bounds(container.bounds.left, container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width), container.bounds.width, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1);
+                this.textRenderer.renderTextWithLetterSpacing(new TextBounds(paint.listValue, bounds), styles.letterSpacing, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2);
+                this.ctx.textBaseline = 'bottom';
+                this.ctx.textAlign = 'left';
+            }
+        }
+    }
+    async renderStackContent(stack) {
+        if (contains(stack.element.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
+            debugger;
+        }
+        // https://www.w3.org/TR/css-position-3/#painting-order
+        // 1. the background and borders of the element forming the stacking context.
+        await this.renderNodeBackgroundAndBorders(stack.element);
+        // 2. the child stacking contexts with negative stack levels (most negative first).
+        for (const child of stack.negativeZIndex) {
+            await this.renderStack(child);
+        }
+        // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
+        await this.renderNodeContent(stack.element);
+        for (const child of stack.nonInlineLevel) {
+            await this.renderNode(child);
+        }
+        // 4. All non-positioned floating descendants, in tree order. For each one of these,
+        // treat the element as if it created a new stacking context, but any positioned descendants and descendants
+        // which actually create a new stacking context should be considered part of the parent stacking context,
+        // not this new one.
+        for (const child of stack.nonPositionedFloats) {
+            await this.renderStack(child);
+        }
+        // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
+        for (const child of stack.nonPositionedInlineLevel) {
+            await this.renderStack(child);
+        }
+        for (const child of stack.inlineLevel) {
+            await this.renderNode(child);
+        }
+        // 6. All positioned, opacity or transform descendants, in tree order that fall into the following categories:
+        //  All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
+        //  For those with 'z-index: auto', treat the element as if it created a new stacking context,
+        //  but any positioned descendants and descendants which actually create a new stacking context should be
+        //  considered part of the parent stacking context, not this new one. For those with 'z-index: 0',
+        //  treat the stacking context generated atomically.
+        //
+        //  All opacity descendants with opacity less than 1
+        //
+        //  All transform descendants with transform other than none
+        for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {
+            await this.renderStack(child);
+        }
+        // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index
+        // order (smallest first) then tree order.
+        for (const child of stack.positiveZIndex) {
+            await this.renderStack(child);
+        }
+    }
+    mask(paths) {
+        this.ctx.beginPath();
+        this.ctx.moveTo(0, 0);
+        // Use logical dimensions (options.width/height) instead of canvas pixel dimensions
+        // because context has already been scaled by this.options.scale
+        // Fix for Issue #126: Using canvas pixel dimensions causes broken output
+        this.ctx.lineTo(this.options.width, 0);
+        this.ctx.lineTo(this.options.width, this.options.height);
+        this.ctx.lineTo(0, this.options.height);
+        this.ctx.lineTo(0, 0);
+        this.formatPath(paths.slice(0).reverse());
+        this.ctx.closePath();
+    }
+    path(paths) {
+        this.ctx.beginPath();
+        this.formatPath(paths);
+        this.ctx.closePath();
+    }
+    formatPath(paths) {
+        paths.forEach((point, index) => {
+            const start = isBezierCurve(point) ? point.start : point;
+            if (index === 0) {
+                this.ctx.moveTo(start.x, start.y);
+            }
+            else {
+                this.ctx.lineTo(start.x, start.y);
+            }
+            if (isBezierCurve(point)) {
+                this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
+            }
         });
     }
-    renderReplacedElement(container, curves, image) {
-        const intrinsicWidth = image.naturalWidth || container.intrinsicWidth;
-        const intrinsicHeight = image.naturalHeight || container.intrinsicHeight;
-        if (image && intrinsicWidth > 0 && intrinsicHeight > 0) {
-            const box = contentBox(container);
-            const path = calculatePaddingBoxPath(curves);
-            this.path(path);
+    async renderNodeBackgroundAndBorders(paint) {
+        this.effectsRenderer.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
+        const styles = paint.container.styles;
+        const hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
+        const borders = [
+            { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth },
+            { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth },
+            { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth },
+            { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth }
+        ];
+        const backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(getBackgroundValueForIndex(styles.backgroundClip, 0), paint.curves);
+        if (hasBackground || styles.boxShadow.length) {
             this.ctx.save();
+            this.path(backgroundPaintingArea);
             this.ctx.clip();
-            let sx = 0, sy = 0, sw = intrinsicWidth, sh = intrinsicHeight, dx = box.left, dy = box.top, dw = box.width, dh = box.height;
-            const { objectFit } = container.styles;
-            const boxRatio = dw / dh;
-            const imgRatio = sw / sh;
-            if (objectFit === 2 /* OBJECT_FIT.CONTAIN */) {
-                if (imgRatio > boxRatio) {
-                    dh = dw / imgRatio;
-                    dy += (box.height - dh) / 2;
-                }
-                else {
-                    dw = dh * imgRatio;
-                    dx += (box.width - dw) / 2;
-                }
-            }
-            else if (objectFit === 4 /* OBJECT_FIT.COVER */) {
-                if (imgRatio > boxRatio) {
-                    sw = sh * boxRatio;
-                    sx += (intrinsicWidth - sw) / 2;
-                }
-                else {
-                    sh = sw / boxRatio;
-                    sy += (intrinsicHeight - sh) / 2;
-                }
+            if (!isTransparent(styles.backgroundColor)) {
+                this.ctx.fillStyle = asString(styles.backgroundColor);
+                this.ctx.fill();
             }
-            else if (objectFit === 8 /* OBJECT_FIT.NONE */) {
-                if (sw > dw) {
-                    sx += (sw - dw) / 2;
-                    sw = dw;
+            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 : 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 {
-                    dx += (dw - sw) / 2;
-                    dw = sw;
+                    this.mask(borderBoxArea);
+                    this.ctx.clip();
+                    this.path(shadowPaintingArea);
                 }
-                if (sh > dh) {
-                    sy += (sh - dh) / 2;
-                    sh = dh;
+                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();
+            });
+        }
+        let side = 0;
+        for (const border of borders) {
+            if (border.style !== 0 /* BORDER_STYLE.NONE */ && !isTransparent(border.color) && border.width > 0) {
+                if (border.style === 2 /* BORDER_STYLE.DASHED */) {
+                    await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */);
                 }
-                else {
-                    dy += (dh - sh) / 2;
-                    dh = sh;
+                else if (border.style === 3 /* BORDER_STYLE.DOTTED */) {
+                    await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */);
                 }
-            }
-            else if (objectFit === 16 /* OBJECT_FIT.SCALE_DOWN */) {
-                const containW = imgRatio > boxRatio ? dw : dh * imgRatio;
-                const noneW = sw > dw ? sw : dw;
-                if (containW < noneW) {
-                    if (imgRatio > boxRatio) {
-                        dh = dw / imgRatio;
-                        dy += (box.height - dh) / 2;
-                    }
-                    else {
-                        dw = dh * imgRatio;
-                        dx += (box.width - dw) / 2;
-                    }
+                else if (border.style === 4 /* BORDER_STYLE.DOUBLE */) {
+                    await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
                 }
                 else {
-                    if (sw > dw) {
-                        sx += (sw - dw) / 2;
-                        sw = dw;
-                    }
-                    else {
-                        dx += (dw - sw) / 2;
-                        dw = sw;
-                    }
-                    if (sh > dh) {
-                        sy += (sh - dh) / 2;
-                        sh = dh;
-                    }
-                    else {
-                        dy += (dh - sh) / 2;
-                        dh = sh;
-                    }
+                    await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
                 }
             }
-            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
-            this.ctx.restore();
+            side++;
         }
     }
-    async renderNodeContent(paint) {
-        this.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
-        const container = paint.container;
-        const curves = paint.curves;
-        const styles = container.styles;
-        // Use content box for text overflow calculation (excludes padding and border)
-        // This matches browser behavior where text-overflow uses the content width
-        const textBounds = contentBox(container);
-        for (const child of container.textNodes) {
-            await this.renderTextNode(child, styles, textBounds);
-        }
-        if (container instanceof ImageElementContainer) {
-            try {
-                const image = await this.context.cache.match(container.src);
-                this.renderReplacedElement(container, curves, image);
-            }
-            catch (e) {
-                this.context.logger.error(`Error loading image ${container.src}`);
-            }
-        }
-        if (container instanceof CanvasElementContainer) {
-            this.renderReplacedElement(container, curves, container.canvas);
-        }
-        if (container instanceof SVGElementContainer) {
-            try {
-                const image = await this.context.cache.match(container.svg);
-                this.renderReplacedElement(container, curves, image);
-            }
-            catch (e) {
-                this.context.logger.error(`Error loading svg ${container.svg.substring(0, 255)}`);
-            }
-        }
-        if (container instanceof IFrameElementContainer && container.tree) {
-            const iframeRenderer = new CanvasRenderer(this.context, {
-                scale: this.options.scale,
-                backgroundColor: container.backgroundColor,
-                x: 0,
-                y: 0,
-                width: container.width,
-                height: container.height
-            });
-            const canvas = await iframeRenderer.render(container.tree);
-            if (container.width && container.height) {
-                this.ctx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height);
-            }
+    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);
         }
-        if (container instanceof InputElementContainer) {
-            const size = Math.min(container.bounds.width, container.bounds.height);
-            if (container.type === CHECKBOX) {
-                if (container.checked) {
-                    this.ctx.save();
-                    this.path([
-                        new Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
-                        new Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
-                        new Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
-                        new Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
-                        new Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
-                        new Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
-                        new Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
-                    ]);
-                    this.ctx.fillStyle = asString(INPUT_COLOR);
-                    this.ctx.fill();
-                    this.ctx.restore();
-                }
-            }
-            else if (container.type === RADIO) {
-                if (container.checked) {
-                    this.ctx.save();
-                    this.ctx.beginPath();
-                    this.ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
-                    this.ctx.fillStyle = asString(INPUT_COLOR);
-                    this.ctx.fill();
-                    this.ctx.restore();
-                }
-            }
+        const stack = parseStackingContexts(element);
+        await this.renderStack(stack);
+        this.effectsRenderer.applyEffects([]);
+        return this.canvas;
+    }
+}
+const isTextInputElement = (container) => {
+    if (container instanceof TextareaElementContainer) {
+        return true;
+    }
+    else if (container instanceof SelectElementContainer) {
+        return true;
+    }
+    else if (container instanceof InputElementContainer && container.type !== RADIO && container.type !== CHECKBOX) {
+        return true;
+    }
+    return false;
+};
+const calculateBackgroundCurvedPaintingArea = (clip, curves) => {
+    switch (clip) {
+        case 0 /* BACKGROUND_CLIP.BORDER_BOX */:
+            return calculateBorderBoxPath(curves);
+        case 2 /* BACKGROUND_CLIP.CONTENT_BOX */:
+            return calculateContentBoxPath(curves);
+        case 1 /* BACKGROUND_CLIP.PADDING_BOX */:
+        default:
+            return calculatePaddingBoxPath(curves);
+    }
+};
+const canvasTextAlign = (textAlign) => {
+    switch (textAlign) {
+        case 1 /* TEXT_ALIGN.CENTER */:
+            return 'center';
+        case 2 /* TEXT_ALIGN.RIGHT */:
+            return 'right';
+        case 0 /* TEXT_ALIGN.LEFT */:
+        default:
+            return 'left';
+    }
+};
+
+class ForeignObjectRenderer extends Renderer {
+    constructor(context, options) {
+        super(context, options);
+        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.options = options;
+        this.canvas.width = Math.floor(options.width * options.scale);
+        this.canvas.height = Math.floor(options.height * options.scale);
+        this.canvas.style.width = `${options.width}px`;
+        this.canvas.style.height = `${options.height}px`;
+        this.ctx.scale(this.options.scale, this.options.scale);
+        this.ctx.translate(-options.x, -options.y);
+        this.context.logger.debug(`EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`);
+    }
+    async render(element) {
+        const svg = createForeignObjectSVG(this.options.width * this.options.scale, this.options.height * this.options.scale, this.options.scale, this.options.scale, element);
+        const img = await loadSerializedSVG(svg);
+        if (this.options.backgroundColor) {
+            this.ctx.fillStyle = asString(this.options.backgroundColor);
+            this.ctx.fillRect(0, 0, this.options.width * this.options.scale, this.options.height * this.options.scale);
         }
-        if (isTextInputElement(container) && container.value.length) {
-            const [font, fontFamily, fontSize] = this.createFontStyle(styles);
-            const { baseline } = this.fontMetrics.getMetrics(fontFamily, fontSize);
-            this.ctx.font = font;
-            // Fix for Issue #92: Use placeholder color when rendering placeholder text
-            const isPlaceholder = container instanceof InputElementContainer && container.isPlaceholder;
-            this.ctx.fillStyle = isPlaceholder ? asString(PLACEHOLDER_COLOR) : asString(styles.color);
-            this.ctx.textBaseline = 'alphabetic';
-            this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
-            const bounds = contentBox(container);
-            let x = 0;
-            switch (container.styles.textAlign) {
-                case 1 /* TEXT_ALIGN.CENTER */:
-                    x += bounds.width / 2;
-                    break;
-                case 2 /* TEXT_ALIGN.RIGHT */:
-                    x += bounds.width;
-                    break;
+        this.ctx.drawImage(img, -this.options.x * this.options.scale, -this.options.y * this.options.scale);
+        return this.canvas;
+    }
+}
+const loadSerializedSVG = (svg) => new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+        resolve(img);
+    };
+    img.onerror = reject;
+    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
+});
+
+class Logger {
+    constructor({ id, enabled }) {
+        this.id = id;
+        this.enabled = enabled;
+        this.start = Date.now();
+    }
+    debug(...args) {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
+                // eslint-disable-next-line no-console
+                console.debug(this.id, `${this.getTime()}ms`, ...args);
             }
-            // Fix for Issue #92: Position text vertically centered in single-line input
-            // Only apply vertical centering for InputElementContainer, not for textarea or select
-            let verticalOffset = 0;
-            if (container instanceof InputElementContainer) {
-                const fontSizeValue = getAbsoluteValue(styles.fontSize, 0);
-                verticalOffset = (bounds.height - fontSizeValue) / 2;
+            else {
+                this.info(...args);
             }
-            // Create text bounds with horizontal and vertical offsets
-            // Height is not modified as it doesn't affect text rendering position
-            const textBounds = bounds.add(x, verticalOffset, 0, 0);
-            this.ctx.save();
-            this.path([
-                new Vector(bounds.left, bounds.top),
-                new Vector(bounds.left + bounds.width, bounds.top),
-                new Vector(bounds.left + bounds.width, bounds.top + bounds.height),
-                new Vector(bounds.left, bounds.top + bounds.height)
-            ]);
-            this.ctx.clip();
-            this.renderTextWithLetterSpacing(new TextBounds(container.value, textBounds), styles.letterSpacing, baseline);
-            this.ctx.restore();
-            this.ctx.textBaseline = 'alphabetic';
-            this.ctx.textAlign = 'left';
         }
-        if (contains(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) {
-            if (container.styles.listStyleImage !== null) {
-                const img = container.styles.listStyleImage;
-                if (img.type === 0 /* CSSImageType.URL */) {
-                    let image;
-                    const url = img.url;
-                    try {
-                        image = await this.context.cache.match(url);
-                        this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
-                    }
-                    catch (e) {
-                        this.context.logger.error(`Error loading list-style-image ${url}`);
-                    }
-                }
+    }
+    getTime() {
+        return Date.now() - this.start;
+    }
+    info(...args) {
+        if (this.enabled) {
+            // eslint-disable-next-line no-console
+            if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
+                // eslint-disable-next-line no-console
+                console.info(this.id, `${this.getTime()}ms`, ...args);
             }
-            else if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
-                const [font] = this.createFontStyle(styles);
-                this.ctx.font = font;
-                this.ctx.fillStyle = asString(styles.color);
-                this.ctx.textBaseline = 'middle';
-                this.ctx.textAlign = 'right';
-                const bounds = new Bounds(container.bounds.left, container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width), container.bounds.width, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1);
-                this.renderTextWithLetterSpacing(new TextBounds(paint.listValue, bounds), styles.letterSpacing, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2);
-                this.ctx.textBaseline = 'bottom';
-                this.ctx.textAlign = 'left';
+        }
+    }
+    warn(...args) {
+        if (this.enabled) {
+            if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
+                console.warn(this.id, `${this.getTime()}ms`, ...args);
+            }
+            else {
+                this.info(...args);
             }
         }
     }
-    async renderStackContent(stack) {
-        if (contains(stack.element.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
-            debugger;
+    error(...args) {
+        if (this.enabled) {
+            if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
+                console.error(this.id, `${this.getTime()}ms`, ...args);
+            }
+            else {
+                this.info(...args);
+            }
         }
-        // https://www.w3.org/TR/css-position-3/#painting-order
-        // 1. the background and borders of the element forming the stacking context.
-        await this.renderNodeBackgroundAndBorders(stack.element);
-        // 2. the child stacking contexts with negative stack levels (most negative first).
-        for (const child of stack.negativeZIndex) {
-            await this.renderStack(child);
+    }
+}
+Logger.instances = {};
+
+class Cache {
+    constructor(context, _options) {
+        this.context = context;
+        this._options = _options;
+        this._cache = new Map();
+        this._pendingOperations = new Map();
+        // Default cache size: 100 items
+        this.maxSize = _options.maxCacheSize ?? 100;
+        if (this.maxSize < 1) {
+            throw new Error('Cache maxSize must be at least 1');
         }
-        // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
-        await this.renderNodeContent(stack.element);
-        for (const child of stack.nonInlineLevel) {
-            await this.renderNode(child);
+        if (this.maxSize > 10000) {
+            this.context.logger.warn(`Cache maxSize ${this.maxSize} is very large and may cause memory issues. ` +
+                `Consider using a smaller value (recommended: 100-1000).`);
         }
-        // 4. All non-positioned floating descendants, in tree order. For each one of these,
-        // treat the element as if it created a new stacking context, but any positioned descendants and descendants
-        // which actually create a new stacking context should be considered part of the parent stacking context,
-        // not this new one.
-        for (const child of stack.nonPositionedFloats) {
-            await this.renderStack(child);
+    }
+    addImage(src) {
+        // Wait for any pending operations on this key
+        const pending = this._pendingOperations.get(src);
+        if (pending) {
+            return pending;
         }
-        // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
-        for (const child of stack.nonPositionedInlineLevel) {
-            await this.renderStack(child);
+        if (this.has(src)) {
+            // Update last accessed time
+            const entry = this._cache.get(src);
+            if (entry) {
+                entry.lastAccessed = Date.now();
+            }
+            return Promise.resolve();
         }
-        for (const child of stack.inlineLevel) {
-            await this.renderNode(child);
+        if (isBlobImage(src) || isRenderable(src)) {
+            // Create a pending operation to ensure atomicity
+            const operation = this._addImageInternal(src);
+            this._pendingOperations.set(src, operation);
+            operation.finally(() => {
+                this._pendingOperations.delete(src);
+            });
+            return operation;
         }
-        // 6. All positioned, opacity or transform descendants, in tree order that fall into the following categories:
-        //  All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
-        //  For those with 'z-index: auto', treat the element as if it created a new stacking context,
-        //  but any positioned descendants and descendants which actually create a new stacking context should be
-        //  considered part of the parent stacking context, not this new one. For those with 'z-index: 0',
-        //  treat the stacking context generated atomically.
-        //
-        //  All opacity descendants with opacity less than 1
-        //
-        //  All transform descendants with transform other than none
-        for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {
-            await this.renderStack(child);
+        return Promise.resolve();
+    }
+    async _addImageInternal(src) {
+        // Create image load promise with timeout protection
+        const timeoutMs = this._options.imageTimeout ?? 15000;
+        const timeoutPromise = new Promise((_, reject) => {
+            setTimeout(() => {
+                reject(new Error(`Image load timeout after ${timeoutMs}ms: ${src}`));
+            }, timeoutMs);
+        });
+        // Race between image load and timeout
+        const imageWithTimeout = Promise.race([this.loadImage(src), timeoutPromise]);
+        // Handle errors to prevent unhandled rejections
+        imageWithTimeout.catch((error) => {
+            this.context.logger.error(`Failed to load image ${src}: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        });
+        // Store the promise with timeout in cache
+        this.set(src, imageWithTimeout);
+    }
+    match(src) {
+        const entry = this._cache.get(src);
+        if (entry) {
+            // Update last accessed time on access
+            entry.lastAccessed = Date.now();
+            return entry.value;
         }
-        // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index
-        // order (smallest first) then tree order.
-        for (const child of stack.positiveZIndex) {
-            await this.renderStack(child);
+        return undefined;
+    }
+    /**
+     * Set a value in cache with LRU eviction
+     */
+    set(key, value) {
+        // If key already exists, update it without eviction
+        if (this._cache.has(key)) {
+            const entry = this._cache.get(key);
+            entry.value = value;
+            entry.lastAccessed = Date.now();
+            return;
+        }
+        // For new keys, check if we need to evict
+        if (this._cache.size >= this.maxSize) {
+            this.evictLRU();
         }
+        this._cache.set(key, {
+            value,
+            lastAccessed: Date.now()
+        });
     }
-    mask(paths) {
-        this.ctx.beginPath();
-        this.ctx.moveTo(0, 0);
-        // Use logical dimensions (options.width/height) instead of canvas pixel dimensions
-        // because context has already been scaled by this.options.scale
-        // Fix for Issue #126: Using canvas pixel dimensions causes broken output
-        this.ctx.lineTo(this.options.width, 0);
-        this.ctx.lineTo(this.options.width, this.options.height);
-        this.ctx.lineTo(0, this.options.height);
-        this.ctx.lineTo(0, 0);
-        this.formatPath(paths.slice(0).reverse());
-        this.ctx.closePath();
+    /**
+     * Evict least recently used entry
+     */
+    evictLRU() {
+        let oldestKey = null;
+        let oldestTime = Infinity;
+        for (const [key, entry] of this._cache.entries()) {
+            if (entry.lastAccessed < oldestTime) {
+                oldestTime = entry.lastAccessed;
+                oldestKey = key;
+            }
+        }
+        if (oldestKey) {
+            this._cache.delete(oldestKey);
+            this.context.logger.debug(`Cache: Evicted LRU entry: ${oldestKey}`);
+        }
     }
-    path(paths) {
-        this.ctx.beginPath();
-        this.formatPath(paths);
-        this.ctx.closePath();
+    /**
+     * Get cache size
+     */
+    size() {
+        return this._cache.size;
     }
-    formatPath(paths) {
-        paths.forEach((point, index) => {
-            const start = isBezierCurve(point) ? point.start : point;
-            if (index === 0) {
-                this.ctx.moveTo(start.x, start.y);
+    /**
+     * Get max cache size
+     */
+    getMaxSize() {
+        return this.maxSize;
+    }
+    /**
+     * Clear all cache entries
+     */
+    clear() {
+        this._cache.clear();
+    }
+    async loadImage(key) {
+        const originChecker = this.context.originChecker;
+        const defaultIsSameOrigin = (src) => originChecker.isSameOrigin(src);
+        const isSameOrigin = typeof this._options.customIsSameOrigin === 'function'
+            ? await this._options.customIsSameOrigin(key, defaultIsSameOrigin)
+            : defaultIsSameOrigin(key);
+        const useCORS = !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin;
+        const useProxy = !isInlineImage(key) &&
+            !isSameOrigin &&
+            !isBlobImage(key) &&
+            typeof this._options.proxy === 'string' &&
+            FEATURES.SUPPORT_CORS_XHR &&
+            !useCORS;
+        if (!isSameOrigin &&
+            this._options.allowTaint === false &&
+            !isInlineImage(key) &&
+            !isBlobImage(key) &&
+            !useProxy &&
+            !useCORS) {
+            return;
+        }
+        let src = key;
+        if (useProxy) {
+            src = await this.proxy(src);
+        }
+        this.context.logger.debug(`Added image ${key.substring(0, 256)}`);
+        return await new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous
+            if (isInlineBase64Image(src) || useCORS) {
+                img.crossOrigin = 'anonymous';
             }
-            else {
-                this.ctx.lineTo(start.x, start.y);
+            img.src = src;
+            if (img.complete === true) {
+                // Inline XML images may fail to parse, throwing an Error later on
+                setTimeout(() => resolve(img), 500);
             }
-            if (isBezierCurve(point)) {
-                this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
+            if (this._options.imageTimeout > 0) {
+                setTimeout(() => reject(`Timed out (${this._options.imageTimeout}ms) loading image`), this._options.imageTimeout);
+            }
+        });
+    }
+    has(key) {
+        return this._cache.has(key);
+    }
+    keys() {
+        return Promise.resolve(Object.keys(this._cache));
+    }
+    proxy(src) {
+        const proxy = this._options.proxy;
+        if (!proxy) {
+            throw new Error('No proxy defined');
+        }
+        const key = src.substring(0, 256);
+        return new Promise((resolve, reject) => {
+            const responseType = FEATURES.SUPPORT_RESPONSE_TYPE ? 'blob' : 'text';
+            const xhr = new XMLHttpRequest();
+            xhr.onload = () => {
+                if (xhr.status === 200) {
+                    if (responseType === 'text') {
+                        resolve(xhr.response);
+                    }
+                    else {
+                        const reader = new FileReader();
+                        reader.addEventListener('load', () => resolve(reader.result), false);
+                        reader.addEventListener('error', (e) => reject(e), false);
+                        reader.readAsDataURL(xhr.response);
+                    }
+                }
+                else {
+                    reject(`Failed to proxy resource ${key} with status code ${xhr.status}`);
+                }
+            };
+            xhr.onerror = reject;
+            const queryString = proxy.indexOf('?') > -1 ? '&' : '?';
+            xhr.open('GET', `${proxy}${queryString}url=${encodeURIComponent(src)}&responseType=${responseType}`);
+            if (responseType !== 'text' && xhr instanceof XMLHttpRequest) {
+                xhr.responseType = responseType;
+            }
+            if (this._options.imageTimeout) {
+                const timeout = this._options.imageTimeout;
+                xhr.timeout = timeout;
+                xhr.ontimeout = () => reject(`Timed out (${timeout}ms) proxying ${key}`);
             }
+            xhr.send();
+        });
+    }
+}
+const INLINE_SVG = /^data:image\/svg\+xml/i;
+const INLINE_BASE64 = /^data:image\/.*;base64,/i;
+const INLINE_IMG = /^data:image\/.*/i;
+const isRenderable = (src) => FEATURES.SUPPORT_SVG_DRAWING || !isSVG(src);
+const isInlineImage = (src) => INLINE_IMG.test(src);
+const isInlineBase64Image = (src) => INLINE_BASE64.test(src);
+const isBlobImage = (src) => src.substr(0, 4) === 'blob';
+const isSVG = (src) => src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src);
+
+/**
+ * Origin Checker
+ *
+ * Provides origin checking functionality without global static state.
+ * Each instance maintains its own anchor element and origin reference.
+ *
+ * Replaces the static methods in CacheStorage with instance-based approach.
+ */
+class OriginChecker {
+    constructor(window) {
+        if (!window || !window.document) {
+            throw new Error('Valid window object required for OriginChecker');
+        }
+        if (!window.location || !window.location.href) {
+            throw new Error('Window object must have valid location');
+        }
+        this.link = window.document.createElement('a');
+        this.origin = this.getOrigin(window.location.href);
+    }
+    /**
+     * Get the origin (protocol + hostname + port) of a URL
+     *
+     * @param url - URL to parse
+     * @returns Origin string (e.g., "https://example.com:8080")
+     */
+    getOrigin(url) {
+        this.link.href = url;
+        // IE9 hack: accessing href twice to ensure it's properly parsed
+        this.link.href = this.link.href;
+        return this.link.protocol + this.link.hostname + this.link.port;
+    }
+    /**
+     * Check if a URL is from the same origin as the context
+     *
+     * @param src - URL to check
+     * @returns true if same origin, false otherwise
+     */
+    isSameOrigin(src) {
+        return this.getOrigin(src) === this.origin;
+    }
+    /**
+     * Get the current context origin
+     *
+     * @returns The origin of the context window
+     */
+    getContextOrigin() {
+        return this.origin;
+    }
+}
+
+class Context {
+    constructor(options, windowBounds, config) {
+        this.windowBounds = windowBounds;
+        this.instanceName = `#${Context.instanceCount++}`;
+        this.config = config;
+        this.logger = new Logger({ id: this.instanceName, enabled: options.logging });
+        this.originChecker = new OriginChecker(config.window);
+        this.cache = options.cache ?? config.cache ?? new Cache(this, options);
+    }
+}
+Context.instanceCount = 1;
+
+/**
+ * Html2Canvas Configuration
+ *
+ * Manages configuration state for html2canvas rendering.
+ * Eliminates the need for global static variables.
+ */
+class Html2CanvasConfig {
+    constructor(options = {}) {
+        // Try to get window from options first, then fall back to global window
+        this.window = options.window || (typeof window !== 'undefined' ? window : null);
+        if (!this.window) {
+            throw new Error('Window object is required but not available');
+        }
+        this.cspNonce = options.cspNonce;
+        this.cache = options.cache;
+    }
+    /**
+     * Create configuration from an element
+     * Extracts window from element's owner document
+     */
+    static fromElement(element, options = {}) {
+        const ownerDocument = element.ownerDocument;
+        if (!ownerDocument) {
+            throw new Error('Element is not attached to a document');
+        }
+        const defaultView = ownerDocument.defaultView;
+        if (!defaultView) {
+            throw new Error('Document is not attached to a window');
+        }
+        return new Html2CanvasConfig({
+            window: defaultView,
+            ...options
         });
     }
-    renderRepeat(path, pattern, offsetX, offsetY) {
-        this.path(path);
-        this.ctx.fillStyle = pattern;
-        this.ctx.translate(offsetX, offsetY);
-        this.ctx.fill();
-        this.ctx.translate(-offsetX, -offsetY);
+    /**
+     * Clone configuration with override options
+     */
+    clone(options = {}) {
+        return new Html2CanvasConfig({
+            window: options.window || this.window,
+            cspNonce: options.cspNonce ?? this.cspNonce,
+            cache: options.cache ?? this.cache
+        });
     }
-    resizeImage(image, width, height) {
-        // https://github.com/niklasvh/html2canvas/pull/2911
-        // if (image.width === width && image.height === height) {
-        //     return image;
-        // }
-        const ownerDocument = this.canvas.ownerDocument ?? document;
-        const canvas = ownerDocument.createElement('canvas');
-        canvas.width = Math.max(1, width);
-        canvas.height = Math.max(1, height);
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
-        return canvas;
+}
+/**
+ * Set default configuration
+ * @deprecated Pass configuration directly to html2canvas instead
+ */
+function setDefaultConfig(config) {
+    console.warn('[html2canvas-pro] setDefaultConfig is deprecated. Pass configuration to html2canvas directly.');
+}
+
+/**
+ * Input Validator
+ *
+ * Provides validation and sanitization for user inputs to prevent security vulnerabilities
+ * including SSRF, XSS, and injection attacks.
+ */
+/**
+ * Input Validator
+ *
+ * Validates and sanitizes user inputs for security and correctness.
+ */
+class Validator {
+    constructor(config = {}) {
+        this.config = {
+            maxImageTimeout: 300000, // 5 minutes default
+            allowDataUrls: true,
+            ...config
+        };
     }
-    async renderBackgroundImage(container) {
-        let index = container.styles.backgroundImage.length - 1;
-        for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
-            if (backgroundImage.type === 0 /* CSSImageType.URL */) {
-                let image;
-                const url = backgroundImage.url;
-                try {
-                    image = await this.context.cache.match(url);
-                }
-                catch (e) {
-                    this.context.logger.error(`Error loading background-image ${url}`);
-                }
-                if (image) {
-                    const imageWidth = isNaN(image.width) || image.width === 0 ? 1 : image.width;
-                    const imageHeight = isNaN(image.height) || image.height === 0 ? 1 : image.height;
-                    const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [
-                        imageWidth,
-                        imageHeight,
-                        imageWidth / imageHeight
-                    ]);
-                    const pattern = this.ctx.createPattern(this.resizeImage(image, width, height), 'repeat');
-                    this.renderRepeat(path, pattern, x, y);
-                }
+    /**
+     * Validate a URL
+     *
+     * @param url - URL to validate
+     * @param context - Context for validation (e.g., 'proxy', 'image')
+     * @returns Validation result
+     */
+    validateUrl(url, context = 'general') {
+        if (!url || typeof url !== 'string') {
+            return {
+                valid: false,
+                error: 'URL must be a non-empty string'
+            };
+        }
+        // Check for data URLs
+        if (url.startsWith('data:')) {
+            if (!this.config.allowDataUrls) {
+                return {
+                    valid: false,
+                    error: 'Data URLs are not allowed'
+                };
             }
-            else if (isLinearGradient(backgroundImage)) {
-                const [path, x, y, width, height] = calculateBackgroundRendering(container, index, [null, null, null]);
-                const [lineLength, x0, x1, y0, y1] = calculateGradientDirection(backgroundImage.angle, width, height);
-                const canvas = document.createElement('canvas');
-                canvas.width = width;
-                canvas.height = height;
-                const ctx = canvas.getContext('2d');
-                const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-                processColorStops(backgroundImage.stops, lineLength || 1).forEach((colorStop) => gradient.addColorStop(colorStop.stop, asString(colorStop.color)));
-                ctx.fillStyle = gradient;
-                ctx.fillRect(0, 0, width, height);
-                if (width > 0 && height > 0) {
-                    const pattern = this.ctx.createPattern(canvas, 'repeat');
-                    this.renderRepeat(path, pattern, x, y);
+            return { valid: true, sanitized: url };
+        }
+        // Check for blob URLs
+        if (url.startsWith('blob:')) {
+            return { valid: true, sanitized: url };
+        }
+        // Validate URL format
+        try {
+            const parsedUrl = new URL(url);
+            // Only allow http and https protocols
+            if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
+                return {
+                    valid: false,
+                    error: `Protocol ${parsedUrl.protocol} is not allowed. Only http and https are permitted.`
+                };
+            }
+            // For proxy URLs, check domain whitelist
+            if (context === 'proxy' && this.config.allowedProxyDomains && this.config.allowedProxyDomains.length > 0) {
+                const hostname = parsedUrl.hostname.toLowerCase();
+                const isAllowed = this.config.allowedProxyDomains.some((domain) => {
+                    const normalizedDomain = domain.toLowerCase();
+                    return hostname === normalizedDomain || hostname.endsWith('.' + normalizedDomain);
+                });
+                if (!isAllowed) {
+                    return {
+                        valid: false,
+                        error: `Proxy domain ${parsedUrl.hostname} is not in the allowed list`
+                    };
                 }
             }
-            else if (isRadialGradient(backgroundImage)) {
-                const [path, left, top, width, height] = calculateBackgroundRendering(container, index, [
-                    null,
-                    null,
-                    null
-                ]);
-                const position = backgroundImage.position.length === 0 ? [FIFTY_PERCENT] : backgroundImage.position;
-                const x = getAbsoluteValue(position[0], width);
-                const y = getAbsoluteValue(position[position.length - 1], height);
-                let [rx, ry] = calculateRadius(backgroundImage, x, y, width, height);
-                // Handle edge case where radial gradient size is 0
-                // Use a minimum value of 0.01 to ensure gradient is still rendered
-                if (rx === 0 || ry === 0) {
-                    rx = Math.max(rx, 0.01);
-                    ry = Math.max(ry, 0.01);
-                }
-                if (rx > 0 && ry > 0) {
-                    const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
-                    processColorStops(backgroundImage.stops, rx * 2).forEach((colorStop) => radialGradient.addColorStop(colorStop.stop, asString(colorStop.color)));
-                    this.path(path);
-                    this.ctx.fillStyle = radialGradient;
-                    if (rx !== ry) {
-                        // transforms for elliptical radial gradient
-                        const midX = container.bounds.left + 0.5 * container.bounds.width;
-                        const midY = container.bounds.top + 0.5 * container.bounds.height;
-                        const f = ry / rx;
-                        const invF = 1 / f;
-                        this.ctx.save();
-                        this.ctx.translate(midX, midY);
-                        this.ctx.transform(1, 0, 0, f, 0, 0);
-                        this.ctx.translate(-midX, -midY);
-                        this.ctx.fillRect(left, invF * (top - midY) + midY, width, height * invF);
-                        this.ctx.restore();
+            // Check for localhost/private IPs to prevent SSRF (skip when allowLocalhostProxy for dev/test)
+            if (context === 'proxy') {
+                if (!this.config.allowLocalhostProxy) {
+                    const hostname = parsedUrl.hostname.toLowerCase();
+                    // Check for localhost
+                    if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1') {
+                        return {
+                            valid: false,
+                            error: 'Localhost is not allowed for proxy URLs'
+                        };
                     }
-                    else {
-                        this.ctx.fill();
+                    // For private IP ranges (simplified check)
+                    if (this.isPrivateIP(hostname)) {
+                        return {
+                            valid: false,
+                            error: 'Private IP addresses are not allowed for proxy URLs'
+                        };
+                    }
+                    // For link-local addresses
+                    if (hostname.startsWith('169.254.') || hostname.startsWith('fe80:')) {
+                        return {
+                            valid: false,
+                            error: 'Link-local addresses are not allowed for proxy URLs'
+                        };
                     }
                 }
+                // For proxy URLs, mark that runtime validation is recommended
+                // to prevent DNS rebinding attacks
+                return {
+                    valid: true,
+                    sanitized: url,
+                    requiresRuntimeCheck: true
+                };
             }
-            index--;
+            return { valid: true, sanitized: url };
         }
-    }
-    async renderSolidBorder(color, side, curvePoints) {
-        this.path(parsePathForBorder(curvePoints, side));
-        this.ctx.fillStyle = asString(color);
-        this.ctx.fill();
-    }
-    async renderDoubleBorder(color, width, side, curvePoints) {
-        if (width < 3) {
-            await this.renderSolidBorder(color, side, curvePoints);
-            return;
+        catch (e) {
+            return {
+                valid: false,
+                error: `Invalid URL format: ${e instanceof Error ? e.message : 'Unknown error'}`
+            };
         }
-        const outerPaths = parsePathForBorderDoubleOuter(curvePoints, side);
-        this.path(outerPaths);
-        this.ctx.fillStyle = asString(color);
-        this.ctx.fill();
-        const innerPaths = parsePathForBorderDoubleInner(curvePoints, side);
-        this.path(innerPaths);
-        this.ctx.fill();
     }
-    async renderNodeBackgroundAndBorders(paint) {
-        this.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
-        const styles = paint.container.styles;
-        const hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
-        const borders = [
-            { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth },
-            { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth },
-            { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth },
-            { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth }
+    /**
+     * Check if a hostname is a private IP address
+     */
+    isPrivateIP(hostname) {
+        // IPv4 private ranges
+        const privateIPv4Patterns = [
+            /^0\./, // 0.0.0.0/8 (This network)
+            /^10\./, // 10.0.0.0/8 (Private)
+            /^100\.(6[4-9]|[7-9][0-9]|1[0-1][0-9]|12[0-7])\./, // 100.64.0.0/10 (CGNAT)
+            /^127\./, // 127.0.0.0/8 (Loopback)
+            /^169\.254\./, // 169.254.0.0/16 (Link-local)
+            /^172\.(1[6-9]|2[0-9]|3[0-1])\./, // 172.16.0.0/12 (Private)
+            /^192\.0\.0\./, // 192.0.0.0/24 (IETF Protocol Assignments)
+            /^192\.0\.2\./, // 192.0.2.0/24 (TEST-NET-1)
+            /^192\.168\./, // 192.168.0.0/16 (Private)
+            /^198\.(1[8-9])\./, // 198.18.0.0/15 (Network benchmark)
+            /^198\.51\.100\./, // 198.51.100.0/24 (TEST-NET-2)
+            /^203\.0\.113\./, // 203.0.113.0/24 (TEST-NET-3)
+            /^2(2[4-9]|3[0-9])\./, // 224.0.0.0/4 (Multicast)
+            /^24[0-9]\./, // 240.0.0.0/4 (Reserved)
+            /^255\.255\.255\.255$/ // 255.255.255.255/32 (Broadcast)
         ];
-        const backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(getBackgroundValueForIndex(styles.backgroundClip, 0), paint.curves);
-        if (hasBackground || styles.boxShadow.length) {
-            this.ctx.save();
-            this.path(backgroundPaintingArea);
-            this.ctx.clip();
-            if (!isTransparent(styles.backgroundColor)) {
-                this.ctx.fillStyle = asString(styles.backgroundColor);
-                this.ctx.fill();
+        // Check IPv4
+        if (privateIPv4Patterns.some((pattern) => pattern.test(hostname))) {
+            return true;
+        }
+        // IPv6 private ranges and special addresses
+        if (hostname.includes(':')) {
+            return this.isPrivateIPv6(hostname);
+        }
+        return false;
+    }
+    /**
+     * Check if an IPv6 address is private or special
+     * Handles compressed IPv6 addresses (e.g., ::1, fc00::1)
+     */
+    isPrivateIPv6(hostname) {
+        const normalizedHost = hostname.toLowerCase().trim();
+        // Remove square brackets if present (e.g., [::1])
+        const addr = normalizedHost.replace(/^\[|\]$/g, '');
+        // Remove zone ID if present (e.g., fe80::1%eth0)
+        const addrWithoutZone = addr.split('%')[0];
+        // Loopback ::1 (also matches 0:0:0:0:0:0:0:1)
+        if (/^(0:){7}1$/.test(addrWithoutZone) || addrWithoutZone === '::1') {
+            return true;
+        }
+        // Unspecified address :: (also matches 0:0:0:0:0:0:0:0)
+        if (/^(0:){7}0$/.test(addrWithoutZone) || addrWithoutZone === '::') {
+            return true;
+        }
+        // Expand :: compression to check prefixes
+        // This handles cases like fc00::1, fe80::, etc.
+        const expandedAddr = this.expandIPv6(addrWithoutZone);
+        if (!expandedAddr) {
+            // If we can't expand it, fall back to prefix matching
+            return this.isPrivateIPv6Prefix(addrWithoutZone);
+        }
+        // fc00::/7 (Unique Local Address)
+        // Check if first byte is in range fc00-fdff
+        const firstByte = parseInt(expandedAddr.substring(0, 2), 16);
+        if (firstByte >= 0xfc && firstByte <= 0xfd) {
+            return true;
+        }
+        // fe80::/10 (Link-local)
+        // First 10 bits should be 1111 1110 10
+        if (firstByte === 0xfe) {
+            const secondByte = parseInt(expandedAddr.substring(2, 4), 16);
+            // Check if bits 11-12 are 10 (0x80-0xbf)
+            if (secondByte >= 0x80 && secondByte <= 0xbf) {
+                return true;
             }
-            await this.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 : 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);
-                }
-                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();
-            });
         }
-        let side = 0;
-        for (const border of borders) {
-            if (border.style !== 0 /* BORDER_STYLE.NONE */ && !isTransparent(border.color) && border.width > 0) {
-                if (border.style === 2 /* BORDER_STYLE.DASHED */) {
-                    await this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */);
-                }
-                else if (border.style === 3 /* BORDER_STYLE.DOTTED */) {
-                    await this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */);
+        // ff00::/8 (Multicast)
+        if (firstByte === 0xff) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Expand compressed IPv6 address to full form
+     * e.g., "::1" -> "0000:0000:0000:0000:0000:0000:0000:0001"
+     */
+    expandIPv6(addr) {
+        try {
+            // Handle :: compression
+            if (addr.includes('::')) {
+                const parts = addr.split('::');
+                if (parts.length > 2) {
+                    return null; // Invalid: more than one ::
                 }
-                else if (border.style === 4 /* BORDER_STYLE.DOUBLE */) {
-                    await this.renderDoubleBorder(border.color, border.width, side, paint.curves);
+                const leftParts = parts[0] ? parts[0].split(':') : [];
+                const rightParts = parts[1] ? parts[1].split(':') : [];
+                const missingParts = 8 - leftParts.length - rightParts.length;
+                if (missingParts < 0) {
+                    return null; // Invalid
                 }
-                else {
-                    await this.renderSolidBorder(border.color, side, paint.curves);
+                const middleParts = Array(missingParts).fill('0000');
+                const allParts = [...leftParts, ...middleParts, ...rightParts];
+                return allParts.map((p) => p.padStart(4, '0')).join(':');
+            }
+            else {
+                // No compression, just normalize
+                const parts = addr.split(':');
+                if (parts.length !== 8) {
+                    return null; // Invalid
                 }
+                return parts.map((p) => p.padStart(4, '0')).join(':');
             }
-            side++;
+        }
+        catch {
+            return null;
         }
     }
-    async renderDashedDottedBorder(color, width, side, curvePoints, style) {
-        this.ctx.save();
-        const strokePaths = parsePathForBorderStroke(curvePoints, side);
-        const boxPaths = parsePathForBorder(curvePoints, side);
-        if (style === 2 /* BORDER_STYLE.DASHED */) {
-            this.path(boxPaths);
-            this.ctx.clip();
+    /**
+     * Fallback prefix matching for IPv6 when expansion fails
+     */
+    isPrivateIPv6Prefix(addr) {
+        // fc00::/7 (Unique Local Address)
+        if (/^fc[0-9a-f]{0,2}:?/i.test(addr) || /^fd[0-9a-f]{0,2}:?/i.test(addr)) {
+            return true;
         }
-        let startX, startY, endX, endY;
-        if (isBezierCurve(boxPaths[0])) {
-            startX = boxPaths[0].start.x;
-            startY = boxPaths[0].start.y;
+        // fe80::/10 (Link-local)
+        if (/^fe[89ab][0-9a-f]:?/i.test(addr)) {
+            return true;
         }
-        else {
-            startX = boxPaths[0].x;
-            startY = boxPaths[0].y;
+        // ff00::/8 (Multicast)
+        if (/^ff[0-9a-f]{0,2}:?/i.test(addr)) {
+            return true;
         }
-        if (isBezierCurve(boxPaths[1])) {
-            endX = boxPaths[1].end.x;
-            endY = boxPaths[1].end.y;
+        return false;
+    }
+    /**
+     * Validate CSP nonce
+     *
+     * @param nonce - CSP nonce to validate
+     * @returns Validation result
+     */
+    validateCspNonce(nonce) {
+        if (!nonce || typeof nonce !== 'string') {
+            return {
+                valid: false,
+                error: 'CSP nonce must be a non-empty string'
+            };
         }
-        else {
-            endX = boxPaths[1].x;
-            endY = boxPaths[1].y;
+        // Basic format validation - nonce should be base64-like
+        // Typical format: base64 string, often 32+ characters
+        if (nonce.length < 16) {
+            return {
+                valid: false,
+                error: 'CSP nonce is too short (minimum 16 characters recommended)'
+            };
         }
-        let length;
-        if (side === 0 || side === 2) {
-            length = Math.abs(startX - endX);
+        // Check for suspicious characters
+        if (!/^[A-Za-z0-9+/=_-]+$/.test(nonce)) {
+            return {
+                valid: false,
+                error: 'CSP nonce contains invalid characters'
+            };
         }
-        else {
-            length = Math.abs(startY - endY);
+        return { valid: true, sanitized: nonce };
+    }
+    /**
+     * Validate image timeout
+     *
+     * @param timeout - Timeout in milliseconds
+     * @returns Validation result
+     */
+    validateImageTimeout(timeout) {
+        if (typeof timeout !== 'number' || isNaN(timeout)) {
+            return {
+                valid: false,
+                error: 'Image timeout must be a number'
+            };
         }
-        this.ctx.beginPath();
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            this.formatPath(strokePaths);
+        if (timeout < 0) {
+            return {
+                valid: false,
+                error: 'Image timeout cannot be negative'
+            };
         }
-        else {
-            this.formatPath(boxPaths.slice(0, 2));
+        if (this.config.maxImageTimeout && timeout > this.config.maxImageTimeout) {
+            return {
+                valid: false,
+                error: `Image timeout ${timeout}ms exceeds maximum allowed ${this.config.maxImageTimeout}ms`
+            };
         }
-        let dashLength = width < 3 ? width * 3 : width * 2;
-        let spaceLength = width < 3 ? width * 2 : width;
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            dashLength = width;
-            spaceLength = width;
+        return { valid: true, sanitized: timeout };
+    }
+    /**
+     * Validate window dimensions
+     *
+     * @param width - Window width
+     * @param height - Window height
+     * @returns Validation result
+     */
+    validateDimensions(width, height) {
+        if (typeof width !== 'number' || typeof height !== 'number') {
+            return {
+                valid: false,
+                error: 'Dimensions must be numbers'
+            };
         }
-        let useLineDash = true;
-        if (length <= dashLength * 2) {
-            useLineDash = false;
+        if (isNaN(width) || isNaN(height)) {
+            return {
+                valid: false,
+                error: 'Dimensions cannot be NaN'
+            };
         }
-        else if (length <= dashLength * 2 + spaceLength) {
-            const multiplier = length / (2 * dashLength + spaceLength);
-            dashLength *= multiplier;
-            spaceLength *= multiplier;
+        if (width <= 0 || height <= 0) {
+            return {
+                valid: false,
+                error: 'Dimensions must be positive'
+            };
+        }
+        // Reasonable maximum to prevent memory issues
+        const MAX_DIMENSION = 32767; // Common canvas limit
+        if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
+            return {
+                valid: false,
+                error: `Dimensions exceed maximum allowed (${MAX_DIMENSION}px)`
+            };
+        }
+        return { valid: true, sanitized: { width, height } };
+    }
+    /**
+     * Validate scale factor
+     *
+     * @param scale - Scale factor
+     * @returns Validation result
+     */
+    validateScale(scale) {
+        if (typeof scale !== 'number' || isNaN(scale)) {
+            return {
+                valid: false,
+                error: 'Scale must be a number'
+            };
+        }
+        if (scale <= 0) {
+            return {
+                valid: false,
+                error: 'Scale must be positive'
+            };
+        }
+        // Reasonable scale limits
+        if (scale > 10) {
+            return {
+                valid: false,
+                error: 'Scale factor too large (maximum 10x)'
+            };
+        }
+        return { valid: true, sanitized: scale };
+    }
+    /**
+     * Validate HTML element
+     *
+     * @param element - Element to validate
+     * @returns Validation result
+     */
+    validateElement(element) {
+        if (!element) {
+            return {
+                valid: false,
+                error: 'Element is required'
+            };
+        }
+        if (typeof element !== 'object') {
+            return {
+                valid: false,
+                error: 'Element must be an object'
+            };
+        }
+        // Accept real HTMLElement, or any element-like object with the minimal shape
+        // required by the implementation (ownerDocument + defaultView) for backward
+        // compatibility and test environments.
+        if (typeof HTMLElement !== 'undefined' && element instanceof HTMLElement) {
+            // Real DOM element
+            if (!element.ownerDocument) {
+                return { valid: false, error: 'Element must be attached to a document' };
+            }
+            return { valid: true };
+        }
+        // Duck-typing: accept object with ownerDocument and defaultView (minimal contract)
+        if (!element.ownerDocument) {
+            return {
+                valid: false,
+                error: 'Element must be attached to a document (ownerDocument required)'
+            };
         }
-        else {
-            const numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
-            const minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
-            const maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
-            spaceLength =
-                maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
-                    ? minSpace
-                    : maxSpace;
+        if (!element.ownerDocument.defaultView) {
+            return {
+                valid: false,
+                error: 'Document must be attached to a window (ownerDocument.defaultView required)'
+            };
         }
-        if (useLineDash) {
-            if (style === 3 /* BORDER_STYLE.DOTTED */) {
-                this.ctx.setLineDash([0, dashLength + spaceLength]);
+        return { valid: true };
+    }
+    /**
+     * Validate entire options object
+     *
+     * @param options - Options to validate
+     * @returns Validation result with all errors
+     */
+    validateOptions(options) {
+        const errors = [];
+        // Validate proxy URL only when a non-empty string (allow null/undefined to mean "no proxy")
+        const proxyUrl = options.proxy;
+        if (proxyUrl !== undefined && proxyUrl !== null && typeof proxyUrl === 'string' && proxyUrl.length > 0) {
+            const proxyResult = this.validateUrl(proxyUrl, 'proxy');
+            if (!proxyResult.valid) {
+                errors.push(`Proxy: ${proxyResult.error}`);
             }
-            else {
-                this.ctx.setLineDash([dashLength, spaceLength]);
+            // Note: Proxy URLs are marked with requiresRuntimeCheck to prevent DNS rebinding
+            // Consider implementing runtime IP validation in production environments
+        }
+        // Validate image timeout
+        if (options.imageTimeout !== undefined) {
+            const timeoutResult = this.validateImageTimeout(options.imageTimeout);
+            if (!timeoutResult.valid) {
+                errors.push(`Image timeout: ${timeoutResult.error}`);
             }
         }
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            this.ctx.lineCap = 'round';
-            this.ctx.lineWidth = width;
+        // Validate dimensions
+        if (options.width !== undefined || options.height !== undefined) {
+            const width = options.width ?? 800;
+            const height = options.height ?? 600;
+            const dimensionsResult = this.validateDimensions(width, height);
+            if (!dimensionsResult.valid) {
+                errors.push(`Dimensions: ${dimensionsResult.error}`);
+            }
         }
-        else {
-            this.ctx.lineWidth = width * 2 + 1.1;
+        // Validate scale
+        if (options.scale !== undefined) {
+            const scaleResult = this.validateScale(options.scale);
+            if (!scaleResult.valid) {
+                errors.push(`Scale: ${scaleResult.error}`);
+            }
         }
-        this.ctx.strokeStyle = asString(color);
-        this.ctx.stroke();
-        this.ctx.setLineDash([]);
-        // dashed round edge gap
-        if (style === 2 /* BORDER_STYLE.DASHED */) {
-            if (isBezierCurve(boxPaths[0])) {
-                const path1 = boxPaths[3];
-                const path2 = boxPaths[0];
-                this.ctx.beginPath();
-                this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
-                this.ctx.stroke();
+        // Validate CSP nonce
+        if (options.cspNonce !== undefined) {
+            const nonceResult = this.validateCspNonce(options.cspNonce);
+            if (!nonceResult.valid) {
+                errors.push(`CSP nonce: ${nonceResult.error}`);
             }
-            if (isBezierCurve(boxPaths[1])) {
-                const path1 = boxPaths[1];
-                const path2 = boxPaths[2];
-                this.ctx.beginPath();
-                this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
-                this.ctx.stroke();
+        }
+        // Custom validation
+        if (this.config.customValidator) {
+            const customResult = this.config.customValidator(options, 'options');
+            if (!customResult.valid) {
+                errors.push(`Custom validation: ${customResult.error}`);
             }
         }
-        this.ctx.restore();
-    }
-    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);
+        if (errors.length > 0) {
+            return {
+                valid: false,
+                error: errors.join('; ')
+            };
         }
-        const stack = parseStackingContexts(element);
-        await this.renderStack(stack);
-        this.applyEffects([]);
-        return this.canvas;
+        return { valid: true };
     }
 }
-const isTextInputElement = (container) => {
-    if (container instanceof TextareaElementContainer) {
-        return true;
-    }
-    else if (container instanceof SelectElementContainer) {
-        return true;
-    }
-    else if (container instanceof InputElementContainer && container.type !== RADIO && container.type !== CHECKBOX) {
-        return true;
-    }
-    return false;
-};
-const calculateBackgroundCurvedPaintingArea = (clip, curves) => {
-    switch (clip) {
-        case 0 /* BACKGROUND_CLIP.BORDER_BOX */:
-            return calculateBorderBoxPath(curves);
-        case 2 /* BACKGROUND_CLIP.CONTENT_BOX */:
-            return calculateContentBoxPath(curves);
-        case 1 /* BACKGROUND_CLIP.PADDING_BOX */:
-        default:
-            return calculatePaddingBoxPath(curves);
-    }
-};
-const canvasTextAlign = (textAlign) => {
-    switch (textAlign) {
-        case 1 /* TEXT_ALIGN.CENTER */:
-            return 'center';
-        case 2 /* TEXT_ALIGN.RIGHT */:
-            return 'right';
-        case 0 /* TEXT_ALIGN.LEFT */:
-        default:
-            return 'left';
-    }
-};
-// see https://github.com/niklasvh/html2canvas/pull/2645
-const iOSBrokenFonts = ['-apple-system', 'system-ui'];
-const fixIOSSystemFonts = (fontFamilies) => {
-    return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
-        ? fontFamilies.filter((fontFamily) => iOSBrokenFonts.indexOf(fontFamily) === -1)
-        : fontFamilies;
-};
-
-class ForeignObjectRenderer extends Renderer {
-    constructor(context, options) {
-        super(context, options);
-        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
-        this.options = options;
-        this.canvas.width = Math.floor(options.width * options.scale);
-        this.canvas.height = Math.floor(options.height * options.scale);
-        this.canvas.style.width = `${options.width}px`;
-        this.canvas.style.height = `${options.height}px`;
-        this.ctx.scale(this.options.scale, this.options.scale);
-        this.ctx.translate(-options.x, -options.y);
-        this.context.logger.debug(`EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`);
-    }
-    async render(element) {
-        const svg = createForeignObjectSVG(this.options.width * this.options.scale, this.options.height * this.options.scale, this.options.scale, this.options.scale, element);
-        const img = await loadSerializedSVG(svg);
-        if (this.options.backgroundColor) {
-            this.ctx.fillStyle = asString(this.options.backgroundColor);
-            this.ctx.fillRect(0, 0, this.options.width * this.options.scale, this.options.height * this.options.scale);
-        }
-        this.ctx.drawImage(img, -this.options.x * this.options.scale, -this.options.y * this.options.scale);
-        return this.canvas;
-    }
+/**
+ * Create a default validator instance
+ */
+function createDefaultValidator(config = {}) {
+    return new Validator({
+        allowDataUrls: true,
+        maxImageTimeout: 300000, // 5 minutes
+        ...config
+    });
 }
-const loadSerializedSVG = (svg) => new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => {
-        resolve(img);
-    };
-    img.onerror = reject;
-    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
-});
 
-class Logger {
-    constructor({ id, enabled }) {
-        this.id = id;
+/**
+ * Performance Monitor
+ *
+ * Tracks performance metrics throughout the rendering pipeline.
+ * Provides insights into where time is spent during rendering.
+ *
+ * Usage:
+ * ```typescript
+ * const monitor = new PerformanceMonitor(context);
+ *
+ * monitor.start('clone');
+ * await cloneDocument();
+ * monitor.end('clone');
+ *
+ * const summary = monitor.getSummary();
+ * ```
+ */
+class PerformanceMonitor {
+    constructor(context, enabled = true) {
+        this.context = context;
+        this.activeMetrics = new Map();
+        this.completedMetrics = [];
         this.enabled = enabled;
-        this.start = Date.now();
+        // Fallback for environments without performance.now()
+        this.getTime =
+            typeof performance !== 'undefined' && typeof performance.now === 'function'
+                ? () => performance.now()
+                : () => Date.now();
     }
-    debug(...args) {
-        if (this.enabled) {
-            // eslint-disable-next-line no-console
-            if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') {
-                // eslint-disable-next-line no-console
-                console.debug(this.id, `${this.getTime()}ms`, ...args);
-            }
-            else {
-                this.info(...args);
-            }
+    /**
+     * Start measuring a performance metric
+     *
+     * @param name - Unique name for this metric
+     * @param metadata - Optional metadata to attach
+     */
+    start(name, metadata) {
+        if (!this.enabled) {
+            return;
         }
+        if (this.activeMetrics.has(name)) {
+            this.context?.logger.warn(`Performance metric '${name}' already started. Overwriting.`);
+        }
+        this.activeMetrics.set(name, {
+            name,
+            startTime: this.getTime(),
+            metadata
+        });
     }
-    getTime() {
-        return Date.now() - this.start;
+    /**
+     * End measuring a performance metric
+     *
+     * @param name - Name of the metric to end
+     * @returns The completed metric, or undefined if not found
+     */
+    end(name) {
+        if (!this.enabled) {
+            return undefined;
+        }
+        const metric = this.activeMetrics.get(name);
+        if (!metric) {
+            this.context?.logger.warn(`Performance metric '${name}' not found. Was start() called?`);
+            return undefined;
+        }
+        metric.endTime = this.getTime();
+        metric.duration = metric.endTime - metric.startTime;
+        this.completedMetrics.push(metric);
+        this.activeMetrics.delete(name);
+        this.context?.logger.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
+        return metric;
     }
-    info(...args) {
-        if (this.enabled) {
-            // eslint-disable-next-line no-console
-            if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') {
-                // eslint-disable-next-line no-console
-                console.info(this.id, `${this.getTime()}ms`, ...args);
-            }
+    /**
+     * Measure a synchronous function
+     *
+     * @param name - Name for this measurement
+     * @param fn - Function to measure
+     * @param metadata - Optional metadata
+     * @returns The function's return value
+     */
+    measure(name, fn, metadata) {
+        this.start(name, metadata);
+        try {
+            const result = fn();
+            this.end(name);
+            return result;
+        }
+        catch (error) {
+            this.end(name);
+            throw error;
         }
     }
-    warn(...args) {
-        if (this.enabled) {
-            if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') {
-                console.warn(this.id, `${this.getTime()}ms`, ...args);
-            }
-            else {
-                this.info(...args);
-            }
+    /**
+     * Measure an asynchronous function
+     *
+     * @param name - Name for this measurement
+     * @param fn - Async function to measure
+     * @param metadata - Optional metadata
+     * @returns Promise resolving to the function's return value
+     */
+    async measureAsync(name, fn, metadata) {
+        this.start(name, metadata);
+        try {
+            const result = await fn();
+            this.end(name);
+            return result;
+        }
+        catch (error) {
+            this.end(name);
+            throw error;
         }
     }
-    error(...args) {
-        if (this.enabled) {
-            if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') {
-                console.error(this.id, `${this.getTime()}ms`, ...args);
-            }
-            else {
-                this.info(...args);
-            }
+    /**
+     * Get all completed metrics
+     *
+     * @returns Array of completed performance metrics
+     */
+    getMetrics() {
+        return [...this.completedMetrics];
+    }
+    /**
+     * Get a specific metric by name
+     *
+     * @param name - Metric name
+     * @returns The metric, or undefined if not found
+     */
+    getMetric(name) {
+        return this.completedMetrics.find((m) => m.name === name);
+    }
+    /**
+     * Get performance summary
+     *
+     * @returns Aggregated performance data
+     */
+    getSummary() {
+        const totalDuration = this.completedMetrics.reduce((sum, metric) => sum + (metric.duration || 0), 0);
+        const breakdown = this.completedMetrics.map((metric) => ({
+            name: metric.name,
+            duration: metric.duration || 0,
+            percentage: totalDuration > 0 ? (((metric.duration || 0) / totalDuration) * 100).toFixed(1) + '%' : '0%'
+        }));
+        return {
+            totalDuration,
+            metrics: this.getMetrics(),
+            breakdown
+        };
+    }
+    /**
+     * Log performance summary to console
+     */
+    logSummary() {
+        if (!this.enabled || this.completedMetrics.length === 0 || !this.context) {
+            return;
         }
+        const summary = this.getSummary();
+        this.context.logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
+        summary.breakdown
+            .sort((a, b) => b.duration - a.duration)
+            .forEach((item) => {
+            this.context.logger.info(`  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`);
+        });
     }
-}
-Logger.instances = {};
-
-class Context {
-    constructor(options, windowBounds) {
-        this.windowBounds = windowBounds;
-        this.instanceName = `#${Context.instanceCount++}`;
-        this.logger = new Logger({ id: this.instanceName, enabled: options.logging });
-        this.cache = options.cache ?? new Cache(this, options);
+    /**
+     * Clear all metrics
+     */
+    clear() {
+        this.activeMetrics.clear();
+        this.completedMetrics.splice(0);
+    }
+    /**
+     * Check if monitoring is enabled
+     */
+    isEnabled() {
+        return this.enabled;
+    }
+    /**
+     * Get active (uncompleted) metrics
+     * Useful for debugging leaked measurements
+     */
+    getActiveMetrics() {
+        return Array.from(this.activeMetrics.keys());
     }
 }
-Context.instanceCount = 1;
 
-let cspNonce;
-const setCspNonce = (nonce) => {
-    cspNonce = nonce;
+/**
+ * Main html2canvas function with improved configuration management
+ *
+ * @param element - Element to render
+ * @param options - Rendering options
+ * @param config - Optional configuration (for advanced use cases)
+ * @returns Promise resolving to rendered canvas
+ */
+const html2canvas = (element, options = {}, config) => {
+    // Create configuration from element if not provided
+    const finalConfig = config ||
+        Html2CanvasConfig.fromElement(element, {
+            cspNonce: options.cspNonce,
+            cache: options.cache
+        });
+    return renderElement(element, options, finalConfig);
 };
-const html2canvas = (element, options = {}) => {
-    return renderElement(element, options);
+/**
+ * Set CSP nonce for inline styles
+ * @deprecated Use options.cspNonce instead
+ */
+const setCspNonce = (nonce) => {
+    console.warn('[html2canvas-pro] setCspNonce is deprecated. ' +
+        'Pass cspNonce in options instead: html2canvas(element, { cspNonce: "..." })');
+    // For backward compatibility, set default config
+    if (typeof window !== 'undefined') {
+        setDefaultConfig(new Html2CanvasConfig({ window, cspNonce: nonce }));
+    }
 };
 html2canvas.setCspNonce = setCspNonce;
-if (typeof window !== 'undefined') {
-    CacheStorage.setContext(window);
-}
-const renderElement = async (element, opts) => {
+/**
+ * Coerce number-like option values for backward compatibility (e.g. string "2" from form/query).
+ * Mutates opts in place; callers should avoid reusing the same options object if they rely on original types.
+ */
+const coerceNumberOptions = (opts) => {
+    const numKeys = [
+        'scale',
+        'width',
+        'height',
+        'imageTimeout',
+        'x',
+        'y',
+        'windowWidth',
+        'windowHeight',
+        'scrollX',
+        'scrollY'
+    ];
+    numKeys.forEach((key) => {
+        const v = opts[key];
+        if (v !== undefined && v !== null && typeof v !== 'number') {
+            const n = Number(v);
+            if (!Number.isNaN(n)) {
+                opts[key] = n;
+            }
+        }
+    });
+};
+const renderElement = async (element, opts, config) => {
+    coerceNumberOptions(opts);
+    // Input validation (unless explicitly skipped)
+    if (!opts.skipValidation) {
+        const validator = opts.validator || createDefaultValidator();
+        // Validate element
+        const elementValidation = validator.validateElement(element);
+        if (!elementValidation.valid) {
+            throw new Error(elementValidation.error);
+        }
+        // Validate options
+        const optionsValidation = validator.validateOptions(opts);
+        if (!optionsValidation.valid) {
+            throw new Error(`Invalid options: ${optionsValidation.error}`);
+        }
+    }
     if (!element || typeof element !== 'object') {
-        return Promise.reject('Invalid element provided as first argument');
+        throw new Error('Invalid element provided as first argument');
     }
     const ownerDocument = element.ownerDocument;
     if (!ownerDocument) {
@@ -8994,17 +10423,29 @@ const renderElement = async (element, opts) => {
     };
     const contextOptions = {
         logging: opts.logging ?? true,
-        cache: opts.cache,
+        cache: opts.cache ?? config.cache,
         ...resourceOptions
     };
+    // Fallbacks for minimal window (e.g. element-like mocks) so we don't get NaN
+    const DEFAULT_WINDOW_WIDTH = 800;
+    const DEFAULT_WINDOW_HEIGHT = 600;
+    const DEFAULT_SCROLL = 0;
+    const win = defaultView;
     const windowOptions = {
-        windowWidth: opts.windowWidth ?? defaultView.innerWidth,
-        windowHeight: opts.windowHeight ?? defaultView.innerHeight,
-        scrollX: opts.scrollX ?? defaultView.pageXOffset,
-        scrollY: opts.scrollY ?? defaultView.pageYOffset
+        windowWidth: opts.windowWidth ?? win.innerWidth ?? DEFAULT_WINDOW_WIDTH,
+        windowHeight: opts.windowHeight ?? win.innerHeight ?? DEFAULT_WINDOW_HEIGHT,
+        scrollX: opts.scrollX ?? win.pageXOffset ?? DEFAULT_SCROLL,
+        scrollY: opts.scrollY ?? win.pageYOffset ?? DEFAULT_SCROLL
     };
     const windowBounds = new Bounds(windowOptions.scrollX, windowOptions.scrollY, windowOptions.windowWidth, windowOptions.windowHeight);
-    const context = new Context(contextOptions, windowBounds);
+    const context = new Context(contextOptions, windowBounds, config);
+    // Initialize performance monitoring if enabled
+    const performanceMonitoring = opts.enablePerformanceMonitoring ?? opts.logging ?? false;
+    const perfMonitor = new PerformanceMonitor(context, performanceMonitoring);
+    perfMonitor.start('total', {
+        width: windowOptions.windowWidth,
+        height: windowOptions.windowHeight
+    });
     const foreignObjectRendering = opts.foreignObjectRendering ?? false;
     const cloneOptions = {
         allowTaint: opts.allowTaint ?? false,
@@ -9013,15 +10454,17 @@ const renderElement = async (element, opts) => {
         iframeContainer: opts.iframeContainer,
         inlineImages: foreignObjectRendering,
         copyStyles: foreignObjectRendering,
-        cspNonce
+        cspNonce: opts.cspNonce ?? config.cspNonce
     };
     context.logger.debug(`Starting document clone with size ${windowBounds.width}x${windowBounds.height} scrolled to ${-windowBounds.left},${-windowBounds.top}`);
+    perfMonitor.start('clone');
     const documentCloner = new DocumentCloner(context, element, cloneOptions);
     const clonedElement = documentCloner.clonedReferenceElement;
     if (!clonedElement) {
-        return Promise.reject(`Unable to find element in cloned iframe`);
+        throw new Error('Unable to find element in cloned iframe');
     }
     const container = await documentCloner.toIFrame(ownerDocument, windowBounds);
+    perfMonitor.end('clone');
     const { width, height, left, top } = isBodyElement(clonedElement) || isHTMLElement(clonedElement)
         ? parseDocumentSize(clonedElement.ownerDocument)
         : parseBounds(context, clonedElement);
@@ -9033,32 +10476,56 @@ const renderElement = async (element, opts) => {
         x: (opts.x ?? 0) + left,
         y: (opts.y ?? 0) + top,
         width: opts.width ?? Math.ceil(width),
-        height: opts.height ?? Math.ceil(height)
+        height: opts.height ?? Math.ceil(height),
+        imageSmoothing: opts.imageSmoothing,
+        imageSmoothingQuality: opts.imageSmoothingQuality
     };
     let canvas;
-    if (foreignObjectRendering) {
-        context.logger.debug(`Document cloned, using foreign object rendering`);
-        const renderer = new ForeignObjectRenderer(context, renderOptions);
-        canvas = await renderer.render(clonedElement);
-    }
-    else {
-        context.logger.debug(`Document cloned, element located at ${left},${top} with size ${width}x${height} using computed rendering`);
-        context.logger.debug(`Starting DOM parsing`);
-        const root = parseTree(context, clonedElement);
-        if (backgroundColor === root.styles.backgroundColor) {
-            root.styles.backgroundColor = COLORS.TRANSPARENT;
+    let root;
+    try {
+        if (foreignObjectRendering) {
+            context.logger.debug(`Document cloned, using foreign object rendering`);
+            perfMonitor.start('render-foreignobject');
+            const renderer = new ForeignObjectRenderer(context, renderOptions);
+            canvas = await renderer.render(clonedElement);
+            perfMonitor.end('render-foreignobject');
+        }
+        else {
+            context.logger.debug(`Document cloned, element located at ${left},${top} with size ${width}x${height} using computed rendering`);
+            context.logger.debug(`Starting DOM parsing`);
+            perfMonitor.start('parse');
+            root = parseTree(context, clonedElement);
+            perfMonitor.end('parse');
+            if (backgroundColor === root.styles.backgroundColor) {
+                root.styles.backgroundColor = COLORS.TRANSPARENT;
+            }
+            context.logger.debug(`Starting renderer for element at ${renderOptions.x},${renderOptions.y} with size ${renderOptions.width}x${renderOptions.height}`);
+            perfMonitor.start('render');
+            const renderer = new CanvasRenderer(context, renderOptions);
+            canvas = await renderer.render(root);
+            perfMonitor.end('render');
+        }
+        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`);
+            }
+        }
+        perfMonitor.end('cleanup');
+        perfMonitor.end('total');
+        context.logger.debug(`Finished rendering`);
+        // Log performance summary if monitoring is enabled
+        if (performanceMonitoring) {
+            perfMonitor.logSummary();
         }
-        context.logger.debug(`Starting renderer for element at ${renderOptions.x},${renderOptions.y} with size ${renderOptions.width}x${renderOptions.height}`);
-        const renderer = new CanvasRenderer(context, renderOptions);
-        canvas = await renderer.render(root);
+        return canvas;
     }
-    if (opts.removeContainer ?? true) {
-        if (!DocumentCloner.destroy(container)) {
-            context.logger.error(`Cannot detach cloned iframe as it is not in the DOM anymore`);
+    finally {
+        // Restore DOM modifications (animations, transforms) in cloned document
+        if (root) {
+            root.restoreTree();
         }
     }
-    context.logger.debug(`Finished rendering`);
-    return canvas;
 };
 const parseBackgroundColor = (context, element, backgroundColorOverride) => {
     const ownerDocument = element.ownerDocument;
@@ -9083,5 +10550,5 @@ const parseBackgroundColor = (context, element, backgroundColorOverride) => {
         : defaultBackgroundColor;
 };
 
-export { html2canvas as default, html2canvas, setCspNonce };
+export { Html2CanvasConfig, IMAGE_RENDERING, PerformanceMonitor, Validator, createDefaultValidator, html2canvas as default, html2canvas, setCspNonce };
 //# sourceMappingURL=html2canvas-pro.esm.js.map