@ohos-ports/html2canvas-pro 0.0.0-stage → 2.3.2-beta.0

package/dist/lib/render/bound-curves.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculatePaddingBoxPath = exports.calculateContentBoxPath = exports.calculateBorderBoxPath = exports.BoundCurves = void 0;
+const length_percentage_1 = require("../css/types/length-percentage");
+const vector_1 = require("./vector");
+const bezier_curve_1 = require("./bezier-curve");
+class BoundCurves {
+    constructor(element) {
+        const styles = element.styles;
+        const bounds = element.bounds;
+        let [tlh, tlv] = (0, length_percentage_1.getAbsoluteValueForTuple)(styles.borderTopLeftRadius, bounds.width, bounds.height);
+        let [trh, trv] = (0, length_percentage_1.getAbsoluteValueForTuple)(styles.borderTopRightRadius, bounds.width, bounds.height);
+        let [brh, brv] = (0, length_percentage_1.getAbsoluteValueForTuple)(styles.borderBottomRightRadius, bounds.width, bounds.height);
+        let [blh, blv] = (0, length_percentage_1.getAbsoluteValueForTuple)(styles.borderBottomLeftRadius, bounds.width, bounds.height);
+        const factors = [];
+        factors.push((tlh + trh) / bounds.width);
+        factors.push((blh + brh) / bounds.width);
+        factors.push((tlv + blv) / bounds.height);
+        factors.push((trv + brv) / bounds.height);
+        const maxFactor = Math.max(...factors);
+        if (maxFactor > 1) {
+            tlh /= maxFactor;
+            tlv /= maxFactor;
+            trh /= maxFactor;
+            trv /= maxFactor;
+            brh /= maxFactor;
+            brv /= maxFactor;
+            blh /= maxFactor;
+            blv /= maxFactor;
+        }
+        const topWidth = bounds.width - trh;
+        const rightHeight = bounds.height - brv;
+        const bottomWidth = bounds.width - brh;
+        const leftHeight = bounds.height - blv;
+        const borderTopWidth = styles.borderTopWidth;
+        const borderRightWidth = styles.borderRightWidth;
+        const borderBottomWidth = styles.borderBottomWidth;
+        const borderLeftWidth = styles.borderLeftWidth;
+        const paddingTop = (0, length_percentage_1.getAbsoluteValue)(styles.paddingTop, element.bounds.width);
+        const paddingRight = (0, length_percentage_1.getAbsoluteValue)(styles.paddingRight, element.bounds.width);
+        const paddingBottom = (0, length_percentage_1.getAbsoluteValue)(styles.paddingBottom, element.bounds.width);
+        const paddingLeft = (0, length_percentage_1.getAbsoluteValue)(styles.paddingLeft, element.bounds.width);
+        this.topLeftBorderDoubleOuterBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3, tlh - borderLeftWidth / 3, tlv - borderTopWidth / 3, CORNER.TOP_LEFT)
+                : new vector_1.Vector(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3);
+        this.topRightBorderDoubleOuterBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left + topWidth, bounds.top + borderTopWidth / 3, trh - borderRightWidth / 3, trv - borderTopWidth / 3, CORNER.TOP_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + borderTopWidth / 3);
+        this.bottomRightBorderDoubleOuterBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - borderRightWidth / 3, brv - borderBottomWidth / 3, CORNER.BOTTOM_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3);
+        this.bottomLeftBorderDoubleOuterBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(bounds.left + borderLeftWidth / 3, bounds.top + leftHeight, blh - borderLeftWidth / 3, blv - borderBottomWidth / 3, CORNER.BOTTOM_LEFT)
+                : new vector_1.Vector(bounds.left + borderLeftWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3);
+        this.topLeftBorderDoubleInnerBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3, tlh - (borderLeftWidth * 2) / 3, tlv - (borderTopWidth * 2) / 3, CORNER.TOP_LEFT)
+                : new vector_1.Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3);
+        this.topRightBorderDoubleInnerBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left + topWidth, bounds.top + (borderTopWidth * 2) / 3, trh - (borderRightWidth * 2) / 3, trv - (borderTopWidth * 2) / 3, CORNER.TOP_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - (borderRightWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3);
+        this.bottomRightBorderDoubleInnerBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - (borderRightWidth * 2) / 3, brv - (borderBottomWidth * 2) / 3, CORNER.BOTTOM_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - (borderRightWidth * 2) / 3, bounds.top + bounds.height - (borderBottomWidth * 2) / 3);
+        this.bottomLeftBorderDoubleInnerBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + leftHeight, blh - (borderLeftWidth * 2) / 3, blv - (borderBottomWidth * 2) / 3, CORNER.BOTTOM_LEFT)
+                : new vector_1.Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + bounds.height - (borderBottomWidth * 2) / 3);
+        this.topLeftBorderStroke =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2, tlh - borderLeftWidth / 2, tlv - borderTopWidth / 2, CORNER.TOP_LEFT)
+                : new vector_1.Vector(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2);
+        this.topRightBorderStroke =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left + topWidth, bounds.top + borderTopWidth / 2, trh - borderRightWidth / 2, trv - borderTopWidth / 2, CORNER.TOP_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + borderTopWidth / 2);
+        this.bottomRightBorderStroke =
+            brh > 0 || brv > 0
+                ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - borderRightWidth / 2, brv - borderBottomWidth / 2, CORNER.BOTTOM_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2);
+        this.bottomLeftBorderStroke =
+            blh > 0 || blv > 0
+                ? getCurvePoints(bounds.left + borderLeftWidth / 2, bounds.top + leftHeight, blh - borderLeftWidth / 2, blv - borderBottomWidth / 2, CORNER.BOTTOM_LEFT)
+                : new vector_1.Vector(bounds.left + borderLeftWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2);
+        this.topLeftBorderBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT)
+                : new vector_1.Vector(bounds.left, bounds.top);
+        this.topRightBorderBox =
+            trh > 0 || trv > 0
+                ? getCurvePoints(bounds.left + topWidth, bounds.top, trh, trv, CORNER.TOP_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width, bounds.top);
+        this.bottomRightBorderBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh, brv, CORNER.BOTTOM_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height);
+        this.bottomLeftBorderBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(bounds.left, bounds.top + leftHeight, blh, blv, CORNER.BOTTOM_LEFT)
+                : new vector_1.Vector(bounds.left, bounds.top + bounds.height);
+        this.topLeftPaddingBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + borderTopWidth, Math.max(0, tlh - borderLeftWidth), Math.max(0, tlv - borderTopWidth), CORNER.TOP_LEFT)
+                : new vector_1.Vector(bounds.left + borderLeftWidth, bounds.top + borderTopWidth);
+        this.topRightPaddingBox =
+            trh > 0 || trv > 0
+                ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width - borderRightWidth), bounds.top + borderTopWidth, topWidth > bounds.width + borderRightWidth ? 0 : Math.max(0, trh - borderRightWidth), Math.max(0, trv - borderTopWidth), CORNER.TOP_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + borderTopWidth);
+        this.bottomRightPaddingBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - borderLeftWidth), bounds.top + Math.min(rightHeight, bounds.height - borderBottomWidth), Math.max(0, brh - borderRightWidth), Math.max(0, brv - borderBottomWidth), CORNER.BOTTOM_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + bounds.height - borderBottomWidth);
+        this.bottomLeftPaddingBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + Math.min(leftHeight, bounds.height - borderBottomWidth), Math.max(0, blh - borderLeftWidth), Math.max(0, blv - borderBottomWidth), CORNER.BOTTOM_LEFT)
+                : new vector_1.Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth);
+        this.topLeftContentBox =
+            tlh > 0 || tlv > 0
+                ? getCurvePoints(bounds.left + borderLeftWidth + paddingLeft, bounds.top + borderTopWidth + paddingTop, Math.max(0, tlh - (borderLeftWidth + paddingLeft)), Math.max(0, tlv - (borderTopWidth + paddingTop)), CORNER.TOP_LEFT)
+                : new vector_1.Vector(bounds.left + borderLeftWidth + paddingLeft, bounds.top + borderTopWidth + paddingTop);
+        this.topRightContentBox =
+            trh > 0 || trv > 0
+                ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth + paddingLeft), bounds.top + borderTopWidth + paddingTop, topWidth > bounds.width + borderLeftWidth + paddingLeft ? 0 : trh - borderLeftWidth + paddingLeft, trv - (borderTopWidth + paddingTop), CORNER.TOP_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - (borderRightWidth + paddingRight), bounds.top + borderTopWidth + paddingTop);
+        this.bottomRightContentBox =
+            brh > 0 || brv > 0
+                ? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - (borderLeftWidth + paddingLeft)), bounds.top + Math.min(rightHeight, bounds.height + borderTopWidth + paddingTop), Math.max(0, brh - (borderRightWidth + paddingRight)), brv - (borderBottomWidth + paddingBottom), CORNER.BOTTOM_RIGHT)
+                : new vector_1.Vector(bounds.left + bounds.width - (borderRightWidth + paddingRight), bounds.top + bounds.height - (borderBottomWidth + paddingBottom));
+        this.bottomLeftContentBox =
+            blh > 0 || blv > 0
+                ? getCurvePoints(bounds.left + borderLeftWidth + paddingLeft, bounds.top + leftHeight, Math.max(0, blh - (borderLeftWidth + paddingLeft)), blv - (borderBottomWidth + paddingBottom), CORNER.BOTTOM_LEFT)
+                : new vector_1.Vector(bounds.left + borderLeftWidth + paddingLeft, bounds.top + bounds.height - (borderBottomWidth + paddingBottom));
+    }
+}
+exports.BoundCurves = BoundCurves;
+var CORNER;
+(function (CORNER) {
+    CORNER[CORNER["TOP_LEFT"] = 0] = "TOP_LEFT";
+    CORNER[CORNER["TOP_RIGHT"] = 1] = "TOP_RIGHT";
+    CORNER[CORNER["BOTTOM_RIGHT"] = 2] = "BOTTOM_RIGHT";
+    CORNER[CORNER["BOTTOM_LEFT"] = 3] = "BOTTOM_LEFT";
+})(CORNER || (CORNER = {}));
+const getCurvePoints = (x, y, r1, r2, position) => {
+    const kappa = 4 * ((Math.sqrt(2) - 1) / 3);
+    const ox = r1 * kappa; // control point offset horizontal
+    const oy = r2 * kappa; // control point offset vertical
+    const xm = x + r1; // x-middle
+    const ym = y + r2; // y-middle
+    switch (position) {
+        case CORNER.TOP_LEFT:
+            return new bezier_curve_1.BezierCurve(new vector_1.Vector(x, ym), new vector_1.Vector(x, ym - oy), new vector_1.Vector(xm - ox, y), new vector_1.Vector(xm, y));
+        case CORNER.TOP_RIGHT:
+            return new bezier_curve_1.BezierCurve(new vector_1.Vector(x, y), new vector_1.Vector(x + ox, y), new vector_1.Vector(xm, ym - oy), new vector_1.Vector(xm, ym));
+        case CORNER.BOTTOM_RIGHT:
+            return new bezier_curve_1.BezierCurve(new vector_1.Vector(xm, y), new vector_1.Vector(xm, y + oy), new vector_1.Vector(x + ox, ym), new vector_1.Vector(x, ym));
+        case CORNER.BOTTOM_LEFT:
+        default:
+            return new bezier_curve_1.BezierCurve(new vector_1.Vector(xm, ym), new vector_1.Vector(xm - ox, ym), new vector_1.Vector(x, y + oy), new vector_1.Vector(x, y));
+    }
+};
+const calculateBorderBoxPath = (curves) => {
+    return [curves.topLeftBorderBox, curves.topRightBorderBox, curves.bottomRightBorderBox, curves.bottomLeftBorderBox];
+};
+exports.calculateBorderBoxPath = calculateBorderBoxPath;
+const calculateContentBoxPath = (curves) => {
+    return [
+        curves.topLeftContentBox,
+        curves.topRightContentBox,
+        curves.bottomRightContentBox,
+        curves.bottomLeftContentBox
+    ];
+};
+exports.calculateContentBoxPath = calculateContentBoxPath;
+const calculatePaddingBoxPath = (curves) => {
+    return [
+        curves.topLeftPaddingBox,
+        curves.topRightPaddingBox,
+        curves.bottomRightPaddingBox,
+        curves.bottomLeftPaddingBox
+    ];
+};
+exports.calculatePaddingBoxPath = calculatePaddingBoxPath;

