html2canvas-pro 2.2.4 → 2.3.1

package/dist/lib/css/types/length-percentage.js

@@ -3,18 +3,71 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAbsoluteValue = exports.getAbsoluteValueForTuple = exports.HUNDRED_PERCENT = exports.FIFTY_PERCENT = exports.ZERO_LENGTH = exports.parseLengthPercentageTuple = exports.evaluateCalcToLengthPercentage = exports.isCalcFunction = exports.isLengthPercentage = void 0;
+exports.getAbsoluteValue = exports.getAbsoluteValueForTuple = exports.HUNDRED_PERCENT = exports.FIFTY_PERCENT = exports.ZERO_LENGTH = exports.parseLengthPercentageTuple = exports.evaluateCalcToLengthPercentage = exports.parseOptionalCalcOrLength = exports.parseCalcForLengthPercentage = exports.isCalcFunction = exports.isCalcWithPercentage = exports.isLengthPercentage = void 0;
 const tokenizer_1 = require("../syntax/tokenizer");
 const parser_1 = require("../syntax/parser");
 const length_1 = require("./length");
 const safe_eval_1 = __importDefault(require("./safe-eval"));
-const isLengthPercentage = (token) => token.type === 16 /* TokenType.PERCENTAGE_TOKEN */ || (0, length_1.isLength)(token);
+const isLengthPercentage = (token) => token.type === 16 /* TokenType.PERCENTAGE_TOKEN */ || (0, length_1.isLength)(token) || (0, exports.isCalcWithPercentage)(token);
 exports.isLengthPercentage = isLengthPercentage;
+/**
+ * Check if a token is a CalcWithPercentage deferred token.
+ * Accepts CSSValue (structural duck-type check) for use in type guards.
+ */
+const isCalcWithPercentage = (token) => token.type === 17 /* TokenType.NUMBER_TOKEN */ && token._calcPercentage !== undefined;
+exports.isCalcWithPercentage = isCalcWithPercentage;
 /**
  * Check if a token is a calc() function
  */
 const isCalcFunction = (token) => token.type === 18 /* TokenType.FUNCTION */ && token.name === 'calc';
 exports.isCalcFunction = isCalcFunction;
+/**
+ * Parse a calc() token and produce a LengthPercentage.
+ *
+ * Uses two-point evaluation to extract the percentage coefficient and pixel
+ * offset from a calc() expression so it can be resolved later at render time
+ * when the container size is known.
+ *
+ *   evaluate(0)   → pixelOffset
+ *   evaluate(100) → percentage + pixelOffset   →  percentage = evaluate(100) - pixelOffset
+ *
+ * If the expression has no percentage component, returns a plain NUMBER_TOKEN
+ * for backwards compatibility.
+ */
+const parseCalcForLengthPercentage = (calcToken) => {
+    const withZero = (0, exports.evaluateCalcToLengthPercentage)(calcToken, 0);
+    if (!withZero)
+        return null;
+    const withHundred = (0, exports.evaluateCalcToLengthPercentage)(calcToken, 100);
+    if (!withHundred)
+        return null;
+    const pixelOffset = withZero.number;
+    const percentage = withHundred.number - pixelOffset;
+    // If there's no percentage component, return a plain NUMBER_TOKEN
+    if (percentage === 0) {
+        return withZero;
+    }
+    return {
+        type: 17 /* TokenType.NUMBER_TOKEN */,
+        number: pixelOffset,
+        flags: tokenizer_1.FLAG_INTEGER,
+        _calcPercentage: percentage,
+        _calcPixelOffset: pixelOffset
+    };
+};
+exports.parseCalcForLengthPercentage = parseCalcForLengthPercentage;
+/**
+ * Convenience helper for parsing an optional calc() or length-percentage value.
+ * Used by property descriptors that accept both calc() and regular length-percentage tokens.
+ * Returns null if the value is neither a calc() function nor a length-percentage token.
+ */
+const parseOptionalCalcOrLength = (value) => {
+    if ((0, exports.isCalcFunction)(value)) {
+        return (0, exports.parseCalcForLengthPercentage)(value);
+    }
+    return (0, exports.isLengthPercentage)(value) ? value : null;
+};
+exports.parseOptionalCalcOrLength = parseOptionalCalcOrLength;
 /**
  * Evaluate a calc() expression and convert to LengthPercentage token
  * Supports basic arithmetic: +, -, *, /
@@ -119,6 +172,9 @@ const getAbsoluteValueForTuple = (tuple, width, height) => {
 };
 exports.getAbsoluteValueForTuple = getAbsoluteValueForTuple;
 const getAbsoluteValue = (token, parent) => {
+    if ((0, exports.isCalcWithPercentage)(token)) {
+        return (token._calcPercentage / 100) * parent + token._calcPixelOffset;
+    }
     if (token.type === 16 /* TokenType.PERCENTAGE_TOKEN */) {
         return (token.number / 100) * parent;
     }
