html2canvas-pro 2.1.0 → 2.2.0

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

@@ -5,36 +5,28 @@ const stacking_context_1 = require("../stacking-context");
 const color_utilities_1 = require("../../css/types/color-utilities");
 const path_1 = require("../path");
 const bound_curves_1 = require("../bound-curves");
-const vector_1 = require("../vector");
 const background_1 = require("../background");
-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 bitwise_1 = require("../../core/bitwise");
-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 text_renderer_1 = require("./text-renderer");
 const background_renderer_1 = require("./background-renderer");
 const border_renderer_1 = require("./border-renderer");
+const border_image_renderer_1 = require("./border-image-renderer");
 const effects_renderer_1 = require("./effects-renderer");
-const text_renderer_1 = require("./text-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;
 class CanvasRenderer {
     constructor(context, options) {
         this.context = context;
         this.options = options;
         this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D rendering context from canvas');
+        }
+        this.ctx = ctx;
         if (!options.canvas) {
             this.canvas.width = Math.floor(options.width * options.scale);
             this.canvas.height = Math.floor(options.height * options.scale);
@@ -67,6 +59,7 @@ class CanvasRenderer {
             path: (paths) => this.path(paths),
             formatPath: (paths) => this.formatPath(paths)
         });
+        this.borderImageRenderer = new border_image_renderer_1.BorderImageRenderer(this.ctx);
         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,
@@ -104,7 +97,7 @@ class CanvasRenderer {
             this.path(path);
             this.ctx.save();
             this.ctx.clip();
-            const { sx, sy, sw, sh, dx, dy, dw, dh } = (0, object_fit_1.calculateObjectFitRendering)(intrinsicWidth, intrinsicHeight, box, container.styles.objectFit);
+            const { sx, sy, sw, sh, dx, dy, dw, dh } = (0, object_fit_1.calculateObjectFitRendering)(intrinsicWidth, intrinsicHeight, box, container.styles.objectFit, container.styles.objectPosition);
             this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
             this.ctx.restore();
         }
@@ -115,160 +108,20 @@ class CanvasRenderer {
         const curves = paint.curves;
         const styles = container.styles;
         // Use content box for text overflow calculation (excludes padding and border)
-        // This matches browser behavior where text-overflow uses the content width
         const textBounds = (0, box_sizing_1.contentBox)(container);
         for (const child of container.textNodes) {
             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}`);
-            }
-        }
-        if (container instanceof canvas_element_container_1.CanvasElementContainer) {
-            this.renderReplacedElement(container, curves, container.canvas);
-        }
-        if (container instanceof svg_element_container_1.SVGElementContainer) {
-            try {
-                const image = await this.context.cache.match(container.svg);
-                this.renderReplacedElement(container, curves, image);
-            }
-            catch (e) {
-                this.context.logger.error(`Error loading svg ${container.svg.substring(0, 255)}`);
-            }
-        }
-        if (container instanceof iframe_element_container_1.IFrameElementContainer && container.tree) {
-            const iframeRenderer = new CanvasRenderer(this.context, {
-                scale: this.options.scale,
-                backgroundColor: container.backgroundColor,
-                x: 0,
-                y: 0,
-                width: container.width,
-                height: container.height
-            });
-            const canvas = await iframeRenderer.render(container.tree);
-            if (container.width && container.height) {
-                this.ctx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height);
-            }
-        }
-        if (container instanceof input_element_container_1.InputElementContainer) {
-            const size = Math.min(container.bounds.width, container.bounds.height);
-            if (container.type === input_element_container_1.CHECKBOX) {
-                if (container.checked) {
-                    this.ctx.save();
-                    this.path([
-                        new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
-                        new vector_1.Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
-                        new vector_1.Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
-                        new vector_1.Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
-                        new vector_1.Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
-                        new vector_1.Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
-                        new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
-                    ]);
-                    this.ctx.fillStyle = (0, color_utilities_1.asString)(input_element_container_1.INPUT_COLOR);
-                    this.ctx.fill();
-                    this.ctx.restore();
-                }
-            }
-            else if (container.type === input_element_container_1.RADIO) {
-                if (container.checked) {
-                    this.ctx.save();
-                    this.ctx.beginPath();
-                    this.ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
-                    this.ctx.fillStyle = (0, color_utilities_1.asString)(input_element_container_1.INPUT_COLOR);
-                    this.ctx.fill();
-                    this.ctx.restore();
-                }
-            }
-        }
-        if (isTextInputElement(container) && container.value.length) {
-            const [font, fontFamily, fontSize] = this.textRenderer.createFontStyle(styles);
-            const { baseline } = this.fontMetrics.getMetrics(fontFamily, fontSize);
-            this.ctx.font = font;
-            // Fix for Issue #92: Use placeholder color when rendering placeholder text
-            const isPlaceholder = container instanceof input_element_container_1.InputElementContainer && container.isPlaceholder;
-            this.ctx.fillStyle = isPlaceholder ? (0, color_utilities_1.asString)(input_element_container_1.PLACEHOLDER_COLOR) : (0, color_utilities_1.asString)(styles.color);
-            this.ctx.textBaseline = 'alphabetic';
-            this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
-            const bounds = (0, box_sizing_1.contentBox)(container);
-            let x = 0;
-            switch (container.styles.textAlign) {
-                case 1 /* TEXT_ALIGN.CENTER */:
-                    x += bounds.width / 2;
-                    break;
-                case 2 /* TEXT_ALIGN.RIGHT */:
-                    x += bounds.width;
-                    break;
-            }
-            // Fix for Issue #92: Position text vertically centered in single-line input
-            // Only apply vertical centering for InputElementContainer, not for textarea or select
-            let verticalOffset = 0;
-            if (container instanceof input_element_container_1.InputElementContainer) {
-                const fontSizeValue = (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, 0);
-                verticalOffset = (bounds.height - fontSizeValue) / 2;
-            }
-            // Create text bounds with horizontal and vertical offsets
-            // Height is not modified as it doesn't affect text rendering position
-            const textBounds = bounds.add(x, verticalOffset, 0, 0);
-            this.ctx.save();
-            this.path([
-                new vector_1.Vector(bounds.left, bounds.top),
-                new vector_1.Vector(bounds.left + bounds.width, bounds.top),
-                new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height),
-                new vector_1.Vector(bounds.left, bounds.top + bounds.height)
-            ]);
-            this.ctx.clip();
-            this.textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline, styles.writingMode);
-            this.ctx.restore();
-            this.ctx.textBaseline = 'alphabetic';
-            this.ctx.textAlign = 'left';
-        }
-        if ((0, bitwise_1.contains)(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) {
-            if (container.styles.listStyleImage !== null) {
-                const img = container.styles.listStyleImage;
-                if (img.type === 0 /* CSSImageType.URL */) {
-                    let image;
-                    const url = img.url;
-                    try {
-                        image = await this.context.cache.match(url);
-                        this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
-                    }
-                    catch (e) {
-                        this.context.logger.error(`Error loading list-style-image ${url}`);
-                    }
-                }
-            }
-            else if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
-                const [font] = this.textRenderer.createFontStyle(styles);
-                this.ctx.font = font;
-                this.ctx.fillStyle = (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.textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 2, styles.writingMode);
-                this.ctx.textBaseline = 'bottom';
-                this.ctx.textAlign = 'left';
-            }
-        }
+        await (0, content_renderer_1.renderReplacedElements)(this.ctx, this.context, {
+            scale: this.options.scale,
+            backgroundColor: this.options.backgroundColor,
+            x: this.options.x,
+            y: this.options.y,
+            width: this.options.width,
+            height: this.options.height
+        }, (ctx, opts) => new CanvasRenderer(ctx, opts), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
+        (0, content_renderer_1.renderFormElements)(this.ctx, this.fontMetrics, this.textRenderer, this.path.bind(this), container, styles);
+        await (0, content_renderer_1.renderListMarker)(this.ctx, this.context, this.textRenderer, paint, container, styles);
     }
     async renderStackContent(stack) {
         if (stack.element.container.debugRender) {
@@ -399,6 +252,25 @@ class CanvasRenderer {
                 this.ctx.restore();
             });
         }
+        // Render border-image if present (replaces traditional borders per CSS spec)
+        if (styles.borderImageSource) {
+            const source = styles.borderImageSource;
+            if (source.type === 0 /* CSSImageType.URL */) {
+                const url = source.url;
+                try {
+                    const image = await this.context.cache.match(url);
+                    if (image) {
+                        const bounds = paint.container.bounds;
+                        this.borderImageRenderer.renderBorderImage(bounds, image, styles.borderImageSlice, styles.borderImageRepeat, Math.max(0, styles.borderTopWidth), Math.max(0, styles.borderRightWidth), Math.max(0, styles.borderBottomWidth), Math.max(0, styles.borderLeftWidth));
+                    }
+                }
+                catch (e) {
+                    this.context.logger.error(`Error loading border-image ${url}`);
+                }
+            }
+            // When border-image is present, skip regular border rendering
+            return;
+        }
         let side = 0;
         for (const border of borders) {
             if (border.style !== 0 /* BORDER_STYLE.NONE */ && !(0, color_utilities_1.isTransparent)(border.color) && border.width > 0) {
@@ -430,18 +302,6 @@ class CanvasRenderer {
     }
 }
 exports.CanvasRenderer = CanvasRenderer;
-const isTextInputElement = (container) => {
-    if (container instanceof textarea_element_container_1.TextareaElementContainer) {
-        return true;
-    }
-    else if (container instanceof select_element_container_1.SelectElementContainer) {
-        return true;
-    }
-    else if (container instanceof input_element_container_1.InputElementContainer && container.type !== input_element_container_1.RADIO && container.type !== input_element_container_1.CHECKBOX) {
-        return true;
-    }
-    return false;
-};
 const calculateBackgroundCurvedPaintingArea = (clip, curves) => {
     switch (clip) {
         case 0 /* BACKGROUND_CLIP.BORDER_BOX */:
@@ -453,14 +313,3 @@ const calculateBackgroundCurvedPaintingArea = (clip, curves) => {
             return (0, bound_curves_1.calculatePaddingBoxPath)(curves);
     }
 };
-const canvasTextAlign = (textAlign) => {
-    switch (textAlign) {
-        case 1 /* TEXT_ALIGN.CENTER */:
-            return 'center';
-        case 2 /* TEXT_ALIGN.RIGHT */:
-            return 'right';
-        case 0 /* TEXT_ALIGN.LEFT */:
-        default:
-            return 'left';
-    }
-};

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

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderReplacedElements = renderReplacedElements;
+exports.renderFormElements = renderFormElements;
+exports.renderListMarker = renderListMarker;
+const color_utilities_1 = require("../../css/types/color-utilities");
+const image_element_container_1 = require("../../dom/replaced-elements/image-element-container");
+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 iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container");
+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 bounds_1 = require("../../css/layout/bounds");
+const text_1 = require("../../css/layout/text");
+const vector_1 = require("../vector");
+const box_sizing_1 = require("../box-sizing");
+const image_rendering_1 = require("../../css/property-descriptors/image-rendering");
+const length_percentage_1 = require("../../css/types/length-percentage");
+const line_height_1 = require("../../css/property-descriptors/line-height");
+const bitwise_1 = require("../../core/bitwise");
+/**
+ * Render replaced elements: Image, Canvas, SVG, IFrame.
+ */
+async function renderReplacedElements(ctx, context, options, iframeRendererFactory, container, curves, styles, renderReplacedElementFn) {
+    if (container instanceof image_element_container_1.ImageElementContainer) {
+        try {
+            const image = await context.cache.match(container.src);
+            const prevSmoothing = ctx.imageSmoothingEnabled;
+            if (styles.imageRendering === image_rendering_1.IMAGE_RENDERING.PIXELATED ||
+                styles.imageRendering === image_rendering_1.IMAGE_RENDERING.CRISP_EDGES) {
+                ctx.imageSmoothingEnabled = false;
+            }
+            else if (styles.imageRendering === image_rendering_1.IMAGE_RENDERING.SMOOTH) {
+                ctx.imageSmoothingEnabled = true;
+            }
+            renderReplacedElementFn(container, curves, image);
+            ctx.imageSmoothingEnabled = prevSmoothing;
+        }
+        catch (e) {
+            context.logger.error(`Error loading image ${container.src}`);
+            context.onError?.(e instanceof Error ? e : new Error(String(e)));
+        }
+    }
+    if (container instanceof canvas_element_container_1.CanvasElementContainer) {
+        renderReplacedElementFn(container, curves, container.canvas);
+    }
+    if (container instanceof svg_element_container_1.SVGElementContainer) {
+        try {
+            const image = await context.cache.match(container.svg);
+            renderReplacedElementFn(container, curves, image);
+        }
+        catch (e) {
+            context.logger.error(`Error loading svg ${container.svg.substring(0, 255)}`);
+            context.onError?.(e instanceof Error ? e : new Error(String(e)));
+        }
+    }
+    if (container instanceof iframe_element_container_1.IFrameElementContainer && container.tree) {
+        const iframeRenderer = iframeRendererFactory(context, {
+            scale: options.scale,
+            backgroundColor: container.backgroundColor,
+            x: 0,
+            y: 0,
+            width: container.width,
+            height: container.height
+        });
+        const canvas = await iframeRenderer.render(container.tree);
+        if (container.width && container.height) {
+            ctx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height);
+        }
+    }
+}
+/**
+ * Render form element content: checkbox, radio, text input.
+ */
+function renderFormElements(ctx, fontMetrics, textRenderer, pathFn, container, styles) {
+    if (container instanceof input_element_container_1.InputElementContainer) {
+        const size = Math.min(container.bounds.width, container.bounds.height);
+        if (container.type === input_element_container_1.CHECKBOX && container.checked) {
+            ctx.save();
+            pathFn([
+                new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
+                new vector_1.Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
+                new vector_1.Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
+                new vector_1.Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
+                new vector_1.Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
+                new vector_1.Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
+                new vector_1.Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
+            ]);
+            ctx.fillStyle = (0, color_utilities_1.asString)(input_element_container_1.INPUT_COLOR);
+            ctx.fill();
+            ctx.restore();
+        }
+        else if (container.type === input_element_container_1.RADIO && container.checked) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
+            ctx.fillStyle = (0, color_utilities_1.asString)(input_element_container_1.INPUT_COLOR);
+            ctx.fill();
+            ctx.restore();
+        }
+    }
+    if (isTextInputElement(container) && container.value.length) {
+        const [font, fontFamily, fontSize] = textRenderer.createFontStyle(styles);
+        const { baseline } = fontMetrics.getMetrics(fontFamily, fontSize);
+        ctx.font = font;
+        const isPlaceholder = container instanceof input_element_container_1.InputElementContainer && container.isPlaceholder;
+        ctx.fillStyle = isPlaceholder ? (0, color_utilities_1.asString)(input_element_container_1.PLACEHOLDER_COLOR) : (0, color_utilities_1.asString)(styles.color);
+        ctx.textBaseline = 'alphabetic';
+        ctx.textAlign = canvasTextAlign(container.styles.textAlign);
+        const bounds = (0, box_sizing_1.contentBox)(container);
+        let x = 0;
+        switch (container.styles.textAlign) {
+            case 1 /* TEXT_ALIGN.CENTER */:
+                x += bounds.width / 2;
+                break;
+            case 2 /* TEXT_ALIGN.RIGHT */:
+                x += bounds.width;
+                break;
+        }
+        let verticalOffset = 0;
+        if (container instanceof input_element_container_1.InputElementContainer) {
+            const fontSizeValue = (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, 0);
+            verticalOffset = (bounds.height - fontSizeValue) / 2;
+        }
+        const textBounds = bounds.add(x, verticalOffset, 0, 0);
+        ctx.save();
+        pathFn([
+            new vector_1.Vector(bounds.left, bounds.top),
+            new vector_1.Vector(bounds.left + bounds.width, bounds.top),
+            new vector_1.Vector(bounds.left + bounds.width, bounds.top + bounds.height),
+            new vector_1.Vector(bounds.left, bounds.top + bounds.height)
+        ]);
+        ctx.clip();
+        textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline, styles.writingMode);
+        ctx.restore();
+        ctx.textBaseline = 'alphabetic';
+        ctx.textAlign = 'left';
+    }
+}
+/**
+ * Render list-item marker (image or text).
+ */
+async function renderListMarker(ctx, context, textRenderer, paint, container, styles) {
+    if (!(0, bitwise_1.contains)(container.styles.display, 2048 /* DISPLAY.LIST_ITEM */)) {
+        return;
+    }
+    if (container.styles.listStyleImage !== null) {
+        const img = container.styles.listStyleImage;
+        if (img.type === 0 /* CSSImageType.URL */) {
+            const url = img.url;
+            try {
+                const image = await context.cache.match(url);
+                ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
+            }
+            catch (e) {
+                context.logger.error(`Error loading list-style-image ${url}`);
+                context.onError?.(e instanceof Error ? e : new Error(String(e)));
+            }
+        }
+    }
+    else if (paint.listValue && container.styles.listStyleType !== -1 /* LIST_STYLE_TYPE.NONE */) {
+        const [font] = textRenderer.createFontStyle(styles);
+        ctx.font = font;
+        ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
+        ctx.textBaseline = 'middle';
+        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);
+        textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 2, styles.writingMode);
+        ctx.textBaseline = 'bottom';
+        ctx.textAlign = 'left';
+    }
+}
+/**
+ * Type guard for text input containers.
+ */
+const isTextInputElement = (container) => {
+    if (container instanceof textarea_element_container_1.TextareaElementContainer) {
+        return true;
+    }
+    else if (container instanceof select_element_container_1.SelectElementContainer) {
+        return true;
+    }
+    else if (container instanceof input_element_container_1.InputElementContainer && container.type !== input_element_container_1.RADIO && container.type !== input_element_container_1.CHECKBOX) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Map CSS text-align to Canvas textAlign.
+ */
+const canvasTextAlign = (textAlign) => {
+    switch (textAlign) {
+        case 1 /* TEXT_ALIGN.CENTER */:
+            return 'center';
+        case 2 /* TEXT_ALIGN.RIGHT */:
+            return 'right';
+        case 0 /* TEXT_ALIGN.LEFT */:
+        default:
+            return 'left';
+    }
+};

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

@@ -66,6 +66,9 @@ class EffectsRenderer {
         else if ((0, effects_1.isBlendEffect)(effect)) {
             this.ctx.globalCompositeOperation = effect.compositeOperation;
         }
+        else if ((0, effects_1.isFilterEffect)(effect)) {
+            this.ctx.filter = effect.filterString;
+        }
         this.activeEffects.push(effect);
     }
     /**

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

@@ -8,7 +8,11 @@ class ForeignObjectRenderer {
         this.context = context;
         this.options = options;
         this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D rendering context from canvas');
+        }
+        this.ctx = ctx;
         this.canvas.width = Math.floor(options.width * options.scale);
         this.canvas.height = Math.floor(options.height * options.scale);
         this.canvas.style.width = `${options.width}px`;

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

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextDecorationRenderer = void 0;
+const color_utilities_1 = require("../../../css/types/color-utilities");
+class TextDecorationRenderer {
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    render(bounds, styles) {
+        this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.textDecorationColor || styles.color);
+        let thickness = 1;
+        if (typeof styles.textDecorationThickness === 'number') {
+            thickness = styles.textDecorationThickness;
+        }
+        else if (styles.textDecorationThickness === 'from-font') {
+            thickness = Math.max(1, Math.floor(styles.fontSize.number * 0.05));
+        }
+        let underlineOffset = 0;
+        if (typeof styles.textUnderlineOffset === 'number') {
+            underlineOffset = styles.textUnderlineOffset;
+        }
+        const decorationStyle = styles.textDecorationStyle;
+        styles.textDecorationLine.forEach((line) => {
+            let y = 0;
+            switch (line) {
+                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.draw(bounds.left, y, bounds.width, thickness, decorationStyle);
+        });
+    }
+    draw(x, y, width, thickness, style) {
+        switch (style) {
+            case 0 /* TEXT_DECORATION_STYLE.SOLID */:
+                this.ctx.fillRect(x, y, width, thickness);
+                break;
+            case 1 /* TEXT_DECORATION_STYLE.DOUBLE */: {
+                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 */:
+                this.drawPattern(x, y, width, thickness, [thickness, thickness * 2]);
+                break;
+            case 3 /* TEXT_DECORATION_STYLE.DASHED */:
+                this.drawPattern(x, y, width, thickness, [thickness * 3, thickness * 2]);
+                break;
+            case 4 /* TEXT_DECORATION_STYLE.WAVY */:
+                this.drawWavy(x, y, width, thickness);
+                break;
+            default:
+                this.ctx.fillRect(x, y, width, thickness);
+        }
+    }
+    drawPattern(x, y, width, thickness, dash) {
+        this.ctx.save();
+        this.ctx.beginPath();
+        this.ctx.setLineDash(dash);
+        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();
+    }
+    drawWavy(x, y, width, thickness) {
+        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();
+    }
+}
+exports.TextDecorationRenderer = TextDecorationRenderer;