html2canvas-pro 2.1.0 → 2.2.0

package/src/render/canvas/canvas-renderer.ts

@@ -1,641 +0,0 @@
-import { ElementPaint, parseStackingContexts, StackingContext } from '../stacking-context';
-import { Color } from '../../css/types/color';
-import { asString, isTransparent } from '../../css/types/color-utilities';
-import { ElementContainer } from '../../dom/element-container';
-import { BORDER_STYLE } from '../../css/property-descriptors/border-style';
-import { Path, transformPath } from '../path';
-import { BACKGROUND_CLIP } from '../../css/property-descriptors/background-clip';
-import { BoundCurves, calculateBorderBoxPath, calculateContentBoxPath, calculatePaddingBoxPath } from '../bound-curves';
-import { Vector } from '../vector';
-import { CSSImageType, CSSURLImage } from '../../css/types/image';
-import { getBackgroundValueForIndex } from '../background';
-import { TextBounds } from '../../css/layout/text';
-import { ImageElementContainer } from '../../dom/replaced-elements/image-element-container';
-import { contentBox } from '../box-sizing';
-import { CanvasElementContainer } from '../../dom/replaced-elements/canvas-element-container';
-import { SVGElementContainer } from '../../dom/replaced-elements/svg-element-container';
-import { ReplacedElementContainer } from '../../dom/replaced-elements';
-import { EffectTarget } from '../effects';
-import { contains } from '../../core/bitwise';
-import { getAbsoluteValue } from '../../css/types/length-percentage';
-import { FontMetrics } from '../font-metrics';
-import { DISPLAY } from '../../css/property-descriptors/display';
-import { Bounds } from '../../css/layout/bounds';
-import { IMAGE_RENDERING } from '../../css/property-descriptors/image-rendering';
-import { LIST_STYLE_TYPE } from '../../css/property-descriptors/list-style-type';
-import { computeLineHeight } from '../../css/property-descriptors/line-height';
-import {
-    CHECKBOX,
-    INPUT_COLOR,
-    PLACEHOLDER_COLOR,
-    InputElementContainer,
-    RADIO
-} from '../../dom/replaced-elements/input-element-container';
-import { TEXT_ALIGN } from '../../css/property-descriptors/text-align';
-import { TextareaElementContainer } from '../../dom/elements/textarea-element-container';
-import { SelectElementContainer } from '../../dom/elements/select-element-container';
-import { IFrameElementContainer } from '../../dom/replaced-elements/iframe-element-container';
-import { Context } from '../../core/context';
-import { BackgroundRenderer } from './background-renderer';
-import { BorderRenderer } from './border-renderer';
-import { EffectsRenderer } from './effects-renderer';
-import { TextRenderer } from './text-renderer';
-import { createCanvasPath, formatCanvasPath } from './canvas-path';
-import { calculateObjectFitRendering } from '../object-fit';
-
-export type RenderConfigurations = RenderOptions & {
-    backgroundColor: Color | null;
-    signal?: AbortSignal;
-    /**
-     * Enable/disable image smoothing (anti-aliasing).
-     * When disabled, images are rendered with pixel-perfect sharpness (no interpolation).
-     * CSS `image-rendering` property on individual elements takes precedence.
-     * @default browser default (usually true)
-     */
-    imageSmoothing?: boolean;
-    /**
-     * Image smoothing quality level when imageSmoothing is enabled.
-     * Higher quality may be slower for large images.
-     * Only supported in modern browsers (Chrome 54+, Firefox 94+, Safari 17+).
-     * Falls back gracefully in older browsers.
-     * @default browser default
-     */
-    imageSmoothingQuality?: 'low' | 'medium' | 'high';
-};
-
-export interface RenderOptions {
-    scale: number;
-    canvas?: HTMLCanvasElement;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-
-const MASK_OFFSET = 10000;
-
-export class CanvasRenderer {
-    canvas: HTMLCanvasElement;
-    ctx: CanvasRenderingContext2D;
-    private readonly context: Context;
-    private readonly options: RenderConfigurations;
-    private readonly fontMetrics: FontMetrics;
-    private readonly backgroundRenderer: BackgroundRenderer;
-    private readonly borderRenderer: BorderRenderer;
-    private readonly effectsRenderer: EffectsRenderer;
-    private readonly textRenderer: TextRenderer;
-
-    constructor(context: Context, options: RenderConfigurations) {
-        this.context = context;
-        this.options = options;
-        this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
-        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.fontMetrics = new FontMetrics(document);
-        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 BackgroundRenderer({
-            ctx: this.ctx,
-            context: this.context,
-            canvas: this.canvas,
-            options: {
-                width: options.width,
-                height: options.height,
-                scale: options.scale
-            }
-        });
-
-        this.borderRenderer = new BorderRenderer(
-            { ctx: this.ctx },
-            {
-                path: (paths) => this.path(paths),
-                formatPath: (paths) => this.formatPath(paths)
-            }
-        );
-
-        this.effectsRenderer = new EffectsRenderer({ ctx: this.ctx }, { path: (paths) => this.path(paths) });
-
-        this.textRenderer = new 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}`
-        );
-    }
-
-    async renderStack(stack: StackingContext): Promise<void> {
-        const styles = stack.element.container.styles;
-        if (styles.isVisible()) {
-            await this.renderStackContent(stack);
-        }
-    }
-
-    async renderNode(paint: ElementPaint): Promise<void> {
-        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: ReplacedElementContainer,
-        curves: BoundCurves,
-        image: HTMLImageElement | HTMLCanvasElement
-    ): void {
-        const intrinsicWidth = (image as HTMLImageElement).naturalWidth || container.intrinsicWidth;
-        const intrinsicHeight = (image as HTMLImageElement).naturalHeight || container.intrinsicHeight;
-        if (image && intrinsicWidth > 0 && intrinsicHeight > 0) {
-            const box = contentBox(container);
-            const path = calculatePaddingBoxPath(curves);
-            this.path(path);
-            this.ctx.save();
-            this.ctx.clip();
-            const { sx, sy, sw, sh, dx, dy, dw, dh } = calculateObjectFitRendering(
-                intrinsicWidth,
-                intrinsicHeight,
-                box,
-                container.styles.objectFit
-            );
-            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
-            this.ctx.restore();
-        }
-    }
-
-    async renderNodeContent(paint: ElementPaint): Promise<void> {
-        this.effectsRenderer.applyEffects(paint.getEffects(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)
-        // This matches browser behavior where text-overflow uses the content width
-        const textBounds = contentBox(container);
-        for (const child of container.textNodes) {
-            await this.textRenderer.renderTextNode(child, styles, textBounds);
-        }
-
-        if (container instanceof 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.PIXELATED ||
-                    styles.imageRendering === IMAGE_RENDERING.CRISP_EDGES
-                ) {
-                    this.context.logger.debug(
-                        `Disabling image smoothing for ${container.src} due to CSS image-rendering: ${styles.imageRendering === IMAGE_RENDERING.PIXELATED ? 'pixelated' : 'crisp-edges'}`
-                    );
-                    this.ctx.imageSmoothingEnabled = false;
-                } else if (styles.imageRendering === 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 CanvasElementContainer) {
-            this.renderReplacedElement(container, curves, container.canvas);
-        }
-
-        if (container instanceof 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 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 InputElementContainer) {
-            const size = Math.min(container.bounds.width, container.bounds.height);
-
-            if (container.type === CHECKBOX) {
-                if (container.checked) {
-                    this.ctx.save();
-                    this.path([
-                        new Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79),
-                        new Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549),
-                        new Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071),
-                        new Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649),
-                        new Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23),
-                        new Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085),
-                        new Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79)
-                    ]);
-
-                    this.ctx.fillStyle = asString(INPUT_COLOR);
-                    this.ctx.fill();
-                    this.ctx.restore();
-                }
-            } else if (container.type === 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 = asString(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 InputElementContainer && container.isPlaceholder;
-            this.ctx.fillStyle = isPlaceholder ? asString(PLACEHOLDER_COLOR) : asString(styles.color);
-
-            this.ctx.textBaseline = 'alphabetic';
-            this.ctx.textAlign = canvasTextAlign(container.styles.textAlign);
-
-            const bounds = contentBox(container);
-
-            let x = 0;
-
-            switch (container.styles.textAlign) {
-                case TEXT_ALIGN.CENTER:
-                    x += bounds.width / 2;
-                    break;
-                case 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 InputElementContainer) {
-                const fontSizeValue = 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(bounds.left, bounds.top),
-                new Vector(bounds.left + bounds.width, bounds.top),
-                new Vector(bounds.left + bounds.width, bounds.top + bounds.height),
-                new Vector(bounds.left, bounds.top + bounds.height)
-            ]);
-
-            this.ctx.clip();
-
-            this.textRenderer.renderTextWithLetterSpacing(
-                new TextBounds(container.value, textBounds),
-                styles.letterSpacing,
-                baseline,
-                styles.writingMode
-            );
-            this.ctx.restore();
-            this.ctx.textBaseline = 'alphabetic';
-            this.ctx.textAlign = 'left';
-        }
-
-        if (contains(container.styles.display, DISPLAY.LIST_ITEM)) {
-            if (container.styles.listStyleImage !== null) {
-                const img = container.styles.listStyleImage;
-                if (img.type === CSSImageType.URL) {
-                    let image;
-                    const url = (img as CSSURLImage).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 !== LIST_STYLE_TYPE.NONE) {
-                const [font] = this.textRenderer.createFontStyle(styles);
-
-                this.ctx.font = font;
-                this.ctx.fillStyle = asString(styles.color);
-
-                this.ctx.textBaseline = 'middle';
-                this.ctx.textAlign = 'right';
-                const bounds = new Bounds(
-                    container.bounds.left,
-                    container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width),
-                    container.bounds.width,
-                    computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1
-                );
-
-                this.textRenderer.renderTextWithLetterSpacing(
-                    new TextBounds(paint.listValue, bounds),
-                    styles.letterSpacing,
-                    computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2,
-                    styles.writingMode
-                );
-                this.ctx.textBaseline = 'bottom';
-                this.ctx.textAlign = 'left';
-            }
-        }
-    }
-
-    async renderStackContent(stack: StackingContext): Promise<void> {
-        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: Path[]): void {
-        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: Path[]): void {
-        createCanvasPath(this.ctx, paths);
-    }
-
-    formatPath(paths: Path[]): void {
-        formatCanvasPath(this.ctx, paths);
-    }
-
-    async renderNodeBackgroundAndBorders(paint: ElementPaint): Promise<void> {
-        this.effectsRenderer.applyEffects(paint.getEffects(EffectTarget.BACKGROUND_BORDERS));
-        const styles = paint.container.styles;
-        const hasBackground = !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(
-            getBackgroundValueForIndex(styles.backgroundClip, 0),
-            paint.curves
-        );
-
-        if (hasBackground || styles.boxShadow.length) {
-            this.ctx.save();
-            this.path(backgroundPaintingArea);
-            this.ctx.clip();
-
-            if (!isTransparent(styles.backgroundColor)) {
-                this.ctx.fillStyle = 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 = calculateBorderBoxPath(paint.curves);
-                    const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
-                    const shadowPaintingArea = 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 = asString(shadow.color);
-                    this.ctx.shadowBlur = shadow.blur.number;
-                    this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : 'rgba(0,0,0,1)';
-
-                    this.ctx.fill();
-                    this.ctx.restore();
-                });
-        }
-
-        let side = 0;
-        for (const border of borders) {
-            if (border.style !== BORDER_STYLE.NONE && !isTransparent(border.color) && border.width > 0) {
-                if (border.style === BORDER_STYLE.DASHED) {
-                    await this.borderRenderer.renderDashedDottedBorder(
-                        border.color,
-                        border.width,
-                        side,
-                        paint.curves,
-                        BORDER_STYLE.DASHED
-                    );
-                } else if (border.style === BORDER_STYLE.DOTTED) {
-                    await this.borderRenderer.renderDashedDottedBorder(
-                        border.color,
-                        border.width,
-                        side,
-                        paint.curves,
-                        BORDER_STYLE.DOTTED
-                    );
-                } else if (border.style === 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: ElementContainer): Promise<HTMLCanvasElement> {
-        if (this.options.backgroundColor) {
-            this.ctx.fillStyle = asString(this.options.backgroundColor);
-            this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height);
-        }
-
-        const stack = parseStackingContexts(element);
-
-        await this.renderStack(stack);
-        this.effectsRenderer.applyEffects([]);
-        return this.canvas;
-    }
-}
-
-const isTextInputElement = (
-    container: ElementContainer
-): container is InputElementContainer | TextareaElementContainer | SelectElementContainer => {
-    if (container instanceof TextareaElementContainer) {
-        return true;
-    } else if (container instanceof SelectElementContainer) {
-        return true;
-    } else if (container instanceof InputElementContainer && container.type !== RADIO && container.type !== CHECKBOX) {
-        return true;
-    }
-    return false;
-};
-
-const calculateBackgroundCurvedPaintingArea = (clip: BACKGROUND_CLIP, curves: BoundCurves): Path[] => {
-    switch (clip) {
-        case BACKGROUND_CLIP.BORDER_BOX:
-            return calculateBorderBoxPath(curves);
-        case BACKGROUND_CLIP.CONTENT_BOX:
-            return calculateContentBoxPath(curves);
-        case BACKGROUND_CLIP.PADDING_BOX:
-        default:
-            return calculatePaddingBoxPath(curves);
-    }
-};
-
-const canvasTextAlign = (textAlign: TEXT_ALIGN): CanvasTextAlign => {
-    switch (textAlign) {
-        case TEXT_ALIGN.CENTER:
-            return 'center';
-        case TEXT_ALIGN.RIGHT:
-            return 'right';
-        case TEXT_ALIGN.LEFT:
-        default:
-            return 'left';
-    }
-};