modern-path2d 0.1.9 → 0.1.11

package/dist/index.d.cts

@@ -65,81 +65,6 @@ declare class BoundingBox {
     toArray(): [number, number, number, number];
 }
 
-declare class CurvePath extends Curve {
-    curves: Curve[];
-    currentPoint: Vector2;
-    autoClose: boolean;
-    protected _cacheLengths: number[];
-    constructor(points?: Vector2[]);
-    addCurve(curve: Curve): this;
-    closePath(): this;
-    getPoint(position: number, output?: Vector2): Vector2;
-    getLength(): number;
-    updateArcLengths(): void;
-    getCurveLengths(): number[];
-    getSpacedPoints(divisions?: number): Vector2[];
-    getPoints(divisions?: number): Vector2[];
-    setFromPoints(points: Vector2[]): this;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
-    lineTo(x: number, y: number): this;
-    moveTo(x: number, y: number): this;
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
-    rect(x: number, y: number, w: number, h: number): this;
-    splineThru(points: Vector2[]): this;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
-    absarc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    absellipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    getCommands(): PathCommand[];
-    getMinMax(min?: Vector2, max?: Vector2): {
-        min: Vector2;
-        max: Vector2;
-    };
-    drawTo(ctx: CanvasRenderingContext2D): this;
-    copy(source: CurvePath): this;
-}
-
-/**
- * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
- */
-declare class Path2D<T = any> {
-    currentPath: CurvePath;
-    paths: CurvePath[];
-    userData?: T;
-    constructor(path?: Path2D | PathCommand[] | string);
-    addPath(path: Path2D | CurvePath): this;
-    closePath(): this;
-    moveTo(x: number, y: number): this;
-    lineTo(x: number, y: number): this;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    rect(x: number, y: number, w: number, h: number): this;
-    addCommands(commands: PathCommand[]): this;
-    addData(data: string): this;
-    splineThru(points: Vector2[]): this;
-    forEachCurve(cb: (curve: Curve) => void): this;
-    transformPoint(cb: (point: Vector2) => void): this;
-    transform(matrix: Matrix3): this;
-    getMinMax(min?: Vector2, max?: Vector2): {
-        min: Vector2;
-        max: Vector2;
-    };
-    getBoundingBox(): BoundingBox;
-    getCommands(): PathCommand[];
-    getData(): string;
-    getSvgString(): string;
-    getSvgDataUri(): string;
-    drawTo(ctx: CanvasRenderingContext2D): void;
-    strokeTo(ctx: CanvasRenderingContext2D): void;
-    fillTo(ctx: CanvasRenderingContext2D): void;
-    copy(source: Path2D): this;
-    toCanvas(fill?: boolean): HTMLCanvasElement;
-    clone(): this;
-}
-
 /**
  * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
  */
@@ -193,6 +118,49 @@ type PathCommand = {
 } | {
     type: 'z' | 'Z';
 };
