modern-path2d 0.1.9 → 0.1.11

package/dist/index.mjs

@@ -1,3 +1,31 @@
+const lineJoinMap = {
+  "arcs": "bevel",
+  "bevel": "bevel",
+  "miter": "miter",
+  "miter-clip": "miter",
+  "round": "round"
+};
+function setCanvasContextByPath(ctx, path) {
+  const {
+    fill = "#000",
+    stroke = "none",
+    strokeWidth = stroke === "none" ? 0 : 1,
+    strokeLinecap = "round",
+    strokeLinejoin = "miter",
+    strokeMiterlimit = 0,
+    strokeDasharray,
+    strokeDashoffset = 0
+  } = path.style;
+  ctx.fillStyle = fill;
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = strokeWidth;
+  ctx.lineCap = strokeLinecap;
+  ctx.lineJoin = lineJoinMap[strokeLinejoin];
+  ctx.miterLimit = strokeMiterlimit;
+  ctx.lineDashOffset = strokeDashoffset;
+  strokeDasharray && ctx.setLineDash(strokeDasharray);
+}
+
 class Vector2 {
   constructor(x = 0, y = 0) {
     this.x = x;
@@ -382,221 +410,175 @@ function parseArcCommand(path, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, s
   const cy = Math.sin(xAxisRotation) * cxp + Math.cos(xAxisRotation) * cyp + (start.y + end.y) / 2;
   const theta = svgAngle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
   const delta = svgAngle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry) % (Math.PI * 2);
-  path.currentPath.absellipse(cx, cy, rx, ry, theta, theta + delta, sweepFlag === 0, xAxisRotation);
+  path.ellipse(cx, cy, rx, ry, xAxisRotation, theta, theta + delta, sweepFlag === 1);
 }
 
 function getReflection(a, b) {
   return a - (b - a);
 }
 function addPathCommandsToPath2D(commands, path) {
-  const point = new Vector2();
+  const current = new Vector2();
   const control = new Vector2();
-  const firstPoint = new Vector2();
-  let isFirstPoint = true;
-  let doSetFirstPoint = false;
   for (let i = 0, l = commands.length; i < l; i++) {
-    const command = commands[i];
-    if (isFirstPoint) {
-      doSetFirstPoint = true;
-      isFirstPoint = false;
-    }
-    if (command.type === "m" || command.type === "M") {
-      if (command.type === "m") {
-        point.x += command.x;
-        point.y += command.y;
+    const cmd = commands[i];
+    if (cmd.type === "m" || cmd.type === "M") {
+      if (cmd.type === "m") {
+        current.add(cmd);
       } else {
-        point.x = command.x;
-        point.y = command.y;
+        current.copy(cmd);
       }
-      control.x = point.x;
-      control.y = point.y;
-      path.moveTo(point.x, point.y);
-      firstPoint.copy(point);
-    } else if (command.type === "h" || command.type === "H") {
-      if (command.type === "h") {
-        point.x += command.x;
+      path.moveTo(current.x, current.y);
+      control.copy(current);
+    } else if (cmd.type === "h" || cmd.type === "H") {
+      if (cmd.type === "h") {
+        current.x += cmd.x;
       } else {
-        point.x = command.x;
+        current.x = cmd.x;
       }
-      control.x = point.x;
-      control.y = point.y;
-      path.lineTo(point.x, point.y);
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "v" || command.type === "V") {
-      if (command.type === "v") {
-        point.y += command.y;
+      path.lineTo(current.x, current.y);
+      control.copy(current);
+    } else if (cmd.type === "v" || cmd.type === "V") {
+      if (cmd.type === "v") {
+        current.y += cmd.y;
       } else {
-        point.y = command.y;
+        current.y = cmd.y;
       }
-      control.x = point.x;
-      control.y = point.y;
-      path.lineTo(point.x, point.y);
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "l" || command.type === "L") {
-      if (command.type === "l") {
-        point.x += command.x;
-        point.y += command.y;
+      path.lineTo(current.x, current.y);
+      control.copy(current);
+    } else if (cmd.type === "l" || cmd.type === "L") {
+      if (cmd.type === "l") {
+        current.add(cmd);
       } else {
-        point.x = command.x;
-        point.y = command.y;
+        current.copy(cmd);
       }
-      control.x = point.x;
-      control.y = point.y;
-      path.lineTo(point.x, point.y);
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "c" || command.type === "C") {
-      if (command.type === "c") {
+      path.lineTo(current.x, current.y);
+      control.copy(current);
+    } else if (cmd.type === "c" || cmd.type === "C") {
+      if (cmd.type === "c") {
         path.bezierCurveTo(
-          point.x + command.x1,
-          point.y + command.y1,
-          point.x + command.x2,
-          point.y + command.y2,
-          point.x + command.x,
-          point.y + command.y
+          current.x + cmd.x1,
+          current.y + cmd.y1,
+          current.x + cmd.x2,
+          current.y + cmd.y2,
+          current.x + cmd.x,
+          current.y + cmd.y
         );
-        control.x = point.x + command.x2;
-        control.y = point.y + command.y2;
-        point.x += command.x;
-        point.y += command.y;
+        control.x = current.x + cmd.x2;
+        control.y = current.y + cmd.y2;
+        current.add(cmd);
       } else {
         path.bezierCurveTo(
-          command.x1,
-          command.y1,
-          command.x2,
-          command.y2,
-          command.x,
-          command.y
+          cmd.x1,
+          cmd.y1,
+          cmd.x2,
+          cmd.y2,
+          cmd.x,
+          cmd.y
         );
-        control.x = command.x2;
-        control.y = command.y2;
-        point.x = command.x;
-        point.y = command.y;
+        control.x = cmd.x2;
+        control.y = cmd.y2;
+        current.copy(cmd);
       }
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "s" || command.type === "S") {
-      if (command.type === "s") {
+    } else if (cmd.type === "s" || cmd.type === "S") {
+      if (cmd.type === "s") {
         path.bezierCurveTo(
-          getReflection(point.x, control.x),
-          getReflection(point.y, control.y),
-          point.x + command.x2,
-          point.y + command.y2,
-          point.x + command.x,
-          point.y + command.y
+          getReflection(current.x, control.x),
+          getReflection(current.y, control.y),
+          current.x + cmd.x2,
+          current.y + cmd.y2,
+          current.x + cmd.x,
+          current.y + cmd.y
         );
-        control.x = point.x + command.x2;
-        control.y = point.y + command.y2;
-        point.x += command.x;
-        point.y += command.y;
+        control.x = current.x + cmd.x2;
+        control.y = current.y + cmd.y2;
+        current.add(cmd);
       } else {
         path.bezierCurveTo(
-          getReflection(point.x, control.x),
-          getReflection(point.y, control.y),
-          command.x2,
-          command.y2,
-          command.x,
-          command.y
+          getReflection(current.x, control.x),
+          getReflection(current.y, control.y),
+          cmd.x2,
+          cmd.y2,
+          cmd.x,
+          cmd.y
         );
-        control.x = command.x2;
-        control.y = command.y2;
-        point.x = command.x;
-        point.y = command.y;
+        control.x = cmd.x2;
+        control.y = cmd.y2;
+        current.copy(cmd);
       }
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "q" || command.type === "Q") {
-      if (command.type === "q") {
+    } else if (cmd.type === "q" || cmd.type === "Q") {
+      if (cmd.type === "q") {
         path.quadraticCurveTo(
-          point.x + command.x1,
-          point.y + command.y1,
-          point.x + command.x,
-          point.y + command.y
+          current.x + cmd.x1,
+          current.y + cmd.y1,
+          current.x + cmd.x,
+          current.y + cmd.y
         );
-        control.x = point.x + command.x1;
-        control.y = point.y + command.y1;
-        point.x += command.x;
-        point.y += command.y;
+        control.x = current.x + cmd.x1;
+        control.y = current.y + cmd.y1;
+        current.add(cmd);
       } else {
         path.quadraticCurveTo(
-          command.x1,
-          command.y1,
-          command.x,
-          command.y
+          cmd.x1,
+          cmd.y1,
+          cmd.x,
+          cmd.y
         );
-        control.x = command.x1;
-        control.y = command.y1;
-        point.x = command.x;
-        point.y = command.y;
+        control.x = cmd.x1;
+        control.y = cmd.y1;
+        current.copy(cmd);
       }
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "t" || command.type === "T") {
-      const rx = getReflection(point.x, control.x);
-      const ry = getReflection(point.y, control.y);
+    } else if (cmd.type === "t" || cmd.type === "T") {
+      const rx = getReflection(current.x, control.x);
+      const ry = getReflection(current.y, control.y);
       control.x = rx;
       control.y = ry;
-      if (command.type === "t") {
+      if (cmd.type === "t") {
         path.quadraticCurveTo(
           rx,
           ry,
-          point.x + command.x,
-          point.y + command.y
+          current.x + cmd.x,
+          current.y + cmd.y
         );
-        point.x += command.x;
-        point.y += command.y;
+        current.add(cmd);
       } else {
         path.quadraticCurveTo(
           rx,
           ry,
-          command.x,
-          command.y
+          cmd.x,
+          cmd.y
         );
-        point.x = command.x;
-        point.y = command.y;
+        current.copy(cmd);
       }
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "a" || command.type === "A") {
-      if (command.type === "a") {
-        if (command.x === 0 && command.y === 0)
+    } else if (cmd.type === "a" || cmd.type === "A") {
+      const start = current.clone();
+      if (cmd.type === "a") {
+        if (cmd.x === 0 && cmd.y === 0)
           continue;
-        point.x += command.x;
-        point.y += command.y;
+        current.add(cmd);
       } else {
-        if (command.x === point.x && command.y === point.y)
+        if (current.equals(cmd))
           continue;
-        point.x = command.x;
-        point.y = command.y;
+        current.copy(cmd);
       }
-      const start = point.clone();
-      control.x = point.x;
-      control.y = point.y;
+      control.copy(current);
       parseArcCommand(
         path,
-        command.rx,
-        command.ry,
-        command.angle,
-        command.largeArcFlag,
-        command.sweepFlag,
+        cmd.rx,
+        cmd.ry,
+        cmd.angle,
+        cmd.largeArcFlag,
+        cmd.sweepFlag,
         start,
-        point
+        current
       );
-      if (doSetFirstPoint)
-        firstPoint.copy(point);
-    } else if (command.type === "z" || command.type === "Z") {
-      path.currentPath.autoClose = true;
-      if (path.currentPath.curves.length > 0) {
-        point.copy(firstPoint);
-        path.currentPath.currentPoint.copy(point);
-        isFirstPoint = true;
+    } else if (cmd.type === "z" || cmd.type === "Z") {
+      if (path.startPoint) {
+        current.copy(path.startPoint);
       }
+      path.closePath();
     } else {
-      console.warn("Unsupported commands", command);
+      console.warn("Unsupported commands", cmd);
     }
-    doSetFirstPoint = false;
   }
 }
 
@@ -1187,15 +1169,15 @@ const tempTransform1$1 = new Matrix3();
 const tempTransform2$1 = new Matrix3();
 const tempV2 = new Vector2();
 class EllipseCurve extends Curve {
-  constructor(center = new Vector2(), radiusX = 1, radiusY = 1, startAngle = 0, endAngle = Math.PI * 2, clockwise = false, rotation = 0) {
+  constructor(center = new Vector2(), radiusX = 1, radiusY = 1, rotation = 0, startAngle = 0, endAngle = Math.PI * 2, clockwise = false) {
     super();
     this.center = center;
     this.radiusX = radiusX;
     this.radiusY = radiusY;
+    this.rotation = rotation;
     this.startAngle = startAngle;
     this.endAngle = endAngle;
     this.clockwise = clockwise;
-    this.rotation = rotation;
   }
   getPoint(t, output = new Vector2()) {
     const twoPi = Math.PI * 2;
@@ -1879,27 +1861,36 @@ class CurvePath extends Curve {
   constructor(points) {
     super();
     __publicField$1(this, "curves", []);
+    __publicField$1(this, "startPoint");
     __publicField$1(this, "currentPoint", new Vector2());
     __publicField$1(this, "autoClose", false);
     __publicField$1(this, "_cacheLengths", []);
     if (points) {
-      this.setFromPoints(points);
+      this.addPoints(points);
     }
   }
   addCurve(curve) {
     this.curves.push(curve);
     return this;
   }
-  closePath() {
-    const start = this.curves[0].getPoint(0);
-    const end = this.curves[this.curves.length - 1].getPoint(1);
-    if (!start.equals(end)) {
-      this.curves.push(new LineCurve(end, start));
+  addPoints(points) {
+    this.moveTo(points[0].x, points[0].y);
+    for (let i = 1, len = points.length; i < len; i++) {
+      const { x, y } = points[i];
+      this.lineTo(x, y);
     }
     return this;
   }
-  getPoint(position, output = new Vector2()) {
-    const d = position * this.getLength();
+  addCommands(commands) {
+    addPathCommandsToPath2D(commands, this);
+    return this;
+  }
+  addData(data) {
+    this.addCommands(pathDataToPathCommands(data));
+    return this;
+  }
+  getPoint(t, output = new Vector2()) {
+    const d = t * this.getLength();
     const curveLengths = this.getCurveLengths();
     let i = 0;
     while (i < curveLengths.length) {
@@ -1964,23 +1955,28 @@ class CurvePath extends Curve {
     }
     return points;
   }
-  setFromPoints(points) {
-    this.moveTo(points[0].x, points[0].y);
-    for (let i = 1, l = points.length; i < l; i++) {
-      this.lineTo(points[i].x, points[i].y);
+  _setCurrentPoint(point) {
+    this.currentPoint.copy(point);
+    if (!this.startPoint) {
+      this.startPoint = this.currentPoint.clone();
     }
     return this;
   }
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    this.curves.push(
-      new CubicBezierCurve(
-        this.currentPoint.clone(),
-        new Vector2(cp1x, cp1y),
-        new Vector2(cp2x, cp2y),
-        new Vector2(x, y)
-      )
-    );
+  closePath() {
+    const start = this.startPoint;
+    if (start) {
+      const end = this.currentPoint;
+      if (!start.equals(end)) {
+        this.curves.push(new LineCurve(end, start));
+        this.currentPoint.copy(start);
+      }
+      this.startPoint = void 0;
+    }
+    return this;
+  }
+  moveTo(x, y) {
     this.currentPoint.set(x, y);
+    this.startPoint = this.currentPoint.clone();
     return this;
   }
   lineTo(x, y) {
@@ -1990,64 +1986,56 @@ class CurvePath extends Curve {
         new Vector2(x, y)
       )
     );
-    this.currentPoint.set(x, y);
-    return this;
-  }
-  moveTo(x, y) {
-    this.currentPoint.set(x, y);
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  quadraticCurveTo(cpx, cpy, x, y) {
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
     this.curves.push(
-      new QuadraticBezierCurve(
+      new CubicBezierCurve(
         this.currentPoint.clone(),
-        new Vector2(cpx, cpy),
+        new Vector2(cp1x, cp1y),
+        new Vector2(cp2x, cp2y),
         new Vector2(x, y)
       )
     );
-    this.currentPoint.set(x, y);
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  rect(x, y, w, h) {
+  quadraticCurveTo(cpx, cpy, x, y) {
     this.curves.push(
-      new RectangularCurve(
-        new Vector2(x + w / 2, y + h / 2),
-        w / 2,
-        w / h
+      new QuadraticBezierCurve(
+        this.currentPoint.clone(),
+        new Vector2(cpx, cpy),
+        new Vector2(x, y)
       )
     );
-    this.currentPoint.set(x, y);
+    this._setCurrentPoint({ x, y });
     return this;
   }
-  splineThru(points) {
-    const npts = [this.currentPoint.clone()].concat(points);
-    this.curves.push(new SplineCurve(npts));
-    this.currentPoint.copy(points[points.length - 1]);
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.ellipse(x, y, radius, radius, 0, startAngle, endAngle, counterclockwise);
     return this;
   }
-  arc(x, y, radius, startAngle, endAngle, clockwise = false) {
+  relativeArc(x, y, radius, startAngle, endAngle, counterclockwise) {
     const point = this.currentPoint;
-    this.absarc(x + point.x, y + point.y, radius, startAngle, endAngle, clockwise);
-    return this;
-  }
-  absarc(x, y, radius, startAngle, endAngle, clockwise = false) {
-    this.absellipse(x, y, radius, radius, startAngle, endAngle, clockwise);
+    this.arc(x + point.x, y + point.y, radius, startAngle, endAngle, counterclockwise);
     return this;
   }
-  ellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise = false, rotation = 0) {
-    const point = this.currentPoint;
-    this.absellipse(x + point.x, y + point.y, radiusX, radiusY, startAngle, endAngle, clockwise, rotation);
+  // TODO
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  arcTo(x1, y1, x2, y2, radius) {
+    console.warn("Method arcTo not supported yet");
     return this;
   }
-  absellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise = false, rotation = 0) {
+  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = true) {
     const curve = new EllipseCurve(
       new Vector2(x, y),
       radiusX,
       radiusY,
+      rotation,
       startAngle,
       endAngle,
-      clockwise,
-      rotation
+      !counterclockwise
     );
     if (this.curves.length > 0) {
       const first = curve.getPoint(0);
@@ -2056,16 +2044,45 @@ class CurvePath extends Curve {
       }
     }
     this.curves.push(curve);
-    this.currentPoint.copy(curve.getPoint(1));
+    this._setCurrentPoint(curve.getPoint(1));
     return this;
   }
-  getCommands() {
-    return this.curves.flatMap((curve) => curve.getCommands());
+  relativeEllipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+    const point = this.currentPoint;
+    this.ellipse(x + point.x, y + point.y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
+    return this;
+  }
+  rect(x, y, w, h) {
+    this.curves.push(
+      new RectangularCurve(
+        new Vector2(x + w / 2, y + h / 2),
+        w / 2,
+        w / h
+      )
+    );
+    this._setCurrentPoint({ x, y });
+    return this;
+  }
+  splineThru(points) {
+    this.curves.push(new SplineCurve([this.currentPoint.clone()].concat(points)));
+    this._setCurrentPoint(points[points.length - 1]);
+    return this;
+  }
+  transformPoint(cb) {
+    this.curves.forEach((curve) => curve.transformPoint(cb));
+    return this;
   }
   getMinMax(min = Vector2.MAX, max = Vector2.MIN) {
     this.curves.forEach((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
+  getBoundingBox() {
+    const { min, max } = this.getMinMax();
+    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+  }
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
+  }
   drawTo(ctx) {
     const point = this.curves[0]?.getPoint(0);
     if (point) {
@@ -2089,6 +2106,10 @@ class CurvePath extends Curve {
   }
 }
 
+function toKebabCase(str) {
+  return str.replace(/[^a-z0-9]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
+}
+
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -2099,7 +2120,7 @@ class Path2D {
   constructor(path) {
     __publicField(this, "currentPath", new CurvePath());
     __publicField(this, "paths", [this.currentPath]);
-    __publicField(this, "userData");
+    __publicField(this, "style", {});
     if (path) {
       if (path instanceof Path2D) {
         this.addPath(path);
@@ -2110,6 +2131,15 @@ class Path2D {
       }
     }
   }
+  get startPoint() {
+    return this.currentPath.startPoint;
+  }
+  get currentPoint() {
+    return this.currentPath.currentPoint;
+  }
+  get strokeWidth() {
+    return this.style.strokeWidth ?? ((this.style.stroke ?? "none") === "none" ? 0 : 1);
+  }
   addPath(path) {
     if (path instanceof Path2D) {
       this.paths.push(...path.paths.map((v) => v.clone()));
@@ -2119,12 +2149,19 @@ class Path2D {
     return this;
   }
   closePath() {
-    this.currentPath.closePath();
+    const startPoint = this.startPoint;
+    if (startPoint) {
+      this.currentPath.closePath();
+      if (this.currentPath.curves.length > 0) {
+        this.currentPath = new CurvePath().moveTo(startPoint.x, startPoint.y);
+        this.paths.push(this.currentPath);
+      }
+    }
     return this;
   }
   moveTo(x, y) {
     const { currentPoint, curves } = this.currentPath;
-    if (currentPoint.x !== x || currentPoint.y !== y) {
+    if (!currentPoint.equals({ x, y })) {
       if (curves.length) {
         this.currentPath = new CurvePath().moveTo(x, y);
         this.paths.push(this.currentPath);
@@ -2147,17 +2184,15 @@ class Path2D {
     return this;
   }
   arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.currentPath.absarc(x, y, radius, startAngle, endAngle, !counterclockwise);
+    this.currentPath.arc(x, y, radius, startAngle, endAngle, counterclockwise);
     return this;
   }
-  // TODO
-  // eslint-disable-next-line unused-imports/no-unused-vars
   arcTo(x1, y1, x2, y2, radius) {
-    console.warn("Method arcTo not supported yet");
+    this.currentPath.arcTo(x1, y1, x2, y2, radius);
     return this;
   }
   ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
-    this.currentPath.absellipse(x, y, radiusX, radiusY, startAngle, endAngle, !counterclockwise, rotation);
+    this.currentPath.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
     return this;
   }
   rect(x, y, w, h) {
@@ -2192,56 +2227,92 @@ class Path2D {
     this.forEachCurve((curve) => curve.getMinMax(min, max));
     return { min, max };
   }
-  getBoundingBox() {
+  getBoundingBox(withStrokeWidth = true) {
     const { min, max } = this.getMinMax();
-    return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+    const bbox = new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
+    if (withStrokeWidth) {
+      const strokeWidth = this.strokeWidth;
+      bbox.left -= strokeWidth / 2;
+      bbox.top -= strokeWidth / 2;
+      bbox.width += strokeWidth;
+      bbox.height += strokeWidth;
+    }
+    return bbox;
   }
   getCommands() {
-    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
+    return this.paths.flatMap((path) => path.getCommands());
   }
   getData() {
     return this.paths.map((path) => path.getData()).join(" ");
   }
-  getSvgString() {
+  getSvgPathXml() {
+    const style = {
+      ...this.style,
+      fill: this.style.fill ?? "#000",
+      stroke: this.style.stroke ?? "none"
+    };
+    const cssStyle = {};
+    for (const key in style) {
+      if (style[key] !== void 0) {
+        cssStyle[toKebabCase(key)] = style[key];
+      }
+    }
+    Object.assign(cssStyle, {
+      "stroke-width": `${this.strokeWidth}px`
+    });
+    let cssText = "";
+    for (const key in cssStyle) {
+      if (cssStyle[key] !== void 0) {
+        cssText += `${key}:${cssStyle[key]};`;
+      }
+    }
+    return `<path d="${this.getData()}" style="${cssText}"></path>`;
+  }
+  getSvgXml() {
     const { x, y, width, height } = this.getBoundingBox();
-    const strokeWidth = 1;
-    return `<svg viewBox="${x - strokeWidth} ${y - strokeWidth} ${width + strokeWidth * 2} ${height + strokeWidth * 2}" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" d="${this.getData()}"></path></svg>`;
+    const path = this.getSvgPathXml();
+    return `<svg viewBox="${x} ${y} ${width} ${height}" width="${width}px" height="${height}px" xmlns="http://www.w3.org/2000/svg">${path}</svg>`;
   }
   getSvgDataUri() {
-    return `data:image/svg+xml;base64,${btoa(this.getSvgString())}`;
+    return `data:image/svg+xml;base64,${btoa(this.getSvgXml())}`;
   }
   drawTo(ctx) {
+    const {
+      fill = "#000",
+      stroke = "none"
+    } = this.style;
+    setCanvasContextByPath(ctx, this);
     this.paths.forEach((path) => {
       path.drawTo(ctx);
     });
-  }
-  strokeTo(ctx) {
-    this.drawTo(ctx);
-    ctx.stroke();
-  }
-  fillTo(ctx) {
-    this.drawTo(ctx);
-    ctx.fill();
+    if (fill !== "none") {
+      ctx.fill();
+    }
+    if (stroke !== "none") {
+      ctx.stroke();
+    }
   }
   copy(source) {
     this.currentPath = source.currentPath.clone();
     this.paths = source.paths.map((path) => path.clone());
-    this.userData = source.userData;
+    this.style = { ...source.style };
     return this;
   }
-  toCanvas(fill = true) {
-    const canvas = document.createElement("canvas");
+  toSvg() {
+    return new DOMParser().parseFromString(this.getSvgXml(), "image/svg+xml").documentElement;
+  }
+  toCanvas(pixelRatio = 2) {
     const { left, top, width, height } = this.getBoundingBox();
-    canvas.width = width;
-    canvas.height = height;
+    const canvas = document.createElement("canvas");
+    canvas.width = width * pixelRatio;
+    canvas.height = height * pixelRatio;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     if (ctx) {
+      ctx.scale(pixelRatio, pixelRatio);
       ctx.translate(-left, -top);
-      if (fill) {
-        this.fillTo(ctx);
-      } else {
-        this.strokeTo(ctx);
-      }
+      this.drawTo(ctx);
     }
     return canvas;
   }
@@ -2450,7 +2521,7 @@ function parseNodeTransform(node) {
 
 function parseCircleNode(node) {
   return new Path2D().addPath(
-    new CurvePath().absarc(
+    new CurvePath().arc(
       parseFloatWithUnits(node.getAttribute("cx") || 0),
       parseFloatWithUnits(node.getAttribute("cy") || 0),
       parseFloatWithUnits(node.getAttribute("r") || 0),
@@ -2482,12 +2553,13 @@ function parseCSSStylesheet(node, stylesheets) {
 
 function parseEllipseNode(node) {
   return new Path2D().addPath(
-    new CurvePath().absellipse(
+    new CurvePath().ellipse(
       parseFloatWithUnits(node.getAttribute("cx") || 0),
       parseFloatWithUnits(node.getAttribute("cy") || 0),
       parseFloatWithUnits(node.getAttribute("rx") || 0),
       parseFloatWithUnits(node.getAttribute("ry") || 0),
       0,
+      0,
       Math.PI * 2
     )
   );
@@ -2633,18 +2705,21 @@ function parseStyle(node, style, stylesheets) {
   function positive(v) {
     return Math.max(0, parseFloatWithUnits(v));
   }
+  function array(v) {
+    return v.split(" ").filter((v2) => v2 !== "").map((v2) => parseFloatWithUnits(v2));
+  }
   addStyle("fill", "fill");
   addStyle("fill-opacity", "fillOpacity", clamp);
   addStyle("fill-rule", "fillRule");
   addStyle("opacity", "opacity", clamp);
   addStyle("stroke", "stroke");
-  addStyle("stroke-dashoffset", "strokeDashoffset");
-  addStyle("stroke-dasharray", "strokeDasharray");
-  addStyle("stroke-linecap", "strokeLineCap");
-  addStyle("stroke-linejoin", "strokeLineJoin");
-  addStyle("stroke-miterlimit", "strokeMiterLimit", positive);
   addStyle("stroke-opacity", "strokeOpacity", clamp);
   addStyle("stroke-width", "strokeWidth", positive);
+  addStyle("stroke-linecap", "strokeLinecap");
+  addStyle("stroke-linejoin", "strokeLinejoin");
+  addStyle("stroke-miterlimit", "strokeMiterlimit", positive);
+  addStyle("stroke-dasharray", "strokeDasharray", array);
+  addStyle("stroke-dashoffset", "strokeDashoffset", parseFloatWithUnits);
   addStyle("visibility", "visibility");
   return style;
 }
@@ -2719,7 +2794,7 @@ function parseNode(node, style, paths = []) {
   if (path) {
     path.transform(currentTransform);
     paths.push(path);
-    path.userData = { node, style };
+    path.style = style;
   }
   const childNodes = node.childNodes;
   for (let i = 0, len = childNodes.length; i < len; i++) {
@@ -2763,15 +2838,7 @@ function parseSvgToDom(svg) {
   }
 }
 function parseSvg(svg) {
-  return parseNode(parseSvgToDom(svg), {
-    fill: "#000",
-    fillOpacity: 1,
-    strokeOpacity: 1,
-    strokeWidth: 1,
-    strokeLineJoin: "miter",
-    strokeLineCap: "butt",
-    strokeMiterLimit: 4
-  });
+  return parseNode(parseSvgToDom(svg), {});
 }
 
-export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, parseSvg, parseSvgToDom };
+export { BoundingBox, CircleCurve, CubicBezierCurve, Curve, CurvePath, EllipseCurve, HeartCurve, LineCurve, Matrix3, Path2D, PloygonCurve, QuadraticBezierCurve, RectangularCurve, SplineCurve, Vector2, addPathCommandsToPath2D, parseArcCommand, parsePathDataArgs, parseSvg, parseSvgToDom, pathCommandsToPathData, pathDataToPathCommands, setCanvasContextByPath };