html2canvas-pro 1.6.6 → 2.0.0

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

@@ -7,32 +7,31 @@ const path_1 = require("../path");
 const bound_curves_1 = require("../bound-curves");
 const bezier_curve_1 = require("../bezier-curve");
 const vector_1 = require("../vector");
-const image_1 = require("../../css/types/image");
-const border_1 = require("../border");
 const background_1 = require("../background");
-const parser_1 = require("../../css/syntax/parser");
 const text_1 = require("../../css/layout/text");
 const image_element_container_1 = require("../../dom/replaced-elements/image-element-container");
 const box_sizing_1 = require("../box-sizing");
 const canvas_element_container_1 = require("../../dom/replaced-elements/canvas-element-container");
 const svg_element_container_1 = require("../../dom/replaced-elements/svg-element-container");
-const effects_1 = require("../effects");
 const bitwise_1 = require("../../core/bitwise");
-const gradient_1 = require("../../css/types/functions/gradient");
 const length_percentage_1 = require("../../css/types/length-percentage");
 const font_metrics_1 = require("../font-metrics");
 const bounds_1 = require("../../css/layout/bounds");
+const image_rendering_1 = require("../../css/property-descriptors/image-rendering");
 const line_height_1 = require("../../css/property-descriptors/line-height");
 const input_element_container_1 = require("../../dom/replaced-elements/input-element-container");
 const textarea_element_container_1 = require("../../dom/elements/textarea-element-container");
 const select_element_container_1 = require("../../dom/elements/select-element-container");
 const iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container");
 const renderer_1 = require("../renderer");
+const background_renderer_1 = require("./background-renderer");
+const border_renderer_1 = require("./border-renderer");
+const effects_renderer_1 = require("./effects-renderer");
+const text_renderer_1 = require("./text-renderer");
 const MASK_OFFSET = 10000;
 class CanvasRenderer extends renderer_1.Renderer {
     constructor(context, options) {
         super(context, options);
-        this._activeEffects = [];
         this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
         this.ctx = this.canvas.getContext('2d');
         if (!options.canvas) {
@@ -45,35 +44,36 @@ class CanvasRenderer extends renderer_1.Renderer {
         this.ctx.scale(this.options.scale, this.options.scale);
         this.ctx.translate(-options.x, -options.y);
         this.ctx.textBaseline = 'bottom';
-        this._activeEffects = [];
+        // Set image smoothing options
+        if (options.imageSmoothing !== undefined) {
+            this.ctx.imageSmoothingEnabled = options.imageSmoothing;
+        }
+        if (options.imageSmoothingQuality) {
+            this.ctx.imageSmoothingQuality = options.imageSmoothingQuality;
+        }
+        // Initialize specialized renderers
+        this.backgroundRenderer = new background_renderer_1.BackgroundRenderer({
+            ctx: this.ctx,
+            context: this.context,
+            canvas: this.canvas,
+            options: {
+                width: options.width,
+                height: options.height,
+                scale: options.scale
+            }
+        });
+        this.borderRenderer = new border_renderer_1.BorderRenderer({ ctx: this.ctx }, {
+            path: (paths) => this.path(paths),
+            formatPath: (paths) => this.formatPath(paths)
+        });
+        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,
+            options: { scale: options.scale }
+        });
         this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
     }
-    applyEffects(effects) {
-        while (this._activeEffects.length) {
-            this.popEffect();
-        }
-        effects.forEach((effect) => this.applyEffect(effect));
-    }
-    applyEffect(effect) {
-        this.ctx.save();
-        if ((0, effects_1.isOpacityEffect)(effect)) {
-            this.ctx.globalAlpha = effect.opacity;
-        }
-        if ((0, effects_1.isTransformEffect)(effect)) {
-            this.ctx.translate(effect.offsetX, effect.offsetY);
-            this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
-            this.ctx.translate(-effect.offsetX, -effect.offsetY);
-        }
-        if ((0, effects_1.isClipEffect)(effect)) {
-            this.path(effect.path);
-            this.ctx.clip();
-        }
-        this._activeEffects.push(effect);
-    }
-    popEffect() {
-        this._activeEffects.pop();
-        this.ctx.restore();
-    }
     async renderStack(stack) {
         const styles = stack.element.container.styles;
         if (styles.isVisible()) {
@@ -89,427 +89,11 @@ class CanvasRenderer extends renderer_1.Renderer {
             await this.renderNodeContent(paint);
         }
     }
-    renderTextWithLetterSpacing(text, letterSpacing, baseline) {
-        if (letterSpacing === 0) {
-            // Use alphabetic baseline for consistent text positioning across browsers
-            // Issue #129: text.bounds.top + text.bounds.height causes text to render too low
-            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
-        }
-        else {
-            const letters = (0, text_1.segmentGraphemes)(text.text);
-            letters.reduce((left, letter) => {
-                this.ctx.fillText(letter, left, text.bounds.top + baseline);
-                return left + this.ctx.measureText(letter).width;
-            }, text.bounds.left);
-        }
-    }
     /**
      * Helper method to render text with paint order support
      * Reduces code duplication in line-clamp and normal rendering
      */
-    renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers) {
-        paintOrderLayers.forEach((paintOrderLayer) => {
-            switch (paintOrderLayer) {
-                case 0 /* PAINT_ORDER_LAYER.FILL */:
-                    this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
-                    break;
-                case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                    if (styles.webkitTextStrokeWidth && textBound.text.trim().length) {
-                        this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
-                        this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                        this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                        this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
-                    }
-                    break;
-            }
-        });
-    }
-    renderTextDecoration(bounds, styles) {
-        this.ctx.fillStyle = (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);
-        }
-    }
     // Helper method to truncate text and add ellipsis if needed
