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

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

@@ -0,0 +1,204 @@
+"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 font_utils_1 = require("./font-utils");
+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, 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] = textRenderer.createFontStyle(styles);
+        // Use Canvas API to measure baseline from the actual rendered font
+        ctx.font = font;
+        const baseline = (0, font_utils_1.measureBaseline)(ctx, (0, length_percentage_1.getAbsoluteValue)(styles.fontSize, 0));
+        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

@@ -0,0 +1,171 @@
+"use strict";
+/**
+ * Effects Renderer
+ *
+ * Handles rendering effects including:
+ * - Opacity effects
+ * - Transform effects (matrix transformations)
+ * - Clip effects (overflow / border-radius clipping via Path[])
+ * - Clip-path effects (CSS clip-path shapes: inset, circle, ellipse, polygon, path)
+ * - Blend effects (mix-blend-mode)
+ * - Filter effects (CSS filter functions)
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EffectsRenderer = void 0;
+const effects_1 = require("../effects");
+/**
+ * Effects Renderer
+ *
+ * Manages rendering effects stack including opacity, transforms, and clipping.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ *
+ * ## Save/restore optimisation
+ *
+ * Canvas `save()` / `restore()` snapshot and restore the entire canvas state
+ * (transform matrix, clip region, compositing mode, filter, shadow, …) which
+ * is relatively expensive. The old implementation called `save()` / `restore()`
+ * for every single effect unconditionally.
+ *
+ * This implementation does a **batch pre-scan** before applying effects:
+ *
+ * | Effect type        | Modifies             | Reversible?   | Needs save? |
+ * |--------------------|----------------------|---------------|-------------|
+ * | TransformEffect     | transform matrix     | ❌ irreversible | **YES**     |
+ * | ClipEffect         | clip region          | ❌ cumulative   | **YES**     |
+ * | ClipPathEffect     | clip region          | ❌ cumulative   | **YES**     |
+ * | OpacityEffect      | globalAlpha          | ✅ scalar       | NO          |
+ * | BlendEffect        | globalCompositeOp    | ✅ scalar       | NO          |
+ * | FilterEffect       | filter + shadow      | ✅ string+vec   | NO          |
+ *
+ * When the batch contains *only* lightweight effects (opacity / blend / filter)
+ * we skip `save()` entirely and manually reset properties on pop.
+ *
+ * When the batch contains at least one heavyweight effect (transform / clip /
+ * clip-path) we call `save()` **once** before the first heavyweight effect and
+ * `restore()` **once** when that effect is popped.
+ */
+class EffectsRenderer {
+    constructor(deps, pathCallback) {
+        this.activeEffects = [];
+        /** Whether a canvas state save was performed for the current batch. */
+        this.didSave = false;
+        /** Index (0-based, from start of activeEffects array) of the last
+         *  heavyweight effect in the batch — the one whose pop triggers
+         *  restore(). Set to -1 when no save was performed. */
+        this.saveAtDepth = -1;
+        this.ctx = deps.ctx;
+        this.pathCallback = pathCallback;
+    }
+    /**
+     * Apply multiple effects.
+     * Clears existing effects and applies new ones.
+     */
+    applyEffects(effects) {
+        // ── 1. Pop all previously active effects ──────────────────────
+        while (this.activeEffects.length) {
+            this.popEffect();
+        }
+        // ── 2. Determine whether to save canvas state ─────────────────
+        this.didSave = false;
+        this.saveAtDepth = -1;
+        const isHeavy = (e) => (0, effects_1.isTransformEffect)(e) || (0, effects_1.isClipEffect)(e) || (0, effects_1.isClipPathEffect)(e);
+        // Pre-compute the index of the *last* heavyweight effect so pop
+        // can reliably match it regardless of how many heavyweight effects
+        // are in the batch (the save was issued before the first, but the
+        // restore must happen when the LAST heavyweight is popped).
+        const lastHeavyIdx = effects.reduceRight((found, e, idx) => (found !== -1 ? found : isHeavy(e) ? idx : -1), -1);
+        // ── 3. Apply each effect ──────────────────────────────────────
+        for (let i = 0; i < effects.length; i++) {
+            const effect = effects[i];
+            if (isHeavy(effect)) {
+                if (!this.didSave) {
+                    this.ctx.save();
+                    this.didSave = true;
+                }
+                if (i === lastHeavyIdx) {
+                    this.saveAtDepth = this.activeEffects.length;
+                }
+            }
+            this.applyEffect(effect);
+        }
+    }
+    /**
+     * Apply a single effect (called internally by applyEffects).
+     */
+    applyEffect(effect) {
+        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);
+        }
+        else if ((0, effects_1.isClipEffect)(effect)) {
+            this.pathCallback.path(effect.path);
+            this.ctx.clip();
+        }
+        else if ((0, effects_1.isClipPathEffect)(effect)) {
+            effect.applyClip(this.ctx);
+        }
+        else if ((0, effects_1.isOpacityEffect)(effect)) {
+            // Multiply into current globalAlpha so nested opacity works
+            // without save/restore overhead.
+            this.ctx.globalAlpha *= effect.opacity;
+        }
+        else if ((0, effects_1.isBlendEffect)(effect)) {
+            this.ctx.globalCompositeOperation = effect.compositeOperation;
+        }
+        else if ((0, effects_1.isFilterEffect)(effect)) {
+            // drop-shadow() is rendered via ctx.shadow* to avoid canvas
+            // taint; remaining filters go through ctx.filter.
+            this.ctx.filter = effect.safeFilterString || 'none';
+            if (effect.shadow) {
+                this.ctx.shadowOffsetX = effect.shadow.offsetX;
+                this.ctx.shadowOffsetY = effect.shadow.offsetY;
+                this.ctx.shadowBlur = effect.shadow.blur;
+                this.ctx.shadowColor = effect.shadow.color;
+            }
+        }
+        this.activeEffects.push(effect);
+    }
+    /**
+     * Remove the most recent effect.
+     * Restores canvas state if needed.
+     */
+    popEffect() {
+        if (this.activeEffects.length === 0)
+            return;
+        // If the effect being popped is the one that triggered the save,
+        // restore the canvas state now.
+        if (this.didSave && this.activeEffects.length - 1 === this.saveAtDepth) {
+            this.ctx.restore();
+            this.didSave = false;
+            this.saveAtDepth = -1;
+        }
+        this.activeEffects.pop();
+        // If the batch had ONLY lightweight effects (no save was performed),
+        // reset properties to their defaults. We only do this when all effects
+        // have been popped (activeEffects is empty), so properties don't
+        // flip mid-batch.
+        if (!this.didSave && this.activeEffects.length === 0) {
+            this.ctx.globalAlpha = 1;
+            this.ctx.globalCompositeOperation = 'source-over';
+            this.ctx.filter = 'none';
+            this.ctx.shadowOffsetX = 0;
+            this.ctx.shadowOffsetY = 0;
+            this.ctx.shadowBlur = 0;
+            this.ctx.shadowColor = 'rgba(0, 0, 0, 0)';
+        }
+    }
+    /**
+     * Get the current number of active effects.
+     */
+    getActiveEffectCount() {
+        return this.activeEffects.length;
+    }
+    /**
+     * Check if there are any active effects.
+     */
+    hasActiveEffects() {
+        return this.activeEffects.length > 0;
+    }
+}
+exports.EffectsRenderer = EffectsRenderer;