+type FillRule = 'nonzero' | 'evenodd';
+type StrokeLinecap = 'butt' | 'round' | 'square';
+type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
+interface PathStyle {
+    [key: string]: any;
+    fill?: string;
+    fillOpacity?: number;
+    fillRule?: FillRule;
+    opacity?: number;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeLinecap?: StrokeLinecap;
+    strokeLinejoin?: StrokeLinejoin;
+    strokeMiterlimit?: number;
+    strokeDasharray?: number[];
+    strokeDashoffset?: number;
+    visibility?: string;
+}
+
+/**
+ * @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
+ */
+declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
+
+/**
+ * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
+ * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
+ * From
+ * rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ * To
+ * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
+ */
+declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
+
+/**
+ * from https://github.com/ppvg/svg-numbers (MIT License)
+ */
+declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
+
+declare function pathCommandsToPathData(commands: PathCommand[]): string;
+
+declare function pathDataToPathCommands(d: string): PathCommand[];
 
 declare abstract class Curve {
     arcLengthDivisions: number;
@@ -262,11 +230,11 @@ declare class EllipseCurve extends Curve {
     center: Vector2;
     radiusX: number;
     radiusY: number;
+    rotation: number;
     startAngle: number;
     endAngle: number;
     clockwise: boolean;
-    rotation: number;
-    constructor(center?: Vector2, radiusX?: number, radiusY?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
+    constructor(center?: Vector2, radiusX?: number, radiusY?: number, rotation?: number, startAngle?: number, endAngle?: number, clockwise?: boolean);
     getPoint(t: number, output?: Vector2): Vector2;
     getDivisions(divisions?: number): number;
     getCommands(): PathCommand[];
@@ -401,7 +369,94 @@ declare class SplineCurve extends Curve {
     copy(source: SplineCurve): this;
 }
 
+declare class CurvePath extends Curve {
+    curves: Curve[];
+    startPoint?: Vector2;
+    currentPoint: Vector2;
+    autoClose: boolean;
+    protected _cacheLengths: number[];
+    constructor(points?: Vector2[]);
+    addCurve(curve: Curve): this;
+    addPoints(points: Vector2[]): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
+    getPoint(t: number, output?: Vector2): Vector2;
+    getLength(): number;
+    updateArcLengths(): void;
+    getCurveLengths(): number[];
+    getSpacedPoints(divisions?: number): Vector2[];
+    getPoints(divisions?: number): Vector2[];
+    protected _setCurrentPoint(point: VectorLike): this;
+    closePath(): this;
+    moveTo(x: number, y: number): this;
+    lineTo(x: number, y: number): this;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    relativeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    rect(x: number, y: number, w: number, h: number): this;
+    splineThru(points: Vector2[]): this;
+    transformPoint(cb: (point: Vector2) => void): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
+    };
+    getBoundingBox(): BoundingBox;
+    getCommands(): PathCommand[];
+    drawTo(ctx: CanvasRenderingContext2D): this;
+    copy(source: CurvePath): this;
+}
+
+/**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
+ */
+declare class Path2D {
+    currentPath: CurvePath;
+    paths: CurvePath[];
+    style: PathStyle;
+    get startPoint(): Vector2 | undefined;
+    get currentPoint(): Vector2 | undefined;
+    get strokeWidth(): number;
+    constructor(path?: Path2D | PathCommand[] | string);
+    addPath(path: Path2D | CurvePath): this;
+    closePath(): this;
+    moveTo(x: number, y: number): this;
+    lineTo(x: number, y: number): this;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    rect(x: number, y: number, w: number, h: number): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
+    splineThru(points: Vector2[]): this;
+    forEachCurve(cb: (curve: Curve) => void): this;
+    transformPoint(cb: (point: Vector2) => void): this;
+    transform(matrix: Matrix3): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
+    };
+    getBoundingBox(withStrokeWidth?: boolean): BoundingBox;
+    getCommands(): PathCommand[];
+    getData(): string;
+    getSvgPathXml(): string;
+    getSvgXml(): string;
+    getSvgDataUri(): string;
+    drawTo(ctx: CanvasRenderingContext2D): void;
+    copy(source: Path2D): this;
+    toSvg(): SVGElement;
+    toCanvas(pixelRatio?: number): HTMLCanvasElement;
+    clone(): this;
+}
+
+declare function setCanvasContextByPath(ctx: CanvasRenderingContext2D, path: Path2D): void;
+
 declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
 declare function parseSvg(svg: string | SVGElement): Path2D[];
 
-export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, type VectorLike, parseSvg, parseSvgToDom };
+export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContextByPath };

package/dist/index.d.mts

@@ -65,81 +65,6 @@ declare class BoundingBox {
     toArray(): [number, number, number, number];
 }
 