-    truncateTextWithEllipsis(text, maxWidth, letterSpacing) {
-        const ellipsis = '...';
-        const ellipsisWidth = this.ctx.measureText(ellipsis).width;
-        if (letterSpacing === 0) {
-            let truncated = text;
-            while (this.ctx.measureText(truncated).width + ellipsisWidth > maxWidth && truncated.length > 0) {
-                truncated = truncated.slice(0, -1);
-            }
-            return truncated + ellipsis;
-        }
-        else {
-            const letters = (0, text_1.segmentGraphemes)(text);
-            let width = ellipsisWidth;
-            let result = [];
-            for (const letter of letters) {
-                const letterWidth = this.ctx.measureText(letter).width + letterSpacing;
-                if (width + letterWidth > maxWidth) {
-                    break;
-                }
-                result.push(letter);
-                width += letterWidth;
-            }
-            return result.join('') + ellipsis;
-        }
-    }
-    createFontStyle(styles) {
-        const fontVariant = styles.fontVariant
-            .filter((variant) => variant === 'normal' || variant === 'small-caps')
-            .join('');
-        const fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
-        const fontSize = (0, parser_1.isDimensionToken)(styles.fontSize)
-            ? `${styles.fontSize.number}${styles.fontSize.unit}`
-            : `${styles.fontSize.number}px`;
-        return [
-            [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '),
-            fontFamily,
-            fontSize
-        ];
-    }
-    async renderTextNode(text, styles, containerBounds) {
-        const [font] = this.createFontStyle(styles);
-        this.ctx.font = font;
-        this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
-        this.ctx.textAlign = 'left';
-        this.ctx.textBaseline = 'alphabetic';
-        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 &&
-            (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);
-                    paintOrder.forEach((paintOrderLayer) => {
-                        switch (paintOrderLayer) {
-                            case 0 /* PAINT_ORDER_LAYER.FILL */:
-                                this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                                if (styles.letterSpacing === 0) {
-                                    this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                }
-                                else {
-                                    const letters = (0, text_1.segmentGraphemes)(truncatedText);
-                                    letters.reduce((left, letter) => {
-                                        this.ctx.fillText(letter, left, firstBound.bounds.top + styles.fontSize.number);
-                                        return left + this.ctx.measureText(letter).width + styles.letterSpacing;
-                                    }, firstBound.bounds.left);
-                                }
-                                break;
-                            case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                                if (styles.webkitTextStrokeWidth && truncatedText.trim().length) {
-                                    this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
-                                    this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                                    this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                                    if (styles.letterSpacing === 0) {
-                                        this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                    }
-                                    else {
-                                        const letters = (0, text_1.segmentGraphemes)(truncatedText);
-                                        letters.reduce((left, letter) => {
-                                            this.ctx.strokeText(letter, left, firstBound.bounds.top + styles.fontSize.number);
-                                            return left + this.ctx.measureText(letter).width + styles.letterSpacing;
-                                        }, firstBound.bounds.left);
-                                    }
-                                }
-                                break;
-                        }
-                    });
-                }
-                return; // Don't render anything else
-            }
-            // If lines.length <= maxLines, fall through to normal rendering
-        }
-        // 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 */ &&
-            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];
-            paintOrder.forEach((paintOrderLayer) => {
-                switch (paintOrderLayer) {
-                    case 0 /* PAINT_ORDER_LAYER.FILL */:
-                        this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                        if (styles.letterSpacing === 0) {
-                            this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                        }
-                        else {
-                            const letters = (0, text_1.segmentGraphemes)(truncatedText);
-                            letters.reduce((left, letter) => {
-                                this.ctx.fillText(letter, left, firstBound.bounds.top + styles.fontSize.number);
-                                return left + this.ctx.measureText(letter).width + styles.letterSpacing;
-                            }, firstBound.bounds.left);
-                        }
-                        const textShadows = styles.textShadow;
-                        if (textShadows.length && truncatedText.trim().length) {
-                            textShadows
-                                .slice(0)
-                                .reverse()
-                                .forEach((textShadow) => {
-                                this.ctx.shadowColor = (0, color_utilities_1.asString)(textShadow.color);
-                                this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
-                                this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-                                this.ctx.shadowBlur = textShadow.blur.number;
-                                if (styles.letterSpacing === 0) {
-                                    this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                }
-                                else {
-                                    const letters = (0, text_1.segmentGraphemes)(truncatedText);
-                                    letters.reduce((left, letter) => {
-                                        this.ctx.fillText(letter, left, firstBound.bounds.top + styles.fontSize.number);
-                                        return left + this.ctx.measureText(letter).width + styles.letterSpacing;
-                                    }, firstBound.bounds.left);
-                                }
-                            });
-                            this.ctx.shadowColor = '';
-                            this.ctx.shadowOffsetX = 0;
-                            this.ctx.shadowOffsetY = 0;
-                            this.ctx.shadowBlur = 0;
-                        }
-                        break;
-                    case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                        if (styles.webkitTextStrokeWidth && truncatedText.trim().length) {
-                            this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
-                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                            this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                            if (styles.letterSpacing === 0) {
-                                this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                            }
-                            else {
-                                const letters = (0, text_1.segmentGraphemes)(truncatedText);
-                                letters.reduce((left, letter) => {
-                                    this.ctx.strokeText(letter, left, firstBound.bounds.top + styles.fontSize.number);
-                                    return left + this.ctx.measureText(letter).width + styles.letterSpacing;
-                                }, firstBound.bounds.left);
-                            }
-                        }
-                        break;
-                }
-            });
-            return;
-        }
-        // Normal rendering (no ellipsis needed)
-        text.textBounds.forEach((text) => {
-            paintOrder.forEach((paintOrderLayer) => {
-                switch (paintOrderLayer) {
-                    case 0 /* PAINT_ORDER_LAYER.FILL */:
-                        this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                        this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
-                        const textShadows = styles.textShadow;
-                        if (textShadows.length && text.text.trim().length) {
-                            textShadows
-                                .slice(0)
-                                .reverse()
-                                .forEach((textShadow) => {
-                                this.ctx.shadowColor = (0, color_utilities_1.asString)(textShadow.color);
-                                this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
-                                this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-                                this.ctx.shadowBlur = textShadow.blur.number;
-                                this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
-                            });
-                            this.ctx.shadowColor = '';
-                            this.ctx.shadowOffsetX = 0;
-                            this.ctx.shadowOffsetY = 0;
-                            this.ctx.shadowBlur = 0;
-                        }
-                        if (styles.textDecorationLine.length) {
-                            this.renderTextDecoration(text.bounds, styles);
-                        }
-                        break;
-                    case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                        if (styles.webkitTextStrokeWidth && text.text.trim().length) {
-                            this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
-                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                            this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
-                            // Issue #110: Use baseline (fontSize) for consistent positioning with fill
-                            // Previously used text.bounds.height which caused stroke to render too low
-                            const baseline = styles.fontSize.number;
-                            if (styles.letterSpacing === 0) {
-                                this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
-                            }
-                            else {
-                                const letters = (0, text_1.segmentGraphemes)(text.text);
-                                letters.reduce((left, letter) => {
-                                    this.ctx.strokeText(letter, left, text.bounds.top + baseline);
-                                    return left + this.ctx.measureText(letter).width;
-                                }, text.bounds.left);
-                            }
-                        }
-                        this.ctx.strokeStyle = '';
-                        this.ctx.lineWidth = 0;
-                        this.ctx.lineJoin = 'miter';
-                        break;
-                }
-            });
-        });
-    }
     renderReplacedElement(container, curves, image) {
         const intrinsicWidth = image.naturalWidth || container.intrinsicWidth;
         const intrinsicHeight = image.naturalHeight || container.intrinsicHeight;
@@ -598,7 +182,7 @@ class CanvasRenderer extends renderer_1.Renderer {
         }
     }
     async renderNodeContent(paint) {
-        this.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
+        this.effectsRenderer.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
         const container = paint.container;
         const curves = paint.curves;
         const styles = container.styles;
@@ -606,12 +190,27 @@ class CanvasRenderer extends renderer_1.Renderer {
         // This matches browser behavior where text-overflow uses the content width
         const textBounds = (0, box_sizing_1.contentBox)(container);
         for (const child of container.textNodes) {
-            await this.renderTextNode(child, styles, textBounds);
+            await this.textRenderer.renderTextNode(child, styles, textBounds);
         }
         if (container instanceof image_element_container_1.ImageElementContainer) {
             try {
                 const image = await this.context.cache.match(container.src);
+                // Apply image smoothing based on CSS image-rendering property and global options
+                const prevSmoothing = this.ctx.imageSmoothingEnabled;
+                // CSS image-rendering property overrides global settings
+                if (styles.imageRendering === image_rendering_1.IMAGE_RENDERING.PIXELATED ||
+                    styles.imageRendering === image_rendering_1.IMAGE_RENDERING.CRISP_EDGES) {
+                    this.context.logger.debug(`Disabling image smoothing for ${container.src} due to CSS image-rendering: ${styles.imageRendering === image_rendering_1.IMAGE_RENDERING.PIXELATED ? 'pixelated' : 'crisp-edges'}`);
+                    this.ctx.imageSmoothingEnabled = false;
+                }
+                else if (styles.imageRendering === image_rendering_1.IMAGE_RENDERING.SMOOTH) {
+                    this.context.logger.debug(`Enabling image smoothing for ${container.src} due to CSS image-rendering: smooth`);
+                    this.ctx.imageSmoothingEnabled = true;
+                }
+                // IMAGE_RENDERING.AUTO: keep current global setting
                 this.renderReplacedElement(container, curves, image);
+                // Restore previous smoothing state
+                this.ctx.imageSmoothingEnabled = prevSmoothing;
             }
             catch (e) {
                 this.context.logger.error(`Error loading image ${container.src}`);
@@ -674,7 +273,7 @@ class CanvasRenderer extends renderer_1.Renderer {
             }
         }
         if (isTextInputElement(container) && container.value.length) {
-            const [font, fontFamily, fontSize] = this.createFontStyle(styles);
+            const [font, fontFamily, fontSize] = this.textRenderer.createFontStyle(styles);
             const { baseline } = this.fontMetrics.getMetrics(fontFamily, fontSize);
             this.ctx.font = font;
             // Fix for Issue #92: Use placeholder color when rendering placeholder text
@@ -710,7 +309,7 @@ class CanvasRenderer extends renderer_1.Renderer {
                 new vector_1.Vector(bounds.left, bounds.top + bounds.height)
             ]);
             this.ctx.clip();
-            this.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline);
+            this.textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline);
             this.ctx.restore();
             this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = 'left';
@@ -731,13 +330,13 @@ class CanvasRenderer extends renderer_1.Renderer {
                 }
             }
             else if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
-                const [font] = this.createFontStyle(styles);
+                const [font] = this.textRenderer.createFontStyle(styles);
                 this.ctx.font = font;
                 this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
                 this.ctx.textBaseline = 'middle';
                 this.ctx.textAlign = 'right';
                 const bounds = new bounds_1.Bounds(container.bounds.left, container.bounds.top + (0, length_percentage_1.getAbsoluteValue)(container.styles.paddingTop, container.bounds.width), container.bounds.width, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 1);
-                this.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 2);
+                this.textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 2);
                 this.ctx.textBaseline = 'bottom';
                 this.ctx.textAlign = 'left';
             }
@@ -824,128 +423,8 @@ class CanvasRenderer extends renderer_1.Renderer {
             }
         });
     }
-    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);
-    }
-    resizeImage(image, width, height) {
-        // https://github.com/niklasvh/html2canvas/pull/2911
-        // if (image.width === width && image.height === height) {
-        //     return image;
-        // }
-        const ownerDocument = this.canvas.ownerDocument ?? document;
-        const canvas = ownerDocument.createElement('canvas');
-        canvas.width = Math.max(1, width);
-        canvas.height = Math.max(1, height);
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
-        return canvas;
-    }
-    async renderBackgroundImage(container) {
-        let index = container.styles.backgroundImage.length - 1;
-        for (const backgroundImage of container.styles.backgroundImage.slice(0).reverse()) {
-            if (backgroundImage.type === 0 /* CSSImageType.URL */) {
-                let image;
-                const url = backgroundImage.url;
-                try {
-                    image = await this.context.cache.match(url);
-                }
-                catch (e) {
-                    this.context.logger.error(`Error loading background-image ${url}`);
-                }
-                if (image) {
-                    const imageWidth = isNaN(image.width) || image.width === 0 ? 1 : image.width;
-                    const imageHeight = isNaN(image.height) || image.height === 0 ? 1 : image.height;
-                    const [path, x, y, width, height] = (0, background_1.calculateBackgroundRendering)(container, index, [
-                        imageWidth,
-                        imageHeight,
-                        imageWidth / imageHeight
-                    ]);
-                    const pattern = this.ctx.createPattern(this.resizeImage(image, width, height), 'repeat');
-                    this.renderRepeat(path, pattern, x, y);
-                }
-            }
-            else if ((0, image_1.isLinearGradient)(backgroundImage)) {
-                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);
-                const canvas = document.createElement('canvas');
-                canvas.width = width;
-                canvas.height = height;
-                const ctx = canvas.getContext('2d');
-                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) {
-                    const pattern = this.ctx.createPattern(canvas, 'repeat');
-                    this.renderRepeat(path, pattern, x, y);
-                }
-            }
-            else if ((0, image_1.isRadialGradient)(backgroundImage)) {
-                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) {
-                    const radialGradient = this.ctx.createRadialGradient(left + x, top + y, 0, left + x, top + y, rx);
-                    (0, gradient_1.processColorStops)(backgroundImage.stops, rx * 2).forEach((colorStop) => radialGradient.addColorStop(colorStop.stop, (0, color_utilities_1.asString)(colorStop.color)));
-                    this.path(path);
-                    this.ctx.fillStyle = radialGradient;
-                    if (rx !== ry) {
-                        // transforms for elliptical radial gradient
-                        const midX = container.bounds.left + 0.5 * container.bounds.width;
-                        const midY = container.bounds.top + 0.5 * container.bounds.height;
-                        const f = ry / rx;
-                        const invF = 1 / f;
-                        this.ctx.save();
-                        this.ctx.translate(midX, midY);
-                        this.ctx.transform(1, 0, 0, f, 0, 0);
-                        this.ctx.translate(-midX, -midY);
-                        this.ctx.fillRect(left, invF * (top - midY) + midY, width, height * invF);
-                        this.ctx.restore();
-                    }
-                    else {
-                        this.ctx.fill();
-                    }
-                }
-            }
-            index--;
-        }
-    }
-    async renderSolidBorder(color, side, curvePoints) {
-        this.path((0, border_1.parsePathForBorder)(curvePoints, side));
-        this.ctx.fillStyle = (0, color_utilities_1.asString)(color);
-        this.ctx.fill();
-    }
-    async renderDoubleBorder(color, width, side, curvePoints) {
-        if (width < 3) {
-            await this.renderSolidBorder(color, side, curvePoints);
-            return;
-        }
-        const outerPaths = (0, border_1.parsePathForBorderDoubleOuter)(curvePoints, side);
-        this.path(outerPaths);
-        this.ctx.fillStyle = (0, color_utilities_1.asString)(color);
-        this.ctx.fill();
-        const innerPaths = (0, border_1.parsePathForBorderDoubleInner)(curvePoints, side);
-        this.path(innerPaths);
-        this.ctx.fill();
-    }
     async renderNodeBackgroundAndBorders(paint) {
-        this.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
+        this.effectsRenderer.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
         const styles = paint.container.styles;
         const hasBackground = !(0, color_utilities_1.isTransparent)(styles.backgroundColor) || styles.backgroundImage.length;
         const borders = [
@@ -963,7 +442,7 @@ class CanvasRenderer extends renderer_1.Renderer {
                 this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.backgroundColor);
                 this.ctx.fill();
             }
-            await this.renderBackgroundImage(paint.container);
+            await this.backgroundRenderer.renderBackgroundImage(paint.container);
             this.ctx.restore();
             styles.boxShadow
                 .slice(0)
@@ -996,121 +475,21 @@ class CanvasRenderer extends renderer_1.Renderer {
         for (const border of borders) {
             if (border.style !== 0 /* BORDER_STYLE.NONE */ && !(0, color_utilities_1.isTransparent)(border.color) && border.width > 0) {
                 if (border.style === 2 /* BORDER_STYLE.DASHED */) {
-                    await this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */);
+                    await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* BORDER_STYLE.DASHED */);
                 }
                 else if (border.style === 3 /* BORDER_STYLE.DOTTED */) {
-                    await this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */);
+                    await this.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */);
                 }
                 else if (border.style === 4 /* BORDER_STYLE.DOUBLE */) {
-                    await this.renderDoubleBorder(border.color, border.width, side, paint.curves);
+                    await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
                 }
                 else {
-                    await this.renderSolidBorder(border.color, side, paint.curves);
+                    await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
                 }
             }
             side++;
         }
     }
