html2canvas-pro 2.1.1 → 2.2.0

package/dist/lib/render/canvas/text-renderer.js

@@ -17,6 +17,7 @@ const text_1 = require("../../css/layout/text");
 const color_utilities_1 = require("../../css/types/color-utilities");
 const parser_1 = require("../../css/syntax/parser");
 const writing_mode_1 = require("../../css/property-descriptors/writing-mode");
+const text_decoration_renderer_1 = require("./text/text-decoration-renderer");
 // iOS font fix - see https://github.com/niklasvh/html2canvas/pull/2645
 const iOSBrokenFonts = ['-apple-system', 'system-ui'];
 /**
@@ -93,8 +94,8 @@ const getTextStrokeLineJoin = () => {
 class TextRenderer {
     constructor(deps) {
         this.ctx = deps.ctx;
-        // context stored but not used directly in this renderer
         this.options = deps.options;
+        this.decorationRenderer = new text_decoration_renderer_1.TextDecorationRenderer(deps.ctx);
     }
     /**
      * Iterate grapheme clusters one-by-one, applying correct letter-spacing and
@@ -236,106 +237,7 @@ class TextRenderer {
         });
     }
     renderTextDecoration(bounds, styles) {
-        this.ctx.fillStyle = (0, color_utilities_1.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);
-        }
+        this.decorationRenderer.render(bounds, styles);
     }
     // Helper method to truncate text and add ellipsis if needed
     truncateTextWithEllipsis(text, maxWidth, letterSpacing) {
@@ -402,142 +304,116 @@ class TextRenderer {
             fontSize
         ];
     }
+    /**
+     * Render text with -webkit-line-clamp truncation.
+     * Groups text bounds by their Y position into visual lines, then renders
+     * only the first N-1 complete lines followed by an ellipsis on the Nth line.
+     */
+    renderLineClampedText(text, styles, paintOrder, containerBounds) {
+        const lineHeight = styles.fontSize.number * 1.5;
+        const lines = [];
+        let currentLine = [];
+        let currentLineTop = text.textBounds[0].bounds.top;
+        text.textBounds.forEach((tb) => {
+            if (Math.abs(tb.bounds.top - currentLineTop) >= lineHeight * 0.5) {
+                if (currentLine.length > 0)
+                    lines.push(currentLine);
+                currentLine = [tb];
+                currentLineTop = tb.bounds.top;
+            }
+            else {
+                currentLine.push(tb);
+            }
+        });
+        if (currentLine.length > 0)
+            lines.push(currentLine);
+        const maxLines = styles.webkitLineClamp;
+        if (lines.length <= maxLines)
+            return false; // fall through to normal rendering
+        // Render full lines (0..N-2)
+        for (let i = 0; i < maxLines - 1; i++) {
+            lines[i].forEach((tb) => this.renderTextBoundWithPaintOrder(tb, styles, paintOrder));
+        }
+        // Nth line: truncated with ellipsis
+        const lastLine = lines[maxLines - 1];
+        if (lastLine?.length && containerBounds) {
+            const textStr = lastLine.map((tb) => tb.text).join('');
+            const first = lastLine[0];
+            const avail = containerBounds.width - (first.bounds.left - containerBounds.left);
+            const truncated = this.truncateTextWithEllipsis(textStr, avail, styles.letterSpacing);
+            const bounds = new text_1.TextBounds(truncated, first.bounds);
+            for (const layer of paintOrder) {
+                if (layer === 0 /* PAINT_ORDER_LAYER.FILL */) {
+                    this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
+                    this.renderTextWithLetterSpacing(bounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+                }
+                else if (layer === 1 /* PAINT_ORDER_LAYER.STROKE */) {
+                    this.renderTextStrokeWithStyle(bounds, styles);
+                }
+            }
+        }
+        return true;
+    }
+    /**
+     * Render single-line text with text-overflow: ellipsis.
+     * Returns true if ellipsis was applied (caller should skip normal rendering).
+     */
+    renderEllipsisText(text, styles, paintOrder, containerBounds) {
+        const lineHeight = styles.fontSize.number * 1.5;
+        const firstTop = text.textBounds[0].bounds.top;
+        const isSingleLine = text.textBounds.every((tb) => Math.abs(tb.bounds.top - firstTop) < lineHeight * 0.5);
+        if (!isSingleLine)
+            return false;
+        let fullText = text.textBounds
+            .map((tb) => tb.text)
+            .join('')
+            .replace(/\s+/g, ' ')
+            .trim();
+        const fullWidth = this.ctx.measureText(fullText).width;
+        if (fullWidth <= containerBounds.width)
+            return false;
+        const truncated = this.truncateTextWithEllipsis(fullText, containerBounds.width, styles.letterSpacing);
+        const bounds = new text_1.TextBounds(truncated, text.textBounds[0].bounds);
+        for (const layer of paintOrder) {
+            if (layer === 0 /* PAINT_ORDER_LAYER.FILL */)
+                this.renderTextFillWithShadows(bounds, styles);
+            else if (layer === 1 /* PAINT_ORDER_LAYER.STROKE */)
+                this.renderTextStrokeWithStyle(bounds, styles);
+        }
+        return true;
+    }
     async renderTextNode(text, styles, containerBounds) {
-        const [font] = this.createFontStyle(styles);
-        this.ctx.font = font;
+        this.ctx.font = this.createFontStyle(styles)[0];
         this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
         this.ctx.textAlign = 'left';
         this.ctx.textBaseline = 'alphabetic';
         const paintOrder = styles.paintOrder;
-        // Calculate line height for text layout detection (used by both line-clamp and ellipsis)
-        const lineHeight = styles.fontSize.number * 1.5;
-        // Check if we need to apply -webkit-line-clamp
-        // This limits text to a specific number of lines with ellipsis
-        const shouldApplyLineClamp = styles.webkitLineClamp > 0 &&
+        // -webkit-line-clamp
+        const clamp = styles.webkitLineClamp > 0 &&
             (styles.display & 2 /* DISPLAY.BLOCK */) !== 0 &&
             styles.overflowY === 1 /* OVERFLOW.HIDDEN */ &&
             text.textBounds.length > 0;
-        if (shouldApplyLineClamp) {
-            // Group text bounds by lines based on their Y position
-            const lines = [];
-            let currentLine = [];
-            let currentLineTop = text.textBounds[0].bounds.top;
-            text.textBounds.forEach((tb) => {
-                // If this text bound is on a different line, start a new line
-                if (Math.abs(tb.bounds.top - currentLineTop) >= lineHeight * 0.5) {
-                    if (currentLine.length > 0) {
-                        lines.push(currentLine);
-                    }
-                    currentLine = [tb];
-                    currentLineTop = tb.bounds.top;
-                }
-                else {
-                    currentLine.push(tb);
-                }
-            });
-            // Don't forget the last line
-            if (currentLine.length > 0) {
-                lines.push(currentLine);
-            }
-            // Only render up to webkitLineClamp lines
-            const maxLines = styles.webkitLineClamp;
-            if (lines.length > maxLines) {
-                // Render only the first (maxLines - 1) complete lines
-                for (let i = 0; i < maxLines - 1; i++) {
-                    lines[i].forEach((textBound) => {
-                        this.renderTextBoundWithPaintOrder(textBound, styles, paintOrder);
-                    });
-                }
-                // For the last line, truncate with ellipsis
-                const lastLine = lines[maxLines - 1];
-                if (lastLine && lastLine.length > 0 && containerBounds) {
-                    const lastLineText = lastLine.map((tb) => tb.text).join('');
-                    const firstBound = lastLine[0];
-                    const availableWidth = containerBounds.width - (firstBound.bounds.left - containerBounds.left);
-                    const truncatedText = this.truncateTextWithEllipsis(lastLineText, availableWidth, styles.letterSpacing);
-                    // Build TextBounds once; reused for fill and stroke without re-allocating.
-                    const truncatedBounds = new text_1.TextBounds(truncatedText, firstBound.bounds);
-                    paintOrder.forEach((paintOrderLayer) => {
-                        switch (paintOrderLayer) {
-                            case 0 /* PAINT_ORDER_LAYER.FILL */:
-                                this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                                this.renderTextWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
-                                break;
-                            case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                                this.renderTextStrokeWithStyle(truncatedBounds, styles);
-                                break;
-                        }
-                    });
-                }
-                return; // Don't render anything else
-            }
-            // If lines.length <= maxLines, fall through to normal rendering
+        if (clamp) {
+            if (this.renderLineClampedText(text, styles, paintOrder, containerBounds))
+                return;
         }
-        // Check if we need to apply text-overflow: ellipsis
-        // Issue #203: Only apply ellipsis for single-line text overflow
-        // Multi-line text truncation (like -webkit-line-clamp) should not be affected
-        const shouldApplyEllipsis = styles.textOverflow === 1 /* TEXT_OVERFLOW.ELLIPSIS */ &&
+        // text-overflow: ellipsis (single-line only)
+        const ellipsis = styles.textOverflow === 1 /* TEXT_OVERFLOW.ELLIPSIS */ &&
             containerBounds &&
             styles.overflowX === 1 /* OVERFLOW.HIDDEN */ &&
             text.textBounds.length > 0;
-        // Calculate total text width if ellipsis might be needed
-        let needsEllipsis = false;
-        let truncatedText = '';
-        if (shouldApplyEllipsis) {
-            // Check if all text bounds are on approximately the same line (single-line scenario)
-            // For multi-line text (like -webkit-line-clamp), textBounds will have different Y positions
-            const firstTop = text.textBounds[0].bounds.top;
-            const isSingleLine = text.textBounds.every((tb) => Math.abs(tb.bounds.top - firstTop) < lineHeight * 0.5);
-            if (isSingleLine) {
-                // Measure the full text content
-                // Note: text.textBounds may contain whitespace characters from HTML formatting
-                // We need to collapse them like the browser does for white-space: nowrap
-                let fullText = text.textBounds.map((tb) => tb.text).join('');
-                // Collapse whitespace: replace sequences of whitespace (including newlines) with single spaces
-                // and trim leading/trailing whitespace
-                fullText = fullText.replace(/\s+/g, ' ').trim();
-                const fullTextWidth = this.ctx.measureText(fullText).width;
-                const availableWidth = containerBounds.width;
-                if (fullTextWidth > availableWidth) {
-                    needsEllipsis = true;
-                    truncatedText = this.truncateTextWithEllipsis(fullText, availableWidth, styles.letterSpacing);
-                }
-            }
-        }
-        // If ellipsis is needed, render the truncated text once
-        if (needsEllipsis) {
-            const firstBound = text.textBounds[0];
-            // Build TextBounds once; reused across paint layers and every shadow pass
-            // to avoid repeated allocation inside forEach callbacks.
-            const truncatedBounds = new text_1.TextBounds(truncatedText, firstBound.bounds);
-            paintOrder.forEach((paintOrderLayer) => {
-                switch (paintOrderLayer) {
-                    case 0 /* PAINT_ORDER_LAYER.FILL */: {
-                        this.renderTextFillWithShadows(truncatedBounds, styles);
-                        break;
-                    }
-                    case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                        this.renderTextStrokeWithStyle(truncatedBounds, styles);
-                        break;
-                }
-            });
+        if (ellipsis && this.renderEllipsisText(text, styles, paintOrder, containerBounds))
             return;
-        }
-        // Normal rendering (no ellipsis needed)
-        text.textBounds.forEach((text) => {
-            paintOrder.forEach((paintOrderLayer) => {
-                switch (paintOrderLayer) {
-                    case 0 /* PAINT_ORDER_LAYER.FILL */: {
-                        this.renderTextFillWithShadows(text, styles);
-                        if (styles.textDecorationLine.length) {
-                            this.renderTextDecoration(text.bounds, styles);
-                        }
-                        break;
-                    }
-                    case 1 /* PAINT_ORDER_LAYER.STROKE */: {
-                        this.renderTextStrokeWithStyle(text, styles);
-                        break;
-                    }
+        // Normal rendering: fill + stroke + decorations per text bound
+        text.textBounds.forEach((tb) => {
+            paintOrder.forEach((layer) => {
+                if (layer === 0 /* PAINT_ORDER_LAYER.FILL */) {
+                    this.renderTextFillWithShadows(tb, styles);
+                    if (styles.textDecorationLine.length)
+                        this.renderTextDecoration(tb.bounds, styles);
+                }
+                else if (layer === 1 /* PAINT_ORDER_LAYER.STROKE */) {
+                    this.renderTextStrokeWithStyle(tb, styles);
                 }
             });
         });

package/dist/lib/render/effects.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isBlendEffect = exports.isClipPathEffect = exports.isOpacityEffect = exports.isClipEffect = exports.isTransformEffect = exports.BlendEffect = exports.ClipPathEffect = exports.OpacityEffect = exports.ClipEffect = exports.TransformEffect = void 0;
+exports.isFilterEffect = exports.isBlendEffect = exports.isClipPathEffect = exports.isOpacityEffect = exports.isClipEffect = exports.isTransformEffect = exports.FilterEffect = exports.BlendEffect = exports.ClipPathEffect = exports.OpacityEffect = exports.ClipEffect = exports.TransformEffect = void 0;
+const mix_blend_mode_1 = require("../css/property-descriptors/mix-blend-mode");
 class TransformEffect {
     constructor(offsetX, offsetY, matrix) {
         this.offsetX = offsetX;
@@ -41,14 +42,46 @@ class ClipPathEffect {
     }
 }
 exports.ClipPathEffect = ClipPathEffect;
+/**
+ * Maps a CSS mix-blend-mode value to the corresponding Canvas {@link GlobalCompositeOperation}.
+ * All CSS blend mode values are supported by the Canvas 2D API except 'normal',
+ * which maps to the default 'source-over'.
+ */
+const MIX_BLEND_MODE_TO_COMPOSITE = {
+    [mix_blend_mode_1.MIX_BLEND_MODE.NORMAL]: 'source-over',
+    [mix_blend_mode_1.MIX_BLEND_MODE.MULTIPLY]: 'multiply',
+    [mix_blend_mode_1.MIX_BLEND_MODE.SCREEN]: 'screen',
+    [mix_blend_mode_1.MIX_BLEND_MODE.OVERLAY]: 'overlay',
+    [mix_blend_mode_1.MIX_BLEND_MODE.DARKEN]: 'darken',
+    [mix_blend_mode_1.MIX_BLEND_MODE.LIGHTEN]: 'lighten',
+    [mix_blend_mode_1.MIX_BLEND_MODE.COLOR_DODGE]: 'color-dodge',
+    [mix_blend_mode_1.MIX_BLEND_MODE.COLOR_BURN]: 'color-burn',
+    [mix_blend_mode_1.MIX_BLEND_MODE.HARD_LIGHT]: 'hard-light',
+    [mix_blend_mode_1.MIX_BLEND_MODE.SOFT_LIGHT]: 'soft-light',
+    [mix_blend_mode_1.MIX_BLEND_MODE.DIFFERENCE]: 'difference',
+    [mix_blend_mode_1.MIX_BLEND_MODE.EXCLUSION]: 'exclusion',
+    [mix_blend_mode_1.MIX_BLEND_MODE.HUE]: 'hue',
+    [mix_blend_mode_1.MIX_BLEND_MODE.SATURATION]: 'saturation',
+    [mix_blend_mode_1.MIX_BLEND_MODE.COLOR]: 'color',
+    [mix_blend_mode_1.MIX_BLEND_MODE.LUMINOSITY]: 'luminosity'
+};
 class BlendEffect {
-    constructor(compositeOperation) {
-        this.compositeOperation = compositeOperation;
+    constructor(mixBlendMode) {
+        this.mixBlendMode = mixBlendMode;
         this.type = 4 /* EffectType.BLEND */;
         this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
+        this.compositeOperation = MIX_BLEND_MODE_TO_COMPOSITE[mixBlendMode];
     }
 }
 exports.BlendEffect = BlendEffect;
+class FilterEffect {
+    constructor(filterString) {
+        this.filterString = filterString;
+        this.type = 5 /* EffectType.FILTER */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
+    }
+}
+exports.FilterEffect = FilterEffect;
 const isTransformEffect = (effect) => effect.type === 0 /* EffectType.TRANSFORM */;
 exports.isTransformEffect = isTransformEffect;
 const isClipEffect = (effect) => effect.type === 1 /* EffectType.CLIP */;
@@ -59,3 +92,5 @@ const isClipPathEffect = (effect) => effect.type === 3 /* EffectType.CLIP_PATH *
 exports.isClipPathEffect = isClipPathEffect;
 const isBlendEffect = (effect) => effect.type === 4 /* EffectType.BLEND */;
 exports.isBlendEffect = isBlendEffect;
+const isFilterEffect = (effect) => effect.type === 5 /* EffectType.FILTER */;
+exports.isFilterEffect = isFilterEffect;

package/dist/lib/render/object-fit.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateObjectFitRendering = void 0;
-const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objectFit) => {
+const length_percentage_1 = require("../css/types/length-percentage");
+const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objectFit, objectPosition) => {
     let sx = 0;
     let sy = 0;
     let sw = intrinsicWidth;
@@ -12,41 +13,44 @@ const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objec
     let dh = box.height;
     const boxRatio = dw / dh;
     const imgRatio = sw / sh;
+    // Resolve object-position offsets (default: 50% 50% = center)
+    const posX = objectPosition ? (0, length_percentage_1.getAbsoluteValue)(objectPosition[0], 1) : 0.5;
+    const posY = objectPosition ? (0, length_percentage_1.getAbsoluteValue)(objectPosition[1], 1) : 0.5;
     if (objectFit === 2 /* OBJECT_FIT.CONTAIN */) {
         if (imgRatio > boxRatio) {
             dh = dw / imgRatio;
-            dy += (box.height - dh) / 2;
+            dy += (box.height - dh) * posY;
         }
         else {
             dw = dh * imgRatio;
-            dx += (box.width - dw) / 2;
+            dx += (box.width - dw) * posX;
         }
     }
     else if (objectFit === 4 /* OBJECT_FIT.COVER */) {
         if (imgRatio > boxRatio) {
             sw = sh * boxRatio;
-            sx += (intrinsicWidth - sw) / 2;
+            sx += (intrinsicWidth - sw) * posX;
         }
         else {
             sh = sw / boxRatio;
-            sy += (intrinsicHeight - sh) / 2;
+            sy += (intrinsicHeight - sh) * posY;
         }
     }
     else if (objectFit === 8 /* OBJECT_FIT.NONE */) {
         if (sw > dw) {
-            sx += (sw - dw) / 2;
+            sx += (sw - dw) * posX;
             sw = dw;
         }
         else {
-            dx += (dw - sw) / 2;
+            dx += (dw - sw) * posX;
             dw = sw;
         }
         if (sh > dh) {
-            sy += (sh - dh) / 2;
+            sy += (sh - dh) * posY;
             sh = dh;
         }
         else {
-            dy += (dh - sh) / 2;
+            dy += (dh - sh) * posY;
             dh = sh;
         }
     }
@@ -56,28 +60,28 @@ const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objec
         if (containW < noneW) {
             if (imgRatio > boxRatio) {
                 dh = dw / imgRatio;
-                dy += (box.height - dh) / 2;
+                dy += (box.height - dh) * posY;
             }
             else {
                 dw = dh * imgRatio;
-                dx += (box.width - dw) / 2;
+                dx += (box.width - dw) * posX;
             }
         }
         else {
             if (sw > dw) {
-                sx += (sw - dw) / 2;
+                sx += (sw - dw) * posX;
                 sw = dw;
             }
             else {
-                dx += (dw - sw) / 2;
+                dx += (dw - sw) * posX;
                 dw = sw;
             }
             if (sh > dh) {
-                sy += (sh - dh) / 2;
+                sy += (sh - dh) * posY;
                 sh = dh;
             }
             else {
-                dy += (dh - sh) / 2;
+                dy += (dh - sh) * posY;
                 dh = sh;
             }
         }

package/dist/lib/render/stacking-context.js

@@ -71,6 +71,17 @@ class ElementPaint {
         if (this.container.styles.mixBlendMode !== mix_blend_mode_1.MIX_BLEND_MODE.NORMAL) {
             this.effects.push(new effects_1.BlendEffect(this.container.styles.mixBlendMode));
         }
+        if (this.container.styles.filter !== null) {
+            this.effects.push(new effects_1.FilterEffect(this.container.styles.filter));
+        }
+        if (this.container.styles.zoom !== 1) {
+            const origin = this.container.styles.transformOrigin;
+            const offsetX = this.container.bounds.left + (0, length_percentage_1.getAbsoluteValue)(origin[0], this.container.bounds.width);
+            const offsetY = this.container.bounds.top + (0, length_percentage_1.getAbsoluteValue)(origin[1], this.container.bounds.height);
+            const z = this.container.styles.zoom;
+            const zoomMatrix = [z, 0, 0, z, 0, 0];
+            this.effects.push(new effects_1.TransformEffect(offsetX, offsetY, zoomMatrix));
+        }
     }
     getEffects(target) {
         let inFlow = [2 /* POSITION.ABSOLUTE */, 3 /* POSITION.FIXED */].indexOf(this.container.styles.position) === -1;

package/dist/types/config.d.ts

@@ -42,13 +42,3 @@ export declare class Html2CanvasConfig {
      */
     clone(options?: Partial<ConfigOptions>): Html2CanvasConfig;
 }
-/**
- * Set default configuration
- * @deprecated Pass configuration directly to html2canvas instead
- */
-export declare function setDefaultConfig(config: Html2CanvasConfig): void;
-/**
- * Get default configuration
- * @deprecated Pass configuration directly to html2canvas instead
- */
-export declare function getDefaultConfig(): Html2CanvasConfig | null;

package/dist/types/core/cache-storage.d.ts

@@ -1,28 +1,4 @@
 import { Context } from './context';
-/**
- * CacheStorage (Deprecated static methods)
- *
- * @deprecated The static methods of CacheStorage are deprecated.
- * Use OriginChecker class instead for instance-based origin checking.
- *
- * For backward compatibility, these methods remain but should not be used in new code.
- */
-export declare class CacheStorage {
-    private static _link?;
-    private static _origin;
-    /**
-     * @deprecated Use OriginChecker.getOrigin() instead
-     */
-    static getOrigin(url: string): string;
-    /**
-     * @deprecated Use OriginChecker.isSameOrigin() instead
-     */
-    static isSameOrigin(src: string): boolean;
-    /**
-     * @deprecated No longer needed. OriginChecker is created per Context.
-     */
-    static setContext(window: Window): void;
-}
 export interface ResourceOptions {
     imageTimeout: number;
     useCORS: boolean;

package/dist/types/core/constants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Shared numeric constants used across html2canvas-pro.
+ * Centralising magic numbers for maintainability.
+ */
+/** Maximum entries in the CSS parse cache per descriptor (LRU). */
+export declare const PARSE_CACHE_MAX_PER_DESCRIPTOR = 200;
+/** Maximum cached background-image patterns per render session (LRU). */
+export declare const PATTERN_CACHE_MAX = 50;
+/** Maximum size of the image-resource cache (entries). */
+export declare const DEFAULT_IMAGE_CACHE_SIZE = 100;
+/** Maximum allowed image-resource cache size. */
+export declare const MAX_IMAGE_CACHE_SIZE = 10000;
+/** Default image-load timeout in milliseconds. */
+export declare const DEFAULT_IMAGE_TIMEOUT_MS = 15000;
+/** Z-axis mask offset used during box-shadow rendering. */
+export declare const SHADOW_MASK_OFFSET = 10000;
+/** Polling interval (ms) when waiting for the cloned iframe to become ready. */
+export declare const IFRAME_READY_POLL_MS = 50;
+/** Deferred resolution delay (ms) for inline XML images that may fail to parse. */
+export declare const INLINE_IMAGE_RESOLVE_DELAY_MS = 500;
+/** Maximum characters logged for image/resource keys. */
+export declare const RESOURCE_KEY_LOG_LENGTH = 256;

package/dist/types/core/context.d.ts

@@ -6,6 +6,8 @@ import { Html2CanvasConfig } from '../config';
 export type ContextOptions = {
     logging: boolean;
     cache?: Cache;
+    /** Called when a resource fails to load. */
+    onError?: (error: Error) => void;
 } & ResourceOptions;
 export declare class Context {
     windowBounds: Bounds;
@@ -14,6 +16,7 @@ export declare class Context {
     readonly cache: Cache;
     readonly originChecker: OriginChecker;
     readonly config: Html2CanvasConfig;
+    readonly onError?: (error: Error) => void;
     private static instanceCount;
     constructor(options: ContextOptions, windowBounds: Bounds, config: Html2CanvasConfig);
 }

package/dist/types/core/performance-monitor.d.ts

@@ -9,7 +9,7 @@ export interface PerformanceMetric {
     startTime: number;
     endTime?: number;
     duration?: number;
-    metadata?: Record<string, any>;
+    metadata?: Record<string, unknown>;
 }
 /**
  * Performance Summary
@@ -55,7 +55,7 @@ export declare class PerformanceMonitor {
      * @param name - Unique name for this metric
      * @param metadata - Optional metadata to attach
      */
-    start(name: string, metadata?: Record<string, any>): void;
+    start(name: string, metadata?: Record<string, unknown>): void;
     /**
      * End measuring a performance metric
      *
@@ -71,7 +71,7 @@ export declare class PerformanceMonitor {
      * @param metadata - Optional metadata
      * @returns The function's return value
      */
-    measure<T>(name: string, fn: () => T, metadata?: Record<string, any>): T;
+    measure<T>(name: string, fn: () => T, metadata?: Record<string, unknown>): T;
     /**
      * Measure an asynchronous function
      *
@@ -80,7 +80,7 @@ export declare class PerformanceMonitor {
      * @param metadata - Optional metadata
      * @returns Promise resolving to the function's return value
      */
-    measureAsync<T>(name: string, fn: () => Promise<T>, metadata?: Record<string, any>): Promise<T>;
+    measureAsync<T>(name: string, fn: () => Promise<T>, metadata?: Record<string, unknown>): Promise<T>;
     /**
      * Get all completed metrics
      *