-declare class CurvePath extends Curve {
-    curves: Curve[];
-    currentPoint: Vector2;
-    autoClose: boolean;
-    protected _cacheLengths: number[];
-    constructor(points?: Vector2[]);
-    addCurve(curve: Curve): this;
-    closePath(): this;
-    getPoint(position: number, output?: Vector2): Vector2;
-    getLength(): number;
-    updateArcLengths(): void;
-    getCurveLengths(): number[];
-    getSpacedPoints(divisions?: number): Vector2[];
-    getPoints(divisions?: number): Vector2[];
-    setFromPoints(points: Vector2[]): this;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
-    lineTo(x: number, y: number): this;
-    moveTo(x: number, y: number): this;
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
-    rect(x: number, y: number, w: number, h: number): this;
-    splineThru(points: Vector2[]): this;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
-    absarc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    absellipse(x: number, y: number, radiusX: number, radiusY: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    getCommands(): PathCommand[];
-    getMinMax(min?: Vector2, max?: Vector2): {
-        min: Vector2;
-        max: Vector2;
-    };
-    drawTo(ctx: CanvasRenderingContext2D): this;
-    copy(source: CurvePath): this;
-}
-
-/**
- * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
- */
-declare class Path2D<T = any> {
-    currentPath: CurvePath;
-    paths: CurvePath[];
-    userData?: T;
-    constructor(path?: Path2D | PathCommand[] | string);
-    addPath(path: Path2D | CurvePath): this;
-    closePath(): this;
-    moveTo(x: number, y: number): this;
-    lineTo(x: number, y: number): this;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
-    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    rect(x: number, y: number, w: number, h: number): this;
-    addCommands(commands: PathCommand[]): this;
-    addData(data: string): this;
-    splineThru(points: Vector2[]): this;
-    forEachCurve(cb: (curve: Curve) => void): this;
-    transformPoint(cb: (point: Vector2) => void): this;
-    transform(matrix: Matrix3): this;
-    getMinMax(min?: Vector2, max?: Vector2): {
-        min: Vector2;
-        max: Vector2;
-    };
-    getBoundingBox(): BoundingBox;
-    getCommands(): PathCommand[];
-    getData(): string;
-    getSvgString(): string;
-    getSvgDataUri(): string;
-    drawTo(ctx: CanvasRenderingContext2D): void;
-    strokeTo(ctx: CanvasRenderingContext2D): void;
-    fillTo(ctx: CanvasRenderingContext2D): void;
-    copy(source: Path2D): this;
-    toCanvas(fill?: boolean): HTMLCanvasElement;
-    clone(): this;
-}
-
 /**
  * @link https://developer.mozilla.org/docs/Web/SVG/Attribute/d
  */
@@ -193,6 +118,49 @@ type PathCommand = {
 } | {
     type: 'z' | 'Z';
 };
+type FillRule = 'nonzero' | 'evenodd';
+type StrokeLinecap = 'butt' | 'round' | 'square';
+type StrokeLinejoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
+interface PathStyle {
+    [key: string]: any;
+    fill?: string;
+    fillOpacity?: number;
+    fillRule?: FillRule;
+    opacity?: number;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeLinecap?: StrokeLinecap;
+    strokeLinejoin?: StrokeLinejoin;
+    strokeMiterlimit?: number;
+    strokeDasharray?: number[];
+    strokeDashoffset?: number;
+    visibility?: string;
+}
+
+/**
+ * @link http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
+ */
+declare function addPathCommandsToPath2D(commands: PathCommand[], path: Path2D | CurvePath): void;
+
+/**
+ * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
+ * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
+ * From
+ * rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ * To
+ * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
+ */
+declare function parseArcCommand(path: Path2D | CurvePath, rx: number, ry: number, xAxisRotation: number, largeArcFlag: number, sweepFlag: number, start: Vector2, end: Vector2): void;
+
+/**
+ * from https://github.com/ppvg/svg-numbers (MIT License)
+ */
+declare function parsePathDataArgs(input: string, flags?: number[], stride?: number): number[];
+
+declare function pathCommandsToPathData(commands: PathCommand[]): string;
+
+declare function pathDataToPathCommands(d: string): PathCommand[];
 
 declare abstract class Curve {
     arcLengthDivisions: number;
@@ -262,11 +230,11 @@ declare class EllipseCurve extends Curve {
     center: Vector2;
     radiusX: number;
     radiusY: number;
+    rotation: number;
     startAngle: number;
     endAngle: number;
     clockwise: boolean;
-    rotation: number;
-    constructor(center?: Vector2, radiusX?: number, radiusY?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
+    constructor(center?: Vector2, radiusX?: number, radiusY?: number, rotation?: number, startAngle?: number, endAngle?: number, clockwise?: boolean);
     getPoint(t: number, output?: Vector2): Vector2;
     getDivisions(divisions?: number): number;
     getCommands(): PathCommand[];
@@ -401,7 +369,94 @@ declare class SplineCurve extends Curve {
     copy(source: SplineCurve): this;
 }
 
+declare class CurvePath extends Curve {
+    curves: Curve[];
+    startPoint?: Vector2;
+    currentPoint: Vector2;
+    autoClose: boolean;
+    protected _cacheLengths: number[];
+    constructor(points?: Vector2[]);
+    addCurve(curve: Curve): this;
+    addPoints(points: Vector2[]): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
+    getPoint(t: number, output?: Vector2): Vector2;
+    getLength(): number;
+    updateArcLengths(): void;
+    getCurveLengths(): number[];
+    getSpacedPoints(divisions?: number): Vector2[];
+    getPoints(divisions?: number): Vector2[];
+    protected _setCurrentPoint(point: VectorLike): this;
+    closePath(): this;
+    moveTo(x: number, y: number): this;
+    lineTo(x: number, y: number): this;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    relativeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    relativeEllipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    rect(x: number, y: number, w: number, h: number): this;
+    splineThru(points: Vector2[]): this;
+    transformPoint(cb: (point: Vector2) => void): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
+    };
+    getBoundingBox(): BoundingBox;
+    getCommands(): PathCommand[];
+    drawTo(ctx: CanvasRenderingContext2D): this;
+    copy(source: CurvePath): this;
+}
+
+/**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
+ */
+declare class Path2D {
+    currentPath: CurvePath;
+    paths: CurvePath[];
+    style: PathStyle;
+    get startPoint(): Vector2 | undefined;
+    get currentPoint(): Vector2 | undefined;
+    get strokeWidth(): number;
+    constructor(path?: Path2D | PathCommand[] | string);
+    addPath(path: Path2D | CurvePath): this;
+    closePath(): this;
+    moveTo(x: number, y: number): this;
+    lineTo(x: number, y: number): this;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
+    rect(x: number, y: number, w: number, h: number): this;
+    addCommands(commands: PathCommand[]): this;
+    addData(data: string): this;
+    splineThru(points: Vector2[]): this;
+    forEachCurve(cb: (curve: Curve) => void): this;
+    transformPoint(cb: (point: Vector2) => void): this;
+    transform(matrix: Matrix3): this;
+    getMinMax(min?: Vector2, max?: Vector2): {
+        min: Vector2;
+        max: Vector2;
+    };
+    getBoundingBox(withStrokeWidth?: boolean): BoundingBox;
+    getCommands(): PathCommand[];
+    getData(): string;
+    getSvgPathXml(): string;
+    getSvgXml(): string;
+    getSvgDataUri(): string;
+    drawTo(ctx: CanvasRenderingContext2D): void;
+    copy(source: Path2D): this;
+    toSvg(): SVGElement;
+    toCanvas(pixelRatio?: number): HTMLCanvasElement;
+    clone(): this;
+}
+
+declare function setCanvasContextByPath(ctx: CanvasRenderingContext2D, path: Path2D): void;
+
 declare function parseSvgToDom(svg: string | SVGElement): SVGElement;
 declare function parseSvg(svg: string | SVGElement): Path2D[];
 
-export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, type VectorLike, parseSvg, parseSvgToDom };
+export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, type FillRule, HeartCurve, LineCurve, Matrix3, Path2D, type PathCommand, type PathStyle, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, type StrokeLinecap, type StrokeLinejoin, Vector2, type VectorLike, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContextByPath };