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

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

@@ -0,0 +1,153 @@
+"use strict";
+/**
+ * Border Image Renderer
+ *
+ * Renders CSS border-image using 9-slice scaling.
+ * The source image is divided into 9 regions (4 corners, 4 edges, 1 center)
+ * based on border-image-slice values, then each region is drawn to the
+ * corresponding area of the element's border box.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderImageRenderer = void 0;
+const border_image_repeat_1 = require("../../css/property-descriptors/border-image-repeat");
+class BorderImageRenderer {
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    renderBorderImage(bounds, image, slice, repeat, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth) {
+        const imgW = image.naturalWidth || image.width;
+        const imgH = image.naturalHeight || image.height;
+        if (imgW <= 0 || imgH <= 0) {
+            return;
+        }
+        // Calculate source slice positions in image pixel space
+        const sT = Math.min(slice.unit === 'percent' ? (slice.top / 100) * imgH : Math.min(slice.top, imgH), imgH);
+        const sR = Math.min(slice.unit === 'percent' ? (slice.right / 100) * imgW : Math.min(slice.right, imgW), imgW);
+        const sB = Math.min(slice.unit === 'percent' ? (slice.bottom / 100) * imgH : Math.min(slice.bottom, imgH), imgH);
+        const sL = Math.min(slice.unit === 'percent' ? (slice.left / 100) * imgW : Math.min(slice.left, imgW), imgW);
+        const { left, top, width, height } = bounds;
+        if (width <= 0 || height <= 0) {
+            return;
+        }
+        // Clamp border widths to available box dimensions
+        const dT = Math.min(borderTopWidth, height);
+        const dR = Math.min(borderRightWidth, width);
+        const dB = Math.min(borderBottomWidth, height - dT);
+        const dL = Math.min(borderLeftWidth, width - dR);
+        // Draw corners
+        this.drawRegion(image, 0, 0, sL, sT, left, top, dL, dT);
+        this.drawRegion(image, imgW - sR, 0, sR, sT, left + width - dR, top, dR, dT);
+        this.drawRegion(image, imgW - sR, imgH - sB, sR, sB, left + width - dR, top + height - dB, dR, dB);
+        this.drawRegion(image, 0, imgH - sB, sL, sB, left, top + height - dB, dL, dB);
+        // Draw edges
+        const edges = [
+            {
+                sx: sL,
+                sy: 0,
+                sw: imgW - sL - sR,
+                sh: sT,
+                dx: left + dL,
+                dy: top,
+                dw: width - dL - dR,
+                dh: dT,
+                repeat: repeat.horizontal
+            },
+            {
+                sx: imgW - sR,
+                sy: sT,
+                sw: sR,
+                sh: imgH - sT - sB,
+                dx: left + width - dR,
+                dy: top + dT,
+                dw: dR,
+                dh: height - dT - dB,
+                repeat: repeat.vertical
+            },
+            {
+                sx: sL,
+                sy: imgH - sB,
+                sw: imgW - sL - sR,
+                sh: sB,
+                dx: left + dL,
+                dy: top + height - dB,
+                dw: width - dL - dR,
+                dh: dB,
+                repeat: repeat.horizontal
+            },
+            {
+                sx: 0,
+                sy: sT,
+                sw: sL,
+                sh: imgH - sT - sB,
+                dx: left,
+                dy: top + dT,
+                dw: dL,
+                dh: height - dT - dB,
+                repeat: repeat.vertical
+            }
+        ];
+        for (const edge of edges) {
+            if (edge.sw <= 0 || edge.sh <= 0 || edge.dw <= 0 || edge.dh <= 0)
+                continue;
+            const isHorizontal = edge.dw >= edge.dh;
+            if (edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.STRETCH) {
+                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx, edge.dy, edge.dw, edge.dh);
+            }
+            else if (edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.REPEAT || edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.ROUND) {
+                this.drawRepeatedEdge(image, edge, isHorizontal, edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.ROUND);
+            }
+        }
+        // Draw center if fill is specified
+        if (slice.fill) {
+            const cx = sL;
+            const cy = sT;
+            const cw = imgW - sL - sR;
+            const ch = imgH - sT - sB;
+            const tcx = left + dL;
+            const tcy = top + dT;
+            const tcw = width - dL - dR;
+            const tch = height - dT - dB;
+            this.drawRegion(image, cx, cy, cw, ch, tcx, tcy, tcw, tch);
+        }
+    }
+    drawRegion(image, sx, sy, sw, sh, dx, dy, dw, dh) {
+        if (sw > 0 && sh > 0 && dw > 0 && dh > 0) {
+            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
+        }
+    }
+    drawRepeatedEdge(image, edge, isHorizontal, round) {
+        const srcLength = isHorizontal ? edge.sw : edge.sh;
+        const tgLength = isHorizontal ? edge.dw : edge.dh;
+        if (srcLength <= 0 || tgLength <= 0)
+            return;
+        let tileSize;
+        let tileCount;
+        if (round) {
+            tileCount = Math.max(1, Math.round(tgLength / srcLength));
+            tileSize = tgLength / tileCount;
+        }
+        else {
+            tileSize = srcLength;
+            tileCount = Math.ceil(tgLength / tileSize);
+        }
+        this.ctx.save();
+        this.ctx.beginPath();
+        this.ctx.rect(edge.dx, edge.dy, edge.dw, edge.dh);
+        this.ctx.clip();
+        for (let i = 0; i < tileCount; i++) {
+            const offset = i * tileSize;
+            const remaining = tgLength - offset;
+            const clampedSize = Math.min(tileSize, remaining);
+            if (clampedSize <= 0)
+                break;
+            if (isHorizontal) {
+                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx + offset, edge.dy, clampedSize, edge.dh);
+            }
+            else {
+                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx, edge.dy + offset, edge.dw, clampedSize);
+            }
+        }
+        this.ctx.restore();
+    }
+}
+exports.BorderImageRenderer = BorderImageRenderer;

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

@@ -0,0 +1,184 @@
+"use strict";
+/**
+ * Border Renderer
+ *
+ * Handles rendering of element borders including:
+ * - Solid borders
+ * - Double borders
+ * - Dashed borders
+ * - Dotted borders
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BorderRenderer = void 0;
+const color_utilities_1 = require("../../css/types/color-utilities");
+const border_1 = require("../border");
+const bezier_curve_1 = require("../bezier-curve");
+const vector_1 = require("../vector");
+/**
+ * Border Renderer
+ *
+ * Specialized renderer for element borders.
+ * Extracted from CanvasRenderer to improve code organization and maintainability.
+ */
+class BorderRenderer {
+    constructor(deps, pathCallbacks) {
+        this.ctx = deps.ctx;
+        this.pathCallbacks = pathCallbacks;
+    }
+    /**
+     * Render a solid border
+     *
+     * @param color - Border color
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     */
+    async renderSolidBorder(color, side, curvePoints) {
+        this.pathCallbacks.path((0, border_1.parsePathForBorder)(curvePoints, side));
+        this.ctx.fillStyle = (0, color_utilities_1.asString)(color);
+        this.ctx.fill();
+    }
+    /**
+     * Render a double border
+     * Falls back to solid border if width is too small
+     *
+     * @param color - Border color
+     * @param width - Border width
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     */
+    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.pathCallbacks.path(outerPaths);
+        this.ctx.fillStyle = (0, color_utilities_1.asString)(color);
+        this.ctx.fill();
+        const innerPaths = (0, border_1.parsePathForBorderDoubleInner)(curvePoints, side);
+        this.pathCallbacks.path(innerPaths);
+        this.ctx.fill();
+    }
+    /**
+     * Render a dashed or dotted border
+     *
+     * @param color - Border color
+     * @param width - Border width
+     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
+     * @param curvePoints - Border curve points
+     * @param style - Border style (DASHED or DOTTED)
+     */
+    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.pathCallbacks.path(boxPaths);
+            this.ctx.clip();
+        }
+        // Extract start and end coordinates
+        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;
+        }
+        // Calculate border length
+        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.pathCallbacks.formatPath(strokePaths);
+        }
+        else {
+            this.pathCallbacks.formatPath(boxPaths.slice(0, 2));
+        }
+        // Calculate dash and space lengths
+        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;
+        }
+        // Adjust dash pattern for border length
+        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;
+        }
+        // Apply line dash pattern
+        if (useLineDash) {
+            if (style === 3 /* BORDER_STYLE.DOTTED */) {
+                this.ctx.setLineDash([0, dashLength + spaceLength]);
+            }
+            else {
+                this.ctx.setLineDash([dashLength, spaceLength]);
+            }
+        }
+        // Set line style and stroke
+        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([]);
+        // Fill dashed round edge gaps
+        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.pathCallbacks.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.pathCallbacks.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();
+    }
+}
+exports.BorderRenderer = BorderRenderer;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCanvasPath = exports.formatCanvasPath = void 0;
+const bezier_curve_1 = require("../bezier-curve");
+const formatCanvasPath = (ctx, paths) => {
+    paths.forEach((point, index) => {
+        const start = (0, bezier_curve_1.isBezierCurve)(point) ? point.start : point;
+        if (index === 0) {
+            ctx.moveTo(start.x, start.y);
+        }
+        else {
+            ctx.lineTo(start.x, start.y);
+        }
+        if ((0, bezier_curve_1.isBezierCurve)(point)) {
+            ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
+        }
+    });
+};
+exports.formatCanvasPath = formatCanvasPath;
+const createCanvasPath = (ctx, paths) => {
+    ctx.beginPath();
+    (0, exports.formatCanvasPath)(ctx, paths);
+    ctx.closePath();
+};
+exports.createCanvasPath = createCanvasPath;

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