package/dist/lib/render/box-sizing.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contentBox = exports.paddingBox = void 0;
+const length_percentage_1 = require("../css/types/length-percentage");
+const paddingBox = (element) => {
+    const bounds = element.bounds;
+    const styles = element.styles;
+    return bounds.add(styles.borderLeftWidth, styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth), -(styles.borderTopWidth + styles.borderBottomWidth));
+};
+exports.paddingBox = paddingBox;
+const contentBox = (element) => {
+    const styles = element.styles;
+    const bounds = element.bounds;
+    const paddingLeft = (0, length_percentage_1.getAbsoluteValue)(styles.paddingLeft, bounds.width);
+    const paddingRight = (0, length_percentage_1.getAbsoluteValue)(styles.paddingRight, bounds.width);
+    const paddingTop = (0, length_percentage_1.getAbsoluteValue)(styles.paddingTop, bounds.width);
+    const paddingBottom = (0, length_percentage_1.getAbsoluteValue)(styles.paddingBottom, bounds.width);
+    return bounds.add(paddingLeft + styles.borderLeftWidth, paddingTop + styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth + paddingLeft + paddingRight), -(styles.borderTopWidth + styles.borderBottomWidth + paddingTop + paddingBottom));
+};
+exports.contentBox = contentBox;

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

