html2canvas-pro 1.6.7 → 2.0.0

package/dist/html2canvas-pro.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
  */
@@ -1505,6 +1505,97 @@
         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);
@@ -1722,16 +1813,6 @@
         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));
     };
@@ -2014,76 +2095,6 @@
         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
      */
@@ -4559,6 +4570,37 @@
         }
     };
 
+    exports.IMAGE_RENDERING = void 0;
+    (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";
+    })(exports.IMAGE_RENDERING || (exports.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 exports.IMAGE_RENDERING.CRISP_EDGES;
+                case 'pixelated':
+                case '-webkit-optimize-contrast':
+                    return exports.IMAGE_RENDERING.PIXELATED;
+                case 'smooth':
+                case 'high-quality':
+                    return exports.IMAGE_RENDERING.SMOOTH;
+                case 'auto':
+                default:
+                    return exports.IMAGE_RENDERING.AUTO;
+            }
+        }
+    };
+
     class CSSParsedDeclaration {
         constructor(context, declaration) {
             this.animationDuration = parse(context, duration, declaration.animationDuration);
@@ -4635,6 +4677,7 @@
             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 */;
@@ -4711,8 +4754,45 @@
         }
     };
 
+    /**
+     * 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':
@@ -4732,8 +4812,83 @@
         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 = [];
@@ -4741,25 +4896,41 @@
             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();
+            }
+        }
     }
 
     /*
@@ -5613,17 +5784,19 @@
     }
 
     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)
@@ -5707,7 +5880,7 @@
             return new TextareaElementContainer(context, element);
         }
         if (isIFrameElement(element)) {
-            return new IFrameElementContainer(context, element);
+            return new IFrameElementContainer(context, element, parseTree);
         }
         return new ElementContainer(context, element);
     };
@@ -5736,12 +5909,7 @@
             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';
@@ -5756,7 +5924,7 @@
     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() {
@@ -6164,7 +6332,7 @@
         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;
@@ -6186,7 +6354,7 @@
                 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;
@@ -6262,7 +6430,7 @@
                     clone.loading = 'eager';
                 }
             }
-            if (isCustomElement(clone)) {
+            if (isCustomElement(clone) && !isSVGElementNode(clone)) {
                 return this.createCustomElementClone(clone);
             }
             return clone;
@@ -6818,152 +6986,14 @@
         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);
         }
     }
 
@@ -7394,103 +7424,6 @@
         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;
@@ -7735,248 +7668,834 @@
         }
     }
 
-    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 === exports.IMAGE_RENDERING.PIXELATED || imageRendering === exports.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 === exports.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';
@@ -8142,846 +8661,1756 @@
                             }
                             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 === exports.IMAGE_RENDERING.PIXELATED ||
+                        styles.imageRendering === exports.IMAGE_RENDERING.CRISP_EDGES) {
+                        this.context.logger.debug(`Disabling image smoothing for ${container.src} due to CSS image-rendering: ${styles.imageRendering === exports.IMAGE_RENDERING.PIXELATED ? 'pixelated' : 'crisp-edges'}`);
+                        this.ctx.imageSmoothingEnabled = false;
+                    }
+                    else if (styles.imageRendering === exports.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) {
@@ -9000,17 +10429,29 @@
         };
         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,
@@ -9019,15 +10460,17 @@
             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);
@@ -9039,32 +10482,56 @@
             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;
@@ -9089,6 +10556,10 @@
             : defaultBackgroundColor;
     };
 
+    exports.Html2CanvasConfig = Html2CanvasConfig;
+    exports.PerformanceMonitor = PerformanceMonitor;
+    exports.Validator = Validator;
+    exports.createDefaultValidator = createDefaultValidator;
     exports.default = html2canvas;
     exports.html2canvas = html2canvas;
     exports.setCspNonce = setCspNonce;