@@ -0,0 +1,312 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasRenderer = void 0;
+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 background_1 = require("../background");
+const box_sizing_1 = require("../box-sizing");
+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 canvas_path_1 = require("./canvas-path");
+const object_fit_1 = require("../object-fit");
+const content_renderer_1 = require("./content-renderer");
+const constants_1 = require("../../core/constants");
+class CanvasRenderer {
+    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;
+        if (!options.canvas) {
+            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.ctx.textBaseline = 'bottom';
+        // 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.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,
+            options: { scale: options.scale }
+        });
+        this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
+    }
+    async renderStack(stack) {
+        const styles = stack.element.container.styles;
+        if (styles.isVisible()) {
+            await this.renderStackContent(stack);
+        }
+    }
+    async renderNode(paint) {
+        if (paint.container.debugRender) {
+            debugger;
+        }
+        if (paint.container.styles.isVisible()) {
+            await this.renderNodeBackgroundAndBorders(paint);
+            await this.renderNodeContent(paint);
+        }
+    }
+    /**
+     * Helper method to render text with paint order support
+     * Reduces code duplication in line-clamp and normal rendering
+     */
+    // Helper method to truncate text and add ellipsis if needed
+    renderReplacedElement(container, curves, image) {
+        const intrinsicWidth = image.naturalWidth || container.intrinsicWidth;
+        const intrinsicHeight = image.naturalHeight || container.intrinsicHeight;
+        if (image && intrinsicWidth > 0 && intrinsicHeight > 0) {
+            const box = (0, box_sizing_1.contentBox)(container);
+            const path = (0, bound_curves_1.calculatePaddingBoxPath)(curves);
+            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, container.styles.objectPosition);
+            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
+            this.ctx.restore();
+        }
+    }
+    async renderNodeContent(paint) {
+        this.effectsRenderer.applyEffects(paint.getEffects(4 /* EffectTarget.CONTENT */));
+        const container = paint.container;
+        const curves = paint.curves;
+        const styles = container.styles;
+        // Use content box for text overflow calculation (excludes padding and border)
+        const textBounds = (0, box_sizing_1.contentBox)(container);
+        for (const child of container.textNodes) {
+            await this.textRenderer.renderTextNode(child, styles, textBounds);
+        }
+        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.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) {
+            debugger;
+        }
+        const signal = this.options.signal;
+        // https://www.w3.org/TR/css-position-3/#painting-order
+        // 1. the background and borders of the element forming the stacking context.
+        await this.renderNodeBackgroundAndBorders(stack.element);
+        // 2. the child stacking contexts with negative stack levels (most negative first).
+        for (const child of stack.negativeZIndex) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
+            await this.renderStack(child);
+        }
+        // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
+        if (signal?.aborted)
+            throw new DOMException('The operation was aborted.', 'AbortError');
+        await this.renderNodeContent(stack.element);
+        for (const child of stack.nonInlineLevel) {
+            await this.renderNode(child);
+        }
+        // 4. All non-positioned floating descendants, in tree order. For each one of these,
+        // treat the element as if it created a new stacking context, but any positioned descendants and descendants
+        // which actually create a new stacking context should be considered part of the parent stacking context,
+        // not this new one.
+        for (const child of stack.nonPositionedFloats) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
+            await this.renderStack(child);
+        }
+        // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
+        for (const child of stack.nonPositionedInlineLevel) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
+            await this.renderStack(child);
+        }
+        for (const child of stack.inlineLevel) {
+            await this.renderNode(child);
+        }
+        // 6. All positioned, opacity or transform descendants, in tree order that fall into the following categories:
+        //  All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.
+        //  For those with 'z-index: auto', treat the element as if it created a new stacking context,
+        //  but any positioned descendants and descendants which actually create a new stacking context should be
+        //  considered part of the parent stacking context, not this new one. For those with 'z-index: 0',
+        //  treat the stacking context generated atomically.
+        //
+        //  All opacity descendants with opacity less than 1
+        //
+        //  All transform descendants with transform other than none
+        for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
+            await this.renderStack(child);
+        }
+        // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index
+        // order (smallest first) then tree order.
+        for (const child of stack.positiveZIndex) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
+            await this.renderStack(child);
+        }
+    }
+    mask(paths) {
+        this.ctx.beginPath();
+        this.ctx.moveTo(0, 0);
+        // Use logical dimensions (options.width/height) instead of canvas pixel dimensions
+        // because context has already been scaled by this.options.scale
+        // Fix for Issue #126: Using canvas pixel dimensions causes broken output
+        this.ctx.lineTo(this.options.width, 0);
+        this.ctx.lineTo(this.options.width, this.options.height);
+        this.ctx.lineTo(0, this.options.height);
+        this.ctx.lineTo(0, 0);
+        this.formatPath(paths.slice(0).reverse());
+        this.ctx.closePath();
+    }
+    path(paths) {
+        (0, canvas_path_1.createCanvasPath)(this.ctx, paths);
+    }
+    formatPath(paths) {
+        (0, canvas_path_1.formatCanvasPath)(this.ctx, paths);
+    }
+    async renderNodeBackgroundAndBorders(paint) {
+        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 = [
+            { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth },
+            { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth },
+            { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth },
+            { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth }
+        ];
+        const backgroundPaintingArea = calculateBackgroundCurvedPaintingArea((0, background_1.getBackgroundValueForIndex)(styles.backgroundClip, 0), paint.curves);
+        if (hasBackground || styles.boxShadow.length) {
+            this.ctx.save();
+            this.path(backgroundPaintingArea);
+            this.ctx.clip();
+            if (!(0, color_utilities_1.isTransparent)(styles.backgroundColor)) {
+                this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.backgroundColor);
+                this.ctx.fill();
+            }
+            await this.backgroundRenderer.renderBackgroundImage(paint.container);
+            this.ctx.restore();
+            styles.boxShadow
+                .slice(0)
+                .reverse()
+                .forEach((shadow) => {
+                this.ctx.save();
+                const borderBoxArea = (0, bound_curves_1.calculateBorderBoxPath)(paint.curves);
+                const maskOffset = shadow.inset ? 0 : constants_1.SHADOW_MASK_OFFSET;
+                const shadowPaintingArea = (0, path_1.transformPath)(borderBoxArea, -maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number, (shadow.inset ? 1 : -1) * shadow.spread.number, shadow.spread.number * (shadow.inset ? -2 : 2), shadow.spread.number * (shadow.inset ? -2 : 2));
+                if (shadow.inset) {
+                    this.path(borderBoxArea);
+                    this.ctx.clip();
+                    this.mask(shadowPaintingArea);
+                }
+                else {
+                    this.mask(borderBoxArea);
+                    this.ctx.clip();
+                    this.path(shadowPaintingArea);
+                }
+                this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
+                this.ctx.shadowOffsetY = shadow.offsetY.number;
+                this.ctx.shadowColor = (0, color_utilities_1.asString)(shadow.color);
+                this.ctx.shadowBlur = shadow.blur.number;
+                this.ctx.fillStyle = shadow.inset ? (0, color_utilities_1.asString)(shadow.color) : 'rgba(0,0,0,1)';
+                this.ctx.fill();
+                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) {
+                if (border.style === 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.borderRenderer.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* BORDER_STYLE.DOTTED */);
+                }
+                else if (border.style === 4 /* BORDER_STYLE.DOUBLE */) {
+                    await this.borderRenderer.renderDoubleBorder(border.color, border.width, side, paint.curves);
+                }
+                else {
+                    await this.borderRenderer.renderSolidBorder(border.color, side, paint.curves);
+                }
+            }
+            side++;
+        }
+    }
+    async render(element) {
+        if (this.options.backgroundColor) {
+            this.ctx.fillStyle = (0, color_utilities_1.asString)(this.options.backgroundColor);
+            this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
+        }
+        const stack = (0, stacking_context_1.parseStackingContexts)(element);
+        await this.renderStack(stack);
+        this.effectsRenderer.applyEffects([]);
+        return this.canvas;
+    }
+}
+exports.CanvasRenderer = CanvasRenderer;
+const calculateBackgroundCurvedPaintingArea = (clip, curves) => {
+    switch (clip) {
+        case 0 /* BACKGROUND_CLIP.BORDER_BOX */:
+            return (0, bound_curves_1.calculateBorderBoxPath)(curves);
+        case 2 /* BACKGROUND_CLIP.CONTENT_BOX */:
+            return (0, bound_curves_1.calculateContentBoxPath)(curves);
+        case 1 /* BACKGROUND_CLIP.PADDING_BOX */:
+        default:
+            return (0, bound_curves_1.calculatePaddingBoxPath)(curves);
+    }
+};