@@ -126,7 +182,11 @@ const getAbsoluteValue = (token, parent) => {
         switch (token.unit) {
             case 'rem':
             case 'em':
-                return 16 * token.number; // TODO use correct font-size
+                // NOTE: Assumes a 16px root font-size for rem/em units. A fully
+                // accurate implementation would require access to the element's
+                // computed font-size (em) or the root element's font-size (rem),
+                // which are not available in this pure-resolution function.
+                return 16 * token.number;
             case 'px':
             default:
                 return token.number;

package/dist/lib/dom/document-cloner.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.copyCSSStyles = exports.DocumentCloner = void 0;
-const node_parser_1 = require("./node-parser");
+exports.serializeDoctype = exports.copyCSSStyles = exports.DocumentCloner = void 0;
 const node_type_guards_1 = require("./node-type-guards");
 const parser_1 = require("../css/syntax/parser");
 const counter_1 = require("../css/types/functions/counter");
@@ -102,7 +101,7 @@ class DocumentCloner {
         // rawHTML is always a static, internally-generated string:
         // serializeDoctype(document.doctype) + '<html></html>'
         // No user-controlled input — safe for document.write in the sandbox iframe.
-        const rawHTML = serializeDoctype(document.doctype) + '<html></html>';
+        const rawHTML = (0, exports.serializeDoctype)(document.doctype) + '<html></html>';
         try {
             const ownerWindow = this.referenceElement.ownerDocument?.defaultView;
             const trustedTypesFactory = ownerWindow && ownerWindow.trustedTypes;
@@ -149,18 +148,18 @@ class DocumentCloner {
         if ((0, debugger_1.isDebugging)(node, 2 /* DebuggerType.CLONE */)) {
             debugger;
         }
-        if ((0, node_parser_1.isCanvasElement)(node)) {
+        if ((0, node_type_guards_1.isCanvasElement)(node)) {
             return this.createCanvasClone(node);
         }
-        if ((0, node_parser_1.isVideoElement)(node)) {
+        if ((0, node_type_guards_1.isVideoElement)(node)) {
             return this.createVideoClone(node);
         }
-        if ((0, node_parser_1.isStyleElement)(node)) {
+        if ((0, node_type_guards_1.isStyleElement)(node)) {
             return this.createStyleClone(node);
         }
         const clone = node.cloneNode(false);
-        if ((0, node_parser_1.isImageElement)(clone)) {
-            if ((0, node_parser_1.isImageElement)(node) && node.currentSrc && node.currentSrc !== node.src) {
+        if ((0, node_type_guards_1.isImageElement)(clone)) {
+            if ((0, node_type_guards_1.isImageElement)(node) && node.currentSrc && node.currentSrc !== node.src) {
                 clone.src = node.currentSrc;
                 clone.srcset = '';
             }
@@ -168,7 +167,7 @@ class DocumentCloner {
                 clone.loading = 'eager';
             }
         }
-        if ((0, node_parser_1.isCustomElement)(clone) && !(0, node_parser_1.isSVGElementNode)(clone)) {
+        if ((0, node_type_guards_1.isCustomElement)(clone) && !(0, node_type_guards_1.isSVGElementNode)(clone)) {
             return this.createCustomElementClone(clone);
         }
         return clone;
@@ -295,24 +294,24 @@ class DocumentCloner {
         this.slotCloner.cloneChildNodes(node, clone, copyStyles);
     }
     cloneNode(node, copyStyles) {
-        if ((0, node_parser_1.isTextNode)(node)) {
+        if ((0, node_type_guards_1.isTextNode)(node)) {
             return document.createTextNode(node.data);
         }
         if (!node.ownerDocument) {
             return node.cloneNode(false);
         }
         const window = node.ownerDocument.defaultView;
-        if (window && (0, node_parser_1.isElementNode)(node) && ((0, node_parser_1.isHTMLElementNode)(node) || (0, node_parser_1.isSVGElementNode)(node))) {
+        if (window && (0, node_type_guards_1.isElementNode)(node) && ((0, node_type_guards_1.isHTMLElementNode)(node) || (0, node_type_guards_1.isSVGElementNode)(node))) {
             const clone = this.createElementClone(node);
             clone.style.transitionProperty = 'none';
             const style = window.getComputedStyle(node);
             // Per CSS spec, replaced elements, void elements, and SVG elements
             // cannot have ::before / ::after pseudo-elements — skip these queries.
             const checkPseudoElements = (0, node_type_guards_1.canHavePseudoElements)(node);
-            if (this.referenceElement === node && (0, node_parser_1.isHTMLElementNode)(clone)) {
+            if (this.referenceElement === node && (0, node_type_guards_1.isHTMLElementNode)(clone)) {
                 this.clonedReferenceElement = clone;
             }
-            if ((0, node_parser_1.isBodyElement)(clone)) {
+            if ((0, node_type_guards_1.isBodyElement)(clone)) {
                 createPseudoHideStyles(clone, this.options.cspNonce);
             }
             const counters = this.counters.parse(new index_1.CSSParsedCounterDeclaration(this.context, style));
@@ -328,22 +327,22 @@ class DocumentCloner {
                     clone.appendChild(after);
                 }
             }
-            if ((0, node_parser_1.isCustomElement)(node)) {
+            if ((0, node_type_guards_1.isCustomElement)(node)) {
                 copyStyles = true;
             }
-            if (!(0, node_parser_1.isVideoElement)(node)) {
+            if (!(0, node_type_guards_1.isVideoElement)(node)) {
                 this.cloneChildNodes(node, clone, copyStyles);
             }
             this.counters.pop(counters);
-            if ((style && (this.options.copyStyles || (0, node_parser_1.isSVGElementNode)(node)) && !(0, node_parser_1.isIFrameElement)(node)) ||
+            if ((style && (this.options.copyStyles || (0, node_type_guards_1.isSVGElementNode)(node)) && !(0, node_type_guards_1.isIFrameElement)(node)) ||
                 copyStyles) {
                 (0, exports.copyCSSStyles)(style, clone);
             }
             if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
                 this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
             }
-            if (((0, node_parser_1.isTextareaElement)(node) || (0, node_parser_1.isSelectElement)(node)) &&
-                ((0, node_parser_1.isTextareaElement)(clone) || (0, node_parser_1.isSelectElement)(clone))) {
+            if (((0, node_type_guards_1.isTextareaElement)(node) || (0, node_type_guards_1.isSelectElement)(node)) &&
+                ((0, node_type_guards_1.isTextareaElement)(clone) || (0, node_type_guards_1.isSelectElement)(clone))) {
                 clone.value = node.value;
             }
             return clone;
@@ -404,9 +403,6 @@ class DocumentCloner {
                         anonymousReplacedElement.appendChild(document.createTextNode(text));
                     }
                 }
-                else {
-                    //   console.log('FUNCTION_TOKEN', token);
-                }
             }
             else if (token.type === 20 /* TokenType.IDENT_TOKEN */) {
                 switch (token.value) {
@@ -426,7 +422,7 @@ class DocumentCloner {
         const newClassName = pseudoElt === PseudoElementType.BEFORE
             ? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}`
             : ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
-        if ((0, node_parser_1.isSVGElementNode)(clone)) {
+        if ((0, node_type_guards_1.isSVGElementNode)(clone)) {
             clone.className.baseValue += newClassName;
         }
         else {
@@ -531,6 +527,10 @@ const copyCSSStyles = (style, target) => {
     return target;
 };
 exports.copyCSSStyles = copyCSSStyles;
+/**
+ * Serialise a document type declaration to an HTML string.
+ * @internal – exported for testing only, not part of the public API.
+ */
 const serializeDoctype = (doctype) => {
     let str = '';
     if (doctype) {
@@ -554,6 +554,7 @@ const serializeDoctype = (doctype) => {
     }
     return str;
 };
+exports.serializeDoctype = serializeDoctype;
 const restoreOwnerScroll = (ownerDocument, x, y) => {
     if (ownerDocument &&
         ownerDocument.defaultView &&

package/dist/lib/dom/node-parser.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseTree = exports.isVideoElement = exports.isTextNode = exports.isTextareaElement = exports.isSVGElementNode = exports.isSVGElement = exports.isStyleElement = exports.isSlotElement = exports.isSelectElement = exports.isScriptElement = exports.isOLElement = exports.isLIElement = exports.isInputElement = exports.isImageElement = exports.isIFrameElement = exports.isHTMLElementNode = exports.isHTMLElement = exports.isElementNode = exports.isCustomElement = exports.isCanvasElement = exports.isBodyElement = void 0;
+exports.parseTree = void 0;
 const element_container_1 = require("./element-container");
 const text_container_1 = require("./text-container");
 const image_element_container_1 = require("./replaced-elements/image-element-container");
@@ -13,26 +13,6 @@ const select_element_container_1 = require("./elements/select-element-container"
 const textarea_element_container_1 = require("./elements/textarea-element-container");
 const iframe_element_container_1 = require("./replaced-elements/iframe-element-container");
 const node_type_guards_1 = require("./node-type-guards");
-Object.defineProperty(exports, "isBodyElement", { enumerable: true, get: function () { return node_type_guards_1.isBodyElement; } });
-Object.defineProperty(exports, "isCanvasElement", { enumerable: true, get: function () { return node_type_guards_1.isCanvasElement; } });
-Object.defineProperty(exports, "isCustomElement", { enumerable: true, get: function () { return node_type_guards_1.isCustomElement; } });
-Object.defineProperty(exports, "isElementNode", { enumerable: true, get: function () { return node_type_guards_1.isElementNode; } });
-Object.defineProperty(exports, "isHTMLElement", { enumerable: true, get: function () { return node_type_guards_1.isHTMLElement; } });
-Object.defineProperty(exports, "isHTMLElementNode", { enumerable: true, get: function () { return node_type_guards_1.isHTMLElementNode; } });
-Object.defineProperty(exports, "isIFrameElement", { enumerable: true, get: function () { return node_type_guards_1.isIFrameElement; } });
-Object.defineProperty(exports, "isImageElement", { enumerable: true, get: function () { return node_type_guards_1.isImageElement; } });
-Object.defineProperty(exports, "isInputElement", { enumerable: true, get: function () { return node_type_guards_1.isInputElement; } });
-Object.defineProperty(exports, "isLIElement", { enumerable: true, get: function () { return node_type_guards_1.isLIElement; } });
-Object.defineProperty(exports, "isOLElement", { enumerable: true, get: function () { return node_type_guards_1.isOLElement; } });
-Object.defineProperty(exports, "isScriptElement", { enumerable: true, get: function () { return node_type_guards_1.isScriptElement; } });
-Object.defineProperty(exports, "isSelectElement", { enumerable: true, get: function () { return node_type_guards_1.isSelectElement; } });
-Object.defineProperty(exports, "isSlotElement", { enumerable: true, get: function () { return node_type_guards_1.isSlotElement; } });
-Object.defineProperty(exports, "isStyleElement", { enumerable: true, get: function () { return node_type_guards_1.isStyleElement; } });
-Object.defineProperty(exports, "isSVGElement", { enumerable: true, get: function () { return node_type_guards_1.isSVGElement; } });
-Object.defineProperty(exports, "isSVGElementNode", { enumerable: true, get: function () { return node_type_guards_1.isSVGElementNode; } });
-Object.defineProperty(exports, "isTextareaElement", { enumerable: true, get: function () { return node_type_guards_1.isTextareaElement; } });
-Object.defineProperty(exports, "isTextNode", { enumerable: true, get: function () { return node_type_guards_1.isTextNode; } });
-Object.defineProperty(exports, "isVideoElement", { enumerable: true, get: function () { return node_type_guards_1.isVideoElement; } });
 const bitwise_1 = require("../core/bitwise");
 const LIST_OWNERS = ['OL', 'UL', 'MENU'];
 const parseNodeTree = (context, node, parent, root) => {

package/dist/lib/dom/slot-cloner.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SlotCloner = exports.IGNORE_ATTRIBUTE = void 0;
-const node_parser_1 = require("./node-parser");
+const node_type_guards_1 = require("./node-type-guards");
 /** Exported for reuse in document-cloner.ts */
 exports.IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
 /**
@@ -43,8 +43,8 @@ class SlotCloner {
      * Filters out: scripts, ignored elements, and optionally styles.
      */
     shouldCloneChild(child) {
-        return (!(0, node_parser_1.isElementNode)(child) ||
-            (!(0, node_parser_1.isScriptElement)(child) &&
+        return (!(0, node_type_guards_1.isElementNode)(child) ||
+            (!(0, node_type_guards_1.isScriptElement)(child) &&
                 !child.hasAttribute(exports.IGNORE_ATTRIBUTE) &&
                 (typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child))));
     }
@@ -52,7 +52,7 @@ class SlotCloner {
      * Check if a style element should be cloned based on copyStyles option.
      */
     shouldCloneStyleElement(child) {
-        return !this.options.copyStyles || !(0, node_parser_1.isElementNode)(child) || !(0, node_parser_1.isStyleElement)(child);
+        return !this.options.copyStyles || !(0, node_type_guards_1.isElementNode)(child) || !(0, node_type_guards_1.isStyleElement)(child);
     }
     /**
      * Safely append a cloned child to a target, applying all filtering rules.
@@ -82,7 +82,7 @@ class SlotCloner {
      * Handle cloning of a slot element, including assigned nodes or fallback content.
      */
     cloneSlotElement(slot, targetShadowRoot, copyStyles) {
-        if (!(0, node_parser_1.isSlotElement)(slot)) {
+        if (!(0, node_type_guards_1.isSlotElement)(slot)) {
             return;
         }
         const slotElement = slot;
@@ -113,7 +113,7 @@ class SlotCloner {
      */
     cloneShadowDOMChildren(shadowRoot, targetShadowRoot, copyStyles) {
         for (let child = shadowRoot.firstChild; child; child = child.nextSibling) {
-            if ((0, node_parser_1.isElementNode)(child) && (0, node_parser_1.isSlotElement)(child)) {
+            if ((0, node_type_guards_1.isElementNode)(child) && (0, node_type_guards_1.isSlotElement)(child)) {
                 // Handle slot elements specially
                 this.cloneSlotElement(child, targetShadowRoot, copyStyles);
             }
@@ -135,7 +135,7 @@ class SlotCloner {
      * Clone slot element as light DOM when shadow root creation failed.
      */
     cloneSlotElementAsLightDOM(slot, clone, copyStyles) {
-        if (!(0, node_parser_1.isSlotElement)(slot)) {
+        if (!(0, node_type_guards_1.isSlotElement)(slot)) {
             return;
         }
         const slotElement = slot;
@@ -164,7 +164,7 @@ class SlotCloner {
      */
     cloneShadowDOMAsLightDOM(shadowRoot, clone, copyStyles) {
         for (let child = shadowRoot.firstChild; child; child = child.nextSibling) {
-            if ((0, node_parser_1.isElementNode)(child) && (0, node_parser_1.isSlotElement)(child)) {
+            if ((0, node_type_guards_1.isElementNode)(child) && (0, node_type_guards_1.isSlotElement)(child)) {
                 this.cloneSlotElementAsLightDOM(child, clone, copyStyles);
             }
             else {

package/dist/lib/render/background.js

@@ -75,7 +75,10 @@ const calculateBackgroundSize = (size, [intrinsicWidth, intrinsicHeight, intrins
         if (!hasIntrinsicProportion && !hasIntrinsicDimensions) {
             return [bounds.width, bounds.height];
         }
-        // TODO If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
+        // NOTE (known gap): Per the CSS spec, images with intrinsic proportions
+        // but no intrinsic dimensions should be rendered as if 'contain' had been
+        // specified. This branch is not yet implemented — the image will render
+        // at the size of the background positioning area instead.
         // If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension.
         // The other dimension is computed using the specified dimension and the intrinsic proportions.
         if (hasIntrinsicDimensions && hasIntrinsicProportion) {

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

@@ -18,6 +18,7 @@ const length_percentage_1 = require("../../css/types/length-percentage");
 const color_utilities_1 = require("../../css/types/color-utilities");
 const image_rendering_1 = require("../../css/property-descriptors/image-rendering");
 const canvas_path_1 = require("./canvas-path");
+const lru_map_1 = require("../../core/lru-map");
 /**
  * Background Renderer
  *
@@ -31,11 +32,8 @@ class BackgroundRenderer {
          * CanvasPatterns are tied to the rendering context and must not be
          * shared across different render passes. This cache lives for the
          * duration of one html2canvas() call.
-         *
-         * Also reused for linear-gradient and repeating-linear-gradient
-         * pattern canvases to avoid redundant offscreen canvas allocation.
          */
-        this.patternCache = new Map();
+        this.patternCache = new lru_map_1.LRUMap(50);
         this.ctx = deps.ctx;
         this.context = deps.context;
         this.canvas = deps.canvas;
@@ -102,13 +100,22 @@ class BackgroundRenderer {
                 imageHeight,
                 imageWidth / imageHeight
             ]);
-            // Cache key: URL + resized dimensions + imageRendering (pattern is dependent on all three)
-            const cacheKey = `${url}|${Math.round(width)}x${Math.round(height)}|${container.styles.imageRendering}`;
-            let pattern = this.lruGet(this.patternCache, cacheKey);
+            // Determine repetition mode based on CSS background-repeat
+            const repeat = (0, background_1.getBackgroundValueForIndex)(container.styles.backgroundRepeat, index);
+            const repeatMode = repeat === 1 /* BACKGROUND_REPEAT.NO_REPEAT */
+                ? 'no-repeat'
+                : repeat === 2 /* BACKGROUND_REPEAT.REPEAT_X */
+                    ? 'repeat-x'
+                    : repeat === 3 /* BACKGROUND_REPEAT.REPEAT_Y */
+                        ? 'repeat-y'
+                        : 'repeat';
+            // Cache key: URL + resized dimensions + imageRendering + repeat mode (pattern is dependent on all four)
+            const cacheKey = `${url}|${Math.round(width)}x${Math.round(height)}|${container.styles.imageRendering}|${repeatMode}`;
+            let pattern = this.patternCache.get(cacheKey);
             if (!pattern) {
                 const resized = this.resizeImage(image, width, height, container.styles.imageRendering);
-                pattern = this.ctx.createPattern(resized, 'repeat');
-                this.lruSet(this.patternCache, cacheKey, pattern);
+                pattern = this.ctx.createPattern(resized, repeatMode);
+                this.patternCache.set(cacheKey, pattern);
             }
             this.renderRepeat(path, pattern, x, y);
         }
@@ -143,7 +150,7 @@ class BackgroundRenderer {
         const ownerDocument = this.canvas.ownerDocument ?? document;
         // Cache key for this repeating gradient pattern
         const cacheKey = `rlg|${backgroundImage.angle}|${Math.round(patternLength)}|${JSON.stringify(backgroundImage.stops)}`;
-        let pattern = this.lruGet(this.patternCache, cacheKey);
+        let pattern = this.patternCache.get(cacheKey);
         if (!pattern) {
             const canvas = ownerDocument.createElement('canvas');
             // Create a canvas large enough to hold one full repeating unit
@@ -163,7 +170,7 @@ class BackgroundRenderer {
             ctx.fillRect(0, 0, canvasSize, canvasSize);
             if (canvasSize > 0) {
                 pattern = this.ctx.createPattern(canvas, 'repeat');
-                this.lruSet(this.patternCache, cacheKey, pattern);
+                this.patternCache.set(cacheKey, pattern);
             }
         }
         if (pattern) {
@@ -178,7 +185,7 @@ class BackgroundRenderer {
         const [lineLength, x0, x1, y0, y1] = (0, gradient_1.calculateGradientDirection)(backgroundImage.angle, width, height);
         // Cache key: angle + dimensions + serialised colour stops
         const cacheKey = `lg|${backgroundImage.angle}|${Math.round(width)}x${Math.round(height)}|${JSON.stringify(backgroundImage.stops)}`;
-        let pattern = this.lruGet(this.patternCache, cacheKey);
+        let pattern = this.patternCache.get(cacheKey);
         if (!pattern) {
             const ownerDocument = this.canvas.ownerDocument ?? document;
             const canvas = ownerDocument.createElement('canvas');
@@ -194,7 +201,7 @@ class BackgroundRenderer {
             ctx.fillRect(0, 0, width, height);
             if (width > 0 && height > 0) {
                 pattern = this.ctx.createPattern(canvas, 'repeat');
-                this.lruSet(this.patternCache, cacheKey, pattern);
+                this.patternCache.set(cacheKey, pattern);
             }
         }
         if (pattern) {
@@ -219,7 +226,7 @@ class BackgroundRenderer {
         if (rx > 0 && ry > 0) {
             // Cache key for radial gradient: position + radii + colour stops
             const cacheKey = `rg|${Math.round(x)}x${Math.round(y)}|${Math.round(rx)}x${Math.round(ry)}|${JSON.stringify(backgroundImage.stops)}`;
-            let pattern = this.lruGet(this.patternCache, cacheKey);
+            let pattern = this.patternCache.get(cacheKey);
             if (!pattern) {
                 const ownerDocument = this.canvas.ownerDocument ?? document;
                 const size = Math.ceil(Math.max(rx, ry) * 2);
@@ -236,7 +243,7 @@ class BackgroundRenderer {
                         offCtx.scale(1, ry / rx);
                     offCtx.fillRect(0, 0, offRadius * 2, offRadius * 2);
                     pattern = this.ctx.createPattern(offscreen, 'no-repeat');
-                    this.lruSet(this.patternCache, cacheKey, pattern);
+                    this.patternCache.set(cacheKey, pattern);
                 }
             }
             if (pattern) {
@@ -275,10 +282,11 @@ class BackgroundRenderer {
      * @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;
-        // }
+        // NOTE: Early-return optimisation disabled per upstream investigation
+        // (https://github.com/niklasvh/html2canvas/pull/2911).
+        // Returning the original image when dimensions match caused subtle
+        // rendering issues — a resized copy through a fresh offscreen canvas
+        // is always safer, even when width/height are unchanged.
         const ownerDocument = this.canvas.ownerDocument ?? document;
         const canvas = ownerDocument.createElement('canvas');
         canvas.width = Math.max(1, width);
@@ -315,25 +323,5 @@ class BackgroundRenderer {
     path(paths) {
         (0, canvas_path_1.createCanvasPath)(this.ctx, paths);
     }
-    /**
-     * LRU-aware get: returns value and promotes the entry to end of Map.
-     */
-    lruGet(cache, key) {
-        const value = cache.get(key);
-        if (value !== undefined) {
-            cache.delete(key);
-            cache.set(key, value);
-        }
-        return value;
-    }
-    /** LRU-aware set for CanvasPattern caches. Evicts oldest entry on overflow. */
-    lruSet(cache, key, value) {
-        if (cache.size >= BackgroundRenderer.PATTERN_CACHE_MAX) {
-            const oldestKey = cache.keys().next().value;
-            cache.delete(oldestKey);
-        }
-        cache.set(key, value);
-    }
 }
 exports.BackgroundRenderer = BackgroundRenderer;
-BackgroundRenderer.PATTERN_CACHE_MAX = 50;

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

@@ -16,7 +16,7 @@ const effects_renderer_1 = require("./effects-renderer");
 const canvas_path_1 = require("./canvas-path");
 const object_fit_1 = require("../object-fit");
 const content_renderer_1 = require("./content-renderer");
-const MASK_OFFSET = 10000;
+const constants_1 = require("../../core/constants");
 class CanvasRenderer {
     constructor(context, options) {
         this.context = context;
@@ -63,7 +63,7 @@ class CanvasRenderer {
         this.effectsRenderer = new effects_renderer_1.EffectsRenderer({ ctx: this.ctx }, { path: (paths) => this.path(paths) });
         this.textRenderer = new text_renderer_1.TextRenderer({
             ctx: this.ctx,
-            context: this.context,
+            fontMetrics: this.fontMetrics,
             options: { scale: options.scale }
         });
         this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
@@ -231,7 +231,7 @@ class CanvasRenderer {
                 .forEach((shadow) => {
                 this.ctx.save();
                 const borderBoxArea = (0, bound_curves_1.calculateBorderBoxPath)(paint.curves);
-                const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
+                const maskOffset = shadow.inset ? 0 : constants_1.SHADOW_MASK_OFFSET;
                 const shadowPaintingArea = (0, path_1.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);