-    async renderDashedDottedBorder(color, width, side, curvePoints, style) {
-        this.ctx.save();
-        const strokePaths = (0, border_1.parsePathForBorderStroke)(curvePoints, side);
-        const boxPaths = (0, border_1.parsePathForBorder)(curvePoints, side);
-        if (style === 2 /* BORDER_STYLE.DASHED */) {
-            this.path(boxPaths);
-            this.ctx.clip();
-        }
-        let startX, startY, endX, endY;
-        if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
-            startX = boxPaths[0].start.x;
-            startY = boxPaths[0].start.y;
-        }
-        else {
-            startX = boxPaths[0].x;
-            startY = boxPaths[0].y;
-        }
-        if ((0, bezier_curve_1.isBezierCurve)(boxPaths[1])) {
-            endX = boxPaths[1].end.x;
-            endY = boxPaths[1].end.y;
-        }
-        else {
-            endX = boxPaths[1].x;
-            endY = boxPaths[1].y;
-        }
-        let length;
-        if (side === 0 || side === 2) {
-            length = Math.abs(startX - endX);
-        }
-        else {
-            length = Math.abs(startY - endY);
-        }
-        this.ctx.beginPath();
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            this.formatPath(strokePaths);
-        }
-        else {
-            this.formatPath(boxPaths.slice(0, 2));
-        }
-        let dashLength = width < 3 ? width * 3 : width * 2;
-        let spaceLength = width < 3 ? width * 2 : width;
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            dashLength = width;
-            spaceLength = width;
-        }
-        let useLineDash = true;
-        if (length <= dashLength * 2) {
-            useLineDash = false;
-        }
-        else if (length <= dashLength * 2 + spaceLength) {
-            const multiplier = length / (2 * dashLength + spaceLength);
-            dashLength *= multiplier;
-            spaceLength *= multiplier;
-        }
-        else {
-            const numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
-            const minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
-            const maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
-            spaceLength =
-                maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
-                    ? minSpace
-                    : maxSpace;
-        }
-        if (useLineDash) {
-            if (style === 3 /* BORDER_STYLE.DOTTED */) {
-                this.ctx.setLineDash([0, dashLength + spaceLength]);
-            }
-            else {
-                this.ctx.setLineDash([dashLength, spaceLength]);
-            }
-        }
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            this.ctx.lineCap = 'round';
-            this.ctx.lineWidth = width;
-        }
-        else {
-            this.ctx.lineWidth = width * 2 + 1.1;
-        }
-        this.ctx.strokeStyle = (0, color_utilities_1.asString)(color);
-        this.ctx.stroke();
-        this.ctx.setLineDash([]);
-        // dashed round edge gap
-        if (style === 2 /* BORDER_STYLE.DASHED */) {
-            if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
-                const path1 = boxPaths[3];
-                const path2 = boxPaths[0];
-                this.ctx.beginPath();
-                this.formatPath([new vector_1.Vector(path1.end.x, path1.end.y), new vector_1.Vector(path2.start.x, path2.start.y)]);
-                this.ctx.stroke();
-            }
-            if ((0, bezier_curve_1.isBezierCurve)(boxPaths[1])) {
-                const path1 = boxPaths[1];
-                const path2 = boxPaths[2];
-                this.ctx.beginPath();
-                this.formatPath([new vector_1.Vector(path1.end.x, path1.end.y), new vector_1.Vector(path2.start.x, path2.start.y)]);
-                this.ctx.stroke();
-            }
-        }
-        this.ctx.restore();
-    }
     async render(element) {
         if (this.options.backgroundColor) {
             this.ctx.fillStyle = (0, color_utilities_1.asString)(this.options.backgroundColor);
@@ -1118,7 +497,7 @@ class CanvasRenderer extends renderer_1.Renderer {
         }
         const stack = (0, stacking_context_1.parseStackingContexts)(element);
         await this.renderStack(stack);
-        this.applyEffects([]);
+        this.effectsRenderer.applyEffects([]);
         return this.canvas;
     }
 }
@@ -1157,11 +536,4 @@ const canvasTextAlign = (textAlign) => {
             return 'left';
     }
 };
-// see https://github.com/niklasvh/html2canvas/pull/2645
-const iOSBrokenFonts = ['-apple-system', 'system-ui'];
-const fixIOSSystemFonts = (fontFamilies) => {
-    return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
-        ? fontFamilies.filter((fontFamily) => iOSBrokenFonts.indexOf(fontFamily) === -1)
-        : fontFamilies;
-};
 //# sourceMappingURL=canvas-renderer.js.map