@@ -0,0 +1,327 @@
+"use strict";
+/**
+ * Background Renderer
+ *
+ * Handles rendering of element backgrounds including:
+ * - Background colors
+ * - Background images (URL)
+ * - Linear gradients
+ * - Radial gradients
+ * - Background patterns and repeats
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackgroundRenderer = void 0;
+const image_1 = require("../../css/types/image");
+const background_1 = require("../background");
+const gradient_1 = require("../../css/types/functions/gradient");
+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
+ *
+ * Specialized renderer for element backgrounds.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+class BackgroundRenderer {
+    constructor(deps) {
+        /**
+         * Instance-level LRU cache for background-image patterns.
+         * 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.
+         */
+        this.patternCache = new lru_map_1.LRUMap(50);
+        this.ctx = deps.ctx;
+        this.context = deps.context;
+        this.canvas = deps.canvas;
+    }
+    /**
+     * 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;
+        const blendModes = container.styles.backgroundBlendMode;
+        let layerCount = 0;
+        for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
+            // Save context and apply blend mode for non-first layers
+            if (layerCount > 0) {
+                const blendMode = blendModes[layerCount] ?? blendModes[0] ?? 'normal';
+                if (blendMode !== 'normal') {
+                    this.ctx.save();
+                    this.ctx.globalCompositeOperation = blendMode;
+                }
+            }
+            if (backgroundImage.type === 0 /* CSSImageType.URL */) {
+                await this.renderBackgroundURLImage(container, backgroundImage, index);
+            }
+            else if ((0, image_1.isLinearGradient)(backgroundImage)) {
+                this.renderLinearGradient(container, backgroundImage, index);
+            }
+            else if ((0, image_1.isRepeatingLinearGradient)(backgroundImage)) {
+                this.renderRepeatingLinearGradient(container, backgroundImage, index);
+            }
+            else if ((0, image_1.isRadialGradient)(backgroundImage)) {
+                this.renderRadialGradient(container, backgroundImage, index);
+            }
+            if (layerCount > 0) {
+                const blendMode = blendModes[layerCount] ?? blendModes[0] ?? 'normal';
+                if (blendMode !== 'normal') {
+                    this.ctx.restore();
+                }
+            }
+            index--;
+            layerCount++;
+        }
+    }
+    /**
+     * 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);
+        }
+        catch (e) {
+            this.context.logger.error(`Error loading background-image ${url}`);
+            this.context.onError?.(e instanceof Error ? e : new Error(String(e)));
+        }
+        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] = (0, background_1.calculateBackgroundRendering)(container, index, [
+                imageWidth,
+                imageHeight,
+                imageWidth / imageHeight
+            ]);
+            // 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, repeatMode);
+                this.patternCache.set(cacheKey, pattern);
+            }
+            this.renderRepeat(path, pattern, x, y);
+        }
+    }
+    /**
+     * Render a repeating linear gradient background.
+     * Renders one cycle of the gradient to a pattern canvas, then fills
+     * the background area using createPattern('repeat').
+     */
+    renderRepeatingLinearGradient(container, backgroundImage, index) {
+        const [path, x, y, width, height] = (0, background_1.calculateBackgroundRendering)(container, index, [null, null, null]);
+        const [lineLength, x0, x1, y0, y1] = (0, gradient_1.calculateGradientDirection)(backgroundImage.angle, width, height);
+        // Determine the repeating pattern length from color stops
+        const processedStops = (0, gradient_1.processColorStops)(backgroundImage.stops, lineLength || 1);
+        const lastStop = processedStops[processedStops.length - 1];
+        const firstStop = processedStops[0];
+        const patternLength = lastStop.stop - firstStop.stop;
+        if (patternLength <= 0) {
+            // Fallback: render as normal linear gradient
+            this.renderLinearGradient(container, backgroundImage, index);
+            return;
+        }
+        // Scale direction vectors to match the pattern length
+        const dirX = x1 - x0;
+        const dirY = y1 - y0;
+        const totalLength = Math.sqrt(dirX * dirX + dirY * dirY);
+        const scale = patternLength / (totalLength || 1);
+        const pX0 = x0;
+        const pY0 = y0;
+        const pX1 = x0 + dirX * scale;
+        const pY1 = y0 + dirY * scale;
+        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.patternCache.get(cacheKey);
+        if (!pattern) {
+            const canvas = ownerDocument.createElement('canvas');
+            // Create a canvas large enough to hold one full repeating unit
+            const canvasSize = Math.max(1, Math.ceil(patternLength));
+            canvas.width = canvasSize;
+            canvas.height = canvasSize;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return;
+            }
+            const gradient = ctx.createLinearGradient(pX0 - x, pY0 - y, pX1 - x, pY1 - y);
+            // Normalize stops to [0, 1] range for one repeating unit
+            processedStops.forEach((colorStop) => {
+                gradient.addColorStop((colorStop.stop - firstStop.stop) / patternLength, (0, color_utilities_1.asString)(colorStop.color));
+            });
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvasSize, canvasSize);
+            if (canvasSize > 0) {
+                pattern = this.ctx.createPattern(canvas, 'repeat');
+                this.patternCache.set(cacheKey, pattern);
+            }
+        }
+        if (pattern) {
+            this.renderRepeat(path, pattern, x, y);
+        }
+    }
+    /**
+     * Render a linear gradient background
+     */
+    renderLinearGradient(container, backgroundImage, index) {
+        const [path, x, y, width, height] = (0, background_1.calculateBackgroundRendering)(container, index, [null, null, null]);
+        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.patternCache.get(cacheKey);
+        if (!pattern) {
+            const ownerDocument = this.canvas.ownerDocument ?? document;
+            const canvas = ownerDocument.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                return;
+            }
+            const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+            (0, gradient_1.processColorStops)(backgroundImage.stops, lineLength || 1).forEach((colorStop) => gradient.addColorStop(colorStop.stop, (0, color_utilities_1.asString)(colorStop.color)));
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+            if (width > 0 && height > 0) {
+                pattern = this.ctx.createPattern(canvas, 'repeat');
+                this.patternCache.set(cacheKey, pattern);
+            }
+        }
+        if (pattern) {
+            this.renderRepeat(path, pattern, x, y);
+        }
+    }
+    /**
+     * Render a radial gradient background
+     */
+    renderRadialGradient(container, backgroundImage, index) {
+        const [path, left, top, width, height] = (0, background_1.calculateBackgroundRendering)(container, index, [null, null, null]);
+        const position = backgroundImage.position.length === 0 ? [length_percentage_1.FIFTY_PERCENT] : backgroundImage.position;
+        const x = (0, length_percentage_1.getAbsoluteValue)(position[0], width);
+        const y = (0, length_percentage_1.getAbsoluteValue)(position[position.length - 1], height);
+        let [rx, ry] = (0, gradient_1.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) {
+            // 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.patternCache.get(cacheKey);
+            if (!pattern) {
+                const ownerDocument = this.canvas.ownerDocument ?? document;
+                const size = Math.ceil(Math.max(rx, ry) * 2);
+                const offscreen = ownerDocument.createElement('canvas');
+                offscreen.width = size;
+                offscreen.height = size;
+                const offCtx = offscreen.getContext('2d');
+                if (offCtx) {
+                    const offRadius = Math.max(rx, ry);
+                    const gradient = offCtx.createRadialGradient(offRadius, offRadius, 0, offRadius, offRadius, offRadius);
+                    (0, gradient_1.processColorStops)(backgroundImage.stops, offRadius * 2).forEach((s) => gradient.addColorStop(s.stop, (0, color_utilities_1.asString)(s.color)));
+                    offCtx.fillStyle = gradient;
+                    if (rx !== ry)
+                        offCtx.scale(1, ry / rx);
+                    offCtx.fillRect(0, 0, offRadius * 2, offRadius * 2);
+                    pattern = this.ctx.createPattern(offscreen, 'no-repeat');
+                    this.patternCache.set(cacheKey, pattern);
+                }
+            }
+            if (pattern) {
+                this.path(path);
+                this.ctx.save();
+                this.ctx.clip();
+                this.ctx.translate(left + x - Math.max(rx, ry), top + y - Math.max(rx, ry));
+                this.ctx.fillStyle = pattern;
+                this.ctx.fillRect(0, 0, Math.max(rx, ry) * 2, Math.max(rx, ry) * 2);
+                this.ctx.restore();
+            }
+        }
+    }
+    /**
+     * 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
+     */
+    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);
+    }
+    /**
+     * 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) {
+        // 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);
+        canvas.height = Math.max(1, height);
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return image;
+        }
+        // Apply image smoothing based on CSS image-rendering property
+        if (imageRendering === image_rendering_1.IMAGE_RENDERING.PIXELATED || imageRendering === image_rendering_1.IMAGE_RENDERING.CRISP_EDGES) {
+            this.context.logger.debug(`Disabling image smoothing for background image due to CSS image-rendering`);
+            ctx.imageSmoothingEnabled = false;
+        }
+        else if (imageRendering === image_rendering_1.IMAGE_RENDERING.SMOOTH) {
+            this.context.logger.debug(`Enabling image smoothing for background image due to CSS image-rendering: smooth`);
+            ctx.imageSmoothingEnabled = true;
+        }
+        else {
+            // AUTO: inherit from main renderer context
+            ctx.imageSmoothingEnabled = this.ctx.imageSmoothingEnabled;
+        }
+        // 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;
+    }
+    /**
+     * Create a canvas path from path array
+     *
+     * @param paths - Array of path points
+     */
+    path(paths) {
+        (0, canvas_path_1.createCanvasPath)(this.ctx, paths);
+    }
+}
+exports.BackgroundRenderer = BackgroundRenderer;