html2canvas-pro 2.0.4 → 2.1.1

package/dist/lib/dom/node-type-guards.js

@@ -1,44 +1,81 @@
 "use strict";
 /**
  * DOM Node Type Guards
- * Extracted to break circular dependencies
+ *
+ * All DOM node type guards consolidated here to eliminate duplication
+ * and provide a single source of truth for node type checking.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCustomElement = exports.isOLElement = exports.isLIElement = exports.isHTMLElementNode = exports.isSVGElementNode = exports.isTextNode = exports.isElementNode = void 0;
-/**
- * Check if node is an Element
- */
+exports.canHavePseudoElements = exports.isCustomElement = exports.isOLElement = exports.isLIElement = exports.isSlotElement = exports.isSelectElement = exports.isTextareaElement = exports.isScriptElement = exports.isStyleElement = exports.isIFrameElement = exports.isImageElement = exports.isVideoElement = exports.isCanvasElement = exports.isBodyElement = exports.isSVGElement = exports.isHTMLElement = exports.isInputElement = exports.isHTMLElementNode = exports.isSVGElementNode = exports.isTextNode = exports.isElementNode = void 0;
+// --- Generic node type guards ---
 const isElementNode = (node) => node.nodeType === Node.ELEMENT_NODE;
 exports.isElementNode = isElementNode;
-/**
- * Check if node is a Text node
- */
 const isTextNode = (node) => node.nodeType === Node.TEXT_NODE;
 exports.isTextNode = isTextNode;
-/**
- * Check if element is an SVG element
- */
 const isSVGElementNode = (element) => typeof element.className === 'object';
 exports.isSVGElementNode = isSVGElementNode;
-/**
- * Check if node is an HTML element
- */
 const isHTMLElementNode = (node) => (0, exports.isElementNode)(node) && typeof node.style !== 'undefined' && !(0, exports.isSVGElementNode)(node);
 exports.isHTMLElementNode = isHTMLElementNode;
-/**
- * Check if node is an LI element
- */
+// --- Tag name based type guards ---
+const isInputElement = (node) => node.tagName === 'INPUT';
+exports.isInputElement = isInputElement;
+const isHTMLElement = (node) => node.tagName === 'HTML';
+exports.isHTMLElement = isHTMLElement;
+const isSVGElement = (node) => node.tagName === 'svg';
+exports.isSVGElement = isSVGElement;
+const isBodyElement = (node) => node.tagName === 'BODY';
+exports.isBodyElement = isBodyElement;
+const isCanvasElement = (node) => node.tagName === 'CANVAS';
+exports.isCanvasElement = isCanvasElement;
+const isVideoElement = (node) => node.tagName === 'VIDEO';
+exports.isVideoElement = isVideoElement;
+const isImageElement = (node) => node.tagName === 'IMG';
+exports.isImageElement = isImageElement;
+const isIFrameElement = (node) => node.tagName === 'IFRAME';
+exports.isIFrameElement = isIFrameElement;
+const isStyleElement = (node) => node.tagName === 'STYLE';
+exports.isStyleElement = isStyleElement;
+const isScriptElement = (node) => node.tagName === 'SCRIPT';
+exports.isScriptElement = isScriptElement;
+const isTextareaElement = (node) => node.tagName === 'TEXTAREA';
+exports.isTextareaElement = isTextareaElement;
+const isSelectElement = (node) => node.tagName === 'SELECT';
+exports.isSelectElement = isSelectElement;
+const isSlotElement = (node) => node.tagName === 'SLOT';
+exports.isSlotElement = isSlotElement;
 const isLIElement = (node) => node.tagName === 'LI';
 exports.isLIElement = isLIElement;
-/**
- * Check if node is an OL element
- */
 const isOLElement = (node) => node.tagName === 'OL';
 exports.isOLElement = isOLElement;
-/**
- * Check if element is a custom element
- * Custom elements must have a hyphen and cannot be SVG elements
- */
 const isCustomElement = (element) => !(0, exports.isSVGElementNode)(element) && element.tagName.indexOf('-') > 0;
 exports.isCustomElement = isCustomElement;
-//# sourceMappingURL=node-type-guards.js.map
+const VOID_OR_REPLACED_TAGS = new Set([
+    'IMG',
+    'VIDEO',
+    'AUDIO',
+    'CANVAS',
+    'IFRAME',
+    'INPUT',
+    'TEXTAREA',
+    'SELECT',
+    'BR',
+    'HR',
+    'META',
+    'LINK',
+    'BASE',
+    'COL',
+    'SOURCE',
+    'TRACK',
+    'WBR',
+    'AREA',
+    'PARAM',
+    'EMBED',
+    'OBJECT'
+]);
+/**
+ * Check if an element can have ::before / ::after pseudo-elements.
+ * Per the CSS spec, replaced elements and void elements cannot have pseudo-elements.
+ * SVG elements also do not support pseudo-elements.
+ */
+const canHavePseudoElements = (element) => !(0, exports.isSVGElementNode)(element) && !VOID_OR_REPLACED_TAGS.has(element.tagName);
+exports.canHavePseudoElements = canHavePseudoElements;

package/dist/lib/dom/replaced-elements/canvas-element-container.js

@@ -11,4 +11,3 @@ class CanvasElementContainer extends element_container_1.ElementContainer {
     }
 }
 exports.CanvasElementContainer = CanvasElementContainer;
-//# sourceMappingURL=canvas-element-container.js.map

package/dist/lib/dom/replaced-elements/iframe-element-container.js

@@ -36,4 +36,3 @@ class IFrameElementContainer extends element_container_1.ElementContainer {
     }
 }
 exports.IFrameElementContainer = IFrameElementContainer;
-//# sourceMappingURL=iframe-element-container.js.map

package/dist/lib/dom/replaced-elements/image-element-container.js

@@ -12,4 +12,3 @@ class ImageElementContainer extends element_container_1.ElementContainer {
     }
 }
 exports.ImageElementContainer = ImageElementContainer;
-//# sourceMappingURL=image-element-container.js.map

package/dist/lib/dom/replaced-elements/index.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=index.js.map

package/dist/lib/dom/replaced-elements/input-element-container.js

@@ -87,4 +87,3 @@ class InputElementContainer extends element_container_1.ElementContainer {
     }
 }
 exports.InputElementContainer = InputElementContainer;
-//# sourceMappingURL=input-element-container.js.map

package/dist/lib/dom/replaced-elements/pseudo-elements.js

@@ -1 +0,0 @@
-//# sourceMappingURL=pseudo-elements.js.map

package/dist/lib/dom/replaced-elements/svg-element-container.js

@@ -17,4 +17,3 @@ class SVGElementContainer extends element_container_1.ElementContainer {
     }
 }
 exports.SVGElementContainer = SVGElementContainer;
-//# sourceMappingURL=svg-element-container.js.map

package/dist/lib/dom/text-container.js

@@ -33,4 +33,3 @@ const capitalize = (m, p1, p2) => {
     }
     return m;
 };
-//# sourceMappingURL=text-container.js.map

package/dist/lib/index.js

@@ -1,14 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMAGE_RENDERING = exports.PerformanceMonitor = exports.createDefaultValidator = exports.Validator = exports.Html2CanvasConfig = exports.setCspNonce = exports.html2canvas = void 0;
-const bounds_1 = require("./css/layout/bounds");
-const color_1 = require("./css/types/color");
-const color_utilities_1 = require("./css/types/color-utilities");
-const document_cloner_1 = require("./dom/document-cloner");
-const node_parser_1 = require("./dom/node-parser");
-const canvas_renderer_1 = require("./render/canvas/canvas-renderer");
-const foreignobject_renderer_1 = require("./render/canvas/foreignobject-renderer");
-const context_1 = require("./core/context");
+exports.IMAGE_RENDERING = exports.PerformanceMonitor = exports.createDefaultValidator = exports.Validator = exports.Html2CanvasConfig = exports.html2canvas = void 0;
 const config_1 = require("./config");
 Object.defineProperty(exports, "Html2CanvasConfig", { enumerable: true, get: function () { return config_1.Html2CanvasConfig; } });
 const validator_1 = require("./core/validator");