package/dist/lib/render/canvas/font-utils.js

@@ -0,0 +1,29 @@
+"use strict";
+/**
+ * Font measurement utility
+ *
+ * Provides Canvas API-based baseline measurement that works correctly with
+ * webfonts (which may not be loaded in the original document) and system fonts.
+ *
+ * Fallback chain:
+ *   1. fontBoundingBoxAscent — font-level metric (Chrome 99+, FF 116+, Safari 17.4+)
+ *   2. actualBoundingBoxAscent — glyph-level metric (widely supported)
+ *   3. fallback value — coarse CSS fallback
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureBaseline = void 0;
+const SAMPLE_TEXT = 'Mg'; // characters with both ascender and descender
+/**
+ * Measure the baseline ascent for the currently set font.
+ *
+ * @param ctx - Canvas 2D rendering context with ctx.font already set
+ * @param fallback - Fallback value when no metrics are available (e.g. fontSize.number)
+ * @returns The distance from the text baseline to the top of the bounding box
+ */
+const measureBaseline = (ctx, fallback) => {
+    const tm = ctx.measureText(SAMPLE_TEXT);
+    const fmAscent = tm.fontBoundingBoxAscent;
+    const ascent = fmAscent !== undefined && !Number.isNaN(fmAscent) ? fmAscent : tm.actualBoundingBoxAscent;
+    return ascent !== undefined && !Number.isNaN(ascent) ? ascent : fallback;
+};
+exports.measureBaseline = measureBaseline;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ForeignObjectRenderer = void 0;
+const features_1 = require("../../core/features");
+const color_utilities_1 = require("../../css/types/color-utilities");
+class ForeignObjectRenderer {
+    constructor(context, options) {
+        this.context = context;
+        this.options = options;
+        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
+        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`;
+        this.canvas.style.height = `${options.height}px`;
+        this.ctx.scale(this.options.scale, this.options.scale);
+        this.ctx.translate(-options.x, -options.y);
+        this.context.logger.debug(`EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`);
+    }
+    async render(element) {
+        if (this.options.signal?.aborted) {
+            throw new DOMException('The operation was aborted.', 'AbortError');
+        }
+        const svg = (0, features_1.createForeignObjectSVG)(this.options.width * this.options.scale, this.options.height * this.options.scale, this.options.scale, this.options.scale, element);
+        const img = await (0, features_1.loadSerializedSVG)(svg);
+        if (this.options.backgroundColor) {
+            this.ctx.fillStyle = (0, color_utilities_1.asString)(this.options.backgroundColor);
+            this.ctx.fillRect(0, 0, this.options.width * this.options.scale, this.options.height * this.options.scale);
+        }
+        this.ctx.drawImage(img, -this.options.x * this.options.scale, -this.options.y * this.options.scale);
+        return this.canvas;
+    }
+}
+exports.ForeignObjectRenderer = ForeignObjectRenderer;

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;