@@ -16,228 +8,58 @@ Object.defineProperty(exports, "createDefaultValidator", { enumerable: true, get
 Object.defineProperty(exports, "Validator", { enumerable: true, get: function () { return validator_1.Validator; } });
 const performance_monitor_1 = require("./core/performance-monitor");
 Object.defineProperty(exports, "PerformanceMonitor", { enumerable: true, get: function () { return performance_monitor_1.PerformanceMonitor; } });
+const render_element_1 = require("./core/render-element");
 /**
- * Main html2canvas function with improved configuration management
+ * Renders an HTML element to a `<canvas>` element.
  *
- * @param element - Element to render
- * @param options - Rendering options
- * @param config - Optional configuration (for advanced use cases)
- * @returns Promise resolving to rendered canvas
+ * The function clones the target element and its subtree into a hidden iframe,
+ * resolves all computed styles, and paints the result onto a canvas —
+ * producing a visual snapshot of the DOM as it appears in the browser.
+ *
+ * @example
+ * ```ts
+ * import html2canvas from 'html2canvas-pro';
+ *
+ * const canvas = await html2canvas(document.body, {
+ *   backgroundColor: '#ffffff',
+ *   scale: 2,
+ *   useCORS: true
+ * });
+ * document.body.appendChild(canvas);
+ * ```
+ *
+ * @param element - The root HTMLElement to render.
+ * @param options - Rendering options.
+ * @param config  - Advanced configuration. In most cases this is auto-created;
+ *                  only pass it if you need to share a cache across multiple calls.
+ * @returns A promise that resolves to the rendered HTMLCanvasElement.
+ *
+ * @throws {Error} If the element is not attached to a document.
+ * @throws {DOMException} If an {@link Options.signal|AbortSignal} was provided and the operation was aborted.
  */
 const html2canvas = (element, options = {}, config) => {
-    // Create configuration from element if not provided
     const finalConfig = config ||
         config_1.Html2CanvasConfig.fromElement(element, {
             cspNonce: options.cspNonce,
             cache: options.cache
         });
-    return renderElement(element, options, finalConfig);
+    return (0, render_element_1.renderElement)(element, options, finalConfig);
 };
 exports.html2canvas = html2canvas;
 /**
- * Set CSP nonce for inline styles
- * @deprecated Use options.cspNonce instead
+ * Set CSP nonce for inline styles.
+ *
+ * @deprecated Since 2.0.0. Pass `cspNonce` in options instead:
+ *             `html2canvas(element, { cspNonce: '...' })`
  */
 const setCspNonce = (nonce) => {
     console.warn('[html2canvas-pro] setCspNonce is deprecated. ' +
         'Pass cspNonce in options instead: html2canvas(element, { cspNonce: "..." })');
-    // For backward compatibility, set default config
     if (typeof window !== 'undefined') {
         (0, config_1.setDefaultConfig)(new config_1.Html2CanvasConfig({ window, cspNonce: nonce }));
     }
 };
-exports.setCspNonce = setCspNonce;
 html2canvas.setCspNonce = setCspNonce;
 exports.default = html2canvas;
 var image_rendering_1 = require("./css/property-descriptors/image-rendering");
 Object.defineProperty(exports, "IMAGE_RENDERING", { enumerable: true, get: function () { return image_rendering_1.IMAGE_RENDERING; } });
-/**
- * Coerce number-like option values for backward compatibility (e.g. string "2" from form/query).
- * Mutates opts in place; callers should avoid reusing the same options object if they rely on original types.
- */
-const coerceNumberOptions = (opts) => {
-    const numKeys = [
-        'scale',
-        'width',
-        'height',
-        'imageTimeout',
-        'x',
-        'y',
-        'windowWidth',
-        'windowHeight',
-        'scrollX',
-        'scrollY'
-    ];
-    numKeys.forEach((key) => {
-        const v = opts[key];
-        if (v !== undefined && v !== null && typeof v !== 'number') {
-            const n = Number(v);
-            if (!Number.isNaN(n)) {
-                opts[key] = n;
-            }
-        }
-    });
-};
-const renderElement = async (element, opts, config) => {
-    coerceNumberOptions(opts);
-    // Input validation (unless explicitly skipped)
-    if (!opts.skipValidation) {
-        const validator = opts.validator || (0, validator_1.createDefaultValidator)();
-        // Validate element
-        const elementValidation = validator.validateElement(element);
-        if (!elementValidation.valid) {
-            throw new Error(elementValidation.error);
-        }
-        // Validate options
-        const optionsValidation = validator.validateOptions(opts);
-        if (!optionsValidation.valid) {
-            throw new Error(`Invalid options: ${optionsValidation.error}`);
-        }
-    }
-    if (!element || typeof element !== 'object') {
-        throw new Error('Invalid element provided as first argument');
-    }
-    const ownerDocument = element.ownerDocument;
-    if (!ownerDocument) {
-        throw new Error(`Element is not attached to a Document`);
-    }
-    const defaultView = ownerDocument.defaultView;
-    if (!defaultView) {
-        throw new Error(`Document is not attached to a Window`);
-    }
-    const resourceOptions = {
-        allowTaint: opts.allowTaint ?? false,
-        imageTimeout: opts.imageTimeout ?? 15000,
-        proxy: opts.proxy,
-        useCORS: opts.useCORS ?? false,
-        customIsSameOrigin: opts.customIsSameOrigin
-    };
-    const contextOptions = {
-        logging: opts.logging ?? true,
-        cache: opts.cache ?? config.cache,
-        ...resourceOptions
-    };
-    // Fallbacks for minimal window (e.g. element-like mocks) so we don't get NaN
-    const DEFAULT_WINDOW_WIDTH = 800;
-    const DEFAULT_WINDOW_HEIGHT = 600;
-    const DEFAULT_SCROLL = 0;
-    const win = defaultView;
-    const windowOptions = {
-        windowWidth: opts.windowWidth ?? win.innerWidth ?? DEFAULT_WINDOW_WIDTH,
-        windowHeight: opts.windowHeight ?? win.innerHeight ?? DEFAULT_WINDOW_HEIGHT,
-        scrollX: opts.scrollX ?? win.pageXOffset ?? DEFAULT_SCROLL,
-        scrollY: opts.scrollY ?? win.pageYOffset ?? DEFAULT_SCROLL
-    };
-    const windowBounds = new bounds_1.Bounds(windowOptions.scrollX, windowOptions.scrollY, windowOptions.windowWidth, windowOptions.windowHeight);
-    const context = new context_1.Context(contextOptions, windowBounds, config);
-    // Initialize performance monitoring if enabled
-    const performanceMonitoring = opts.enablePerformanceMonitoring ?? opts.logging ?? false;
-    const perfMonitor = new performance_monitor_1.PerformanceMonitor(context, performanceMonitoring);
-    perfMonitor.start('total', {
-        width: windowOptions.windowWidth,
-        height: windowOptions.windowHeight
-    });
-    const foreignObjectRendering = opts.foreignObjectRendering ?? false;
-    const cloneOptions = {
-        allowTaint: opts.allowTaint ?? false,
-        onclone: opts.onclone,
-        ignoreElements: opts.ignoreElements,
-        iframeContainer: opts.iframeContainer,
-        inlineImages: foreignObjectRendering,
-        copyStyles: foreignObjectRendering,
-        cspNonce: opts.cspNonce ?? config.cspNonce
-    };
-    context.logger.debug(`Starting document clone with size ${windowBounds.width}x${windowBounds.height} scrolled to ${-windowBounds.left},${-windowBounds.top}`);
-    perfMonitor.start('clone');
-    const documentCloner = new document_cloner_1.DocumentCloner(context, element, cloneOptions);
-    const clonedElement = documentCloner.clonedReferenceElement;
-    if (!clonedElement) {
-        throw new Error('Unable to find element in cloned iframe');
-    }
-    const container = await documentCloner.toIFrame(ownerDocument, windowBounds);
-    perfMonitor.end('clone');
-    const { width, height, left, top } = (0, node_parser_1.isBodyElement)(clonedElement) || (0, node_parser_1.isHTMLElement)(clonedElement)
-        ? (0, bounds_1.parseDocumentSize)(clonedElement.ownerDocument)
-        : (0, bounds_1.parseBounds)(context, clonedElement);
-    const backgroundColor = parseBackgroundColor(context, clonedElement, opts.backgroundColor);
-    const renderOptions = {
-        canvas: opts.canvas,
-        backgroundColor,
-        scale: opts.scale ?? defaultView.devicePixelRatio ?? 1,
-        x: (opts.x ?? 0) + left,
-        y: (opts.y ?? 0) + top,
-        width: opts.width ?? Math.ceil(width),
-        height: opts.height ?? Math.ceil(height),
-        imageSmoothing: opts.imageSmoothing,
-        imageSmoothingQuality: opts.imageSmoothingQuality
-    };
-    let canvas;
-    let root;
-    try {
-        if (foreignObjectRendering) {
-            context.logger.debug(`Document cloned, using foreign object rendering`);
-            perfMonitor.start('render-foreignobject');
-            const renderer = new foreignobject_renderer_1.ForeignObjectRenderer(context, renderOptions);
-            canvas = await renderer.render(clonedElement);
-            perfMonitor.end('render-foreignobject');
-        }
-        else {
-            context.logger.debug(`Document cloned, element located at ${left},${top} with size ${width}x${height} using computed rendering`);
-            context.logger.debug(`Starting DOM parsing`);
-            perfMonitor.start('parse');
-            root = (0, node_parser_1.parseTree)(context, clonedElement);
-            perfMonitor.end('parse');
-            if (backgroundColor === root.styles.backgroundColor) {
-                root.styles.backgroundColor = color_1.COLORS.TRANSPARENT;
-            }
-            context.logger.debug(`Starting renderer for element at ${renderOptions.x},${renderOptions.y} with size ${renderOptions.width}x${renderOptions.height}`);
-            perfMonitor.start('render');
-            const renderer = new canvas_renderer_1.CanvasRenderer(context, renderOptions);
-            canvas = await renderer.render(root);
-            perfMonitor.end('render');
-        }
-        perfMonitor.start('cleanup');
-        if (opts.removeContainer ?? true) {
-            if (!document_cloner_1.DocumentCloner.destroy(container)) {
-                context.logger.error(`Cannot detach cloned iframe as it is not in the DOM anymore`);
-            }
-        }
-        perfMonitor.end('cleanup');
-        perfMonitor.end('total');
-        context.logger.debug(`Finished rendering`);
-        // Log performance summary if monitoring is enabled
-        if (performanceMonitoring) {
-            perfMonitor.logSummary();
-        }
-        return canvas;
-    }
-    finally {
-        // Restore DOM modifications (animations, transforms) in cloned document
-        if (root) {
-            root.restoreTree();
-        }
-    }
-};
-const parseBackgroundColor = (context, element, backgroundColorOverride) => {
-    const ownerDocument = element.ownerDocument;
-    // http://www.w3.org/TR/css3-background/#special-backgrounds
-    const documentBackgroundColor = ownerDocument.documentElement
-        ? (0, color_1.parseColor)(context, getComputedStyle(ownerDocument.documentElement).backgroundColor)
-        : color_1.COLORS.TRANSPARENT;
-    const bodyBackgroundColor = ownerDocument.body
-        ? (0, color_1.parseColor)(context, getComputedStyle(ownerDocument.body).backgroundColor)
-        : color_1.COLORS.TRANSPARENT;
-    const defaultBackgroundColor = typeof backgroundColorOverride === 'string'
-        ? (0, color_1.parseColor)(context, backgroundColorOverride)
-        : backgroundColorOverride === null
-            ? color_1.COLORS.TRANSPARENT
-            : 0xffffffff;
-    return element === ownerDocument.documentElement
-        ? (0, color_utilities_1.isTransparent)(documentBackgroundColor)
-            ? (0, color_utilities_1.isTransparent)(bodyBackgroundColor)
-                ? defaultBackgroundColor
-                : bodyBackgroundColor
-            : documentBackgroundColor
-        : defaultBackgroundColor;
-};
-//# sourceMappingURL=index.js.map

package/dist/lib/options.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/lib/render/background.js

@@ -183,4 +183,3 @@ const calculateBackgroundRepeatPath = (repeat, [x, y], [width, height], backgrou
     }
 };
 exports.calculateBackgroundRepeatPath = calculateBackgroundRepeatPath;
-//# sourceMappingURL=background.js.map

package/dist/lib/render/bezier-curve.js

@@ -32,4 +32,3 @@ class BezierCurve {
 exports.BezierCurve = BezierCurve;
 const isBezierCurve = (path) => path.type === 1 /* PathType.BEZIER_CURVE */;
 exports.isBezierCurve = isBezierCurve;
-//# sourceMappingURL=bezier-curve.js.map

package/dist/lib/render/border.js

@@ -102,4 +102,3 @@ const createPathFromCurves = (outer1, inner1, outer2, inner2) => {
     }
     return path;
 };
-//# sourceMappingURL=border.js.map

package/dist/lib/render/bound-curves.js

@@ -186,4 +186,3 @@ const calculatePaddingBoxPath = (curves) => {
     ];
 };
 exports.calculatePaddingBoxPath = calculatePaddingBoxPath;
-//# sourceMappingURL=bound-curves.js.map

package/dist/lib/render/box-sizing.js

@@ -18,4 +18,3 @@ const contentBox = (element) => {
     return bounds.add(paddingLeft + styles.borderLeftWidth, paddingTop + styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth + paddingLeft + paddingRight), -(styles.borderTopWidth + styles.borderBottomWidth + paddingTop + paddingBottom));
 };
 exports.contentBox = contentBox;
-//# sourceMappingURL=box-sizing.js.map

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

@@ -16,8 +16,8 @@ const background_1 = require("../background");
 const gradient_1 = require("../../css/types/functions/gradient");
 const length_percentage_1 = require("../../css/types/length-percentage");
 const color_utilities_1 = require("../../css/types/color-utilities");
-const bezier_curve_1 = require("../bezier-curve");
 const image_rendering_1 = require("../../css/property-descriptors/image-rendering");
+const canvas_path_1 = require("./canvas-path");
 /**
  * Background Renderer
  *
@@ -87,6 +87,9 @@ class BackgroundRenderer {
         canvas.width = width;
         canvas.height = height;
         const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
         const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
         (0, gradient_1.processColorStops)(backgroundImage.stops, lineLength || 1).forEach((colorStop) => gradient.addColorStop(colorStop.stop, (0, color_utilities_1.asString)(colorStop.color)));
         ctx.fillStyle = gradient;
@@ -168,6 +171,9 @@ class BackgroundRenderer {
         canvas.width = Math.max(1, width);
         canvas.height = Math.max(1, height);
         const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return image;
+        }
         // Apply image smoothing based on CSS image-rendering property
         if (imageRendering === image_rendering_1.IMAGE_RENDERING.PIXELATED || imageRendering === image_rendering_1.IMAGE_RENDERING.CRISP_EDGES) {
             this.context.logger.debug(`Disabling image smoothing for background image due to CSS image-rendering`);
@@ -194,29 +200,7 @@ class BackgroundRenderer {
      * @param paths - Array of path points
      */
     path(paths) {
-        this.ctx.beginPath();
-        this.formatPath(paths);
-        this.ctx.closePath();
-    }
-    /**
-     * Format path points into canvas path
-     *
-     * @param paths - Array of path points
-     */
-    formatPath(paths) {
-        paths.forEach((point, index) => {
-            const start = (0, bezier_curve_1.isBezierCurve)(point) ? point.start : point;
-            if (index === 0) {
-                this.ctx.moveTo(start.x, start.y);
-            }
-            else {
-                this.ctx.lineTo(start.x, start.y);
-            }
-            if ((0, bezier_curve_1.isBezierCurve)(point)) {
-                this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
-            }
-        });
+        (0, canvas_path_1.createCanvasPath)(this.ctx, paths);
     }
 }
 exports.BackgroundRenderer = BackgroundRenderer;
-//# sourceMappingURL=background-renderer.js.map

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

@@ -182,4 +182,3 @@ class BorderRenderer {
     }
 }
 exports.BorderRenderer = BorderRenderer;
-//# sourceMappingURL=border-renderer.js.map

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;