modern-path2d 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -5,6 +5,12 @@ class Point2D {
     this.x = x;
     this.y = y;
   }
+  static get MAX() {
+    return new Point2D(Infinity, Infinity);
+  }
+  static get MIN() {
+    return new Point2D(-Infinity, -Infinity);
+  }
   set(x, y) {
     this.x = x;
     this.y = y;
@@ -77,6 +83,9 @@ class Curve {
     __publicField$5(this, "_cacheArcLengths");
     __publicField$5(this, "_needsUpdate", false);
   }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    return { min, max };
+  }
   getDivisions(divisions) {
     return divisions;
   }
@@ -172,6 +181,26 @@ class Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(this.getUtoTmapping(u), output);
   }
+  getData() {
+    return this.getCommands().map((cmd) => {
+      switch (cmd.type) {
+        case "M":
+          return `M ${cmd.x} ${cmd.y}`;
+        case "L":
+          return `L ${cmd.x} ${cmd.y}`;
+        case "C":
+          return `C ${cmd.x1} ${cmd.y1} ${cmd.x2} ${cmd.y2} ${cmd.x} ${cmd.y}`;
+        case "Q":
+          return `Q ${cmd.x1} ${cmd.y1} ${cmd.x} ${cmd.y}`;
+        case "A":
+          return `A ${cmd.rx} ${cmd.ry} ${cmd.xAxisRotation} ${cmd.largeArcFlag} ${cmd.sweepFlag} ${cmd.x} ${cmd.y}`;
+        case "Z":
+          return "Z";
+        default:
+          return "";
+      }
+    }).join(" ");
+  }
   clone() {
     return new this.constructor().copy(this);
   }
@@ -189,26 +218,27 @@ class CircleCurve extends Curve {
     this.start = start;
     this.end = end;
   }
-  getPole(min, max) {
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
     min.x = Math.min(min.x, this.center.x - this.radius);
     min.y = Math.min(min.y, this.center.y - this.radius);
     max.x = Math.max(max.x, this.center.x + this.radius);
     max.y = Math.max(max.y, this.center.y + this.radius);
+    return { min, max };
   }
-  getPoint(index) {
+  getPoint(t) {
     const { radius, center } = this;
-    return center.clone().add(this.getNormal(index).clone().multiplyScalar(radius));
+    return center.clone().add(this.getNormal(t).clone().multiplyScalar(radius));
   }
-  getTangent(index) {
-    const { x, y } = this.getNormal(index);
+  getTangent(t) {
+    const { x, y } = this.getNormal(t);
     return new Point2D(-y, x);
   }
-  getNormal(index) {
+  getNormal(t) {
     const { start, end } = this;
-    const t = index * (end - start) + start - 0.5 * Math.PI;
-    return new Point2D(Math.cos(t), Math.sin(t));
+    const _t = t * (end - start) + start - 0.5 * Math.PI;
+    return new Point2D(Math.cos(_t), Math.sin(_t));
   }
-  toPathCommands() {
+  getCommands() {
     return [];
   }
   drawTo(_ctx) {
@@ -269,8 +299,20 @@ class CubicBezierCurve extends Curve {
     );
     return output;
   }
-  toPathCommands() {
-    return [];
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    const { v0, v1, v2, v3 } = this;
+    min.x = Math.min(min.x, v0.x, v1.x, v2.x, v3.x);
+    min.y = Math.min(min.y, v0.y, v1.y, v2.y, v3.y);
+    max.x = Math.max(max.x, v0.x, v1.x, v2.x, v3.x);
+    max.y = Math.max(max.y, v0.y, v1.y, v2.y, v3.y);
+    return { min, max };
+  }
+  getCommands() {
+    const { v0, v1, v2, v3 } = this;
+    return [
+      { type: "M", x: v0.x, y: v0.y },
+      { type: "C", x1: v1.x, y1: v1.y, x2: v2.x, y2: v2.y, x: v3.x, y: v3.y }
+    ];
   }
   drawTo(ctx) {
     const { v0, v1, v2, v3 } = this;
@@ -337,18 +379,30 @@ class EllipseCurve extends Curve {
     }
     return output.set(_x, _y);
   }
-  toPathCommands() {
+  getCommands() {
     const { x, y, rx, ry, startAngle, endAngle, clockwise } = this;
+    const anticlockwise = !clockwise;
     const startX = x + rx * Math.cos(startAngle);
     const startY = y + ry * Math.sin(startAngle);
     const endX = x + rx * Math.cos(endAngle);
     const endY = y + ry * Math.sin(endAngle);
-    const largeArcFlag = (endAngle - startAngle) % (2 * Math.PI) > Math.PI ? 1 : 0;
-    const sweepFlag = clockwise ? 0 : 1;
-    return [
-      { type: "M", x: startX, y: startY },
-      { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag, sweepFlag, x: endX, y: endY }
-    ];
+    const angleDiff = Math.abs(startAngle - endAngle);
+    const largeArcFlag = angleDiff > Math.PI ? 1 : 0;
+    const sweepFlag = anticlockwise ? 0 : 1;
+    const midX = x + rx * Math.cos(startAngle + (endAngle - startAngle) / 2);
+    const midY = y + ry * Math.sin(startAngle + (endAngle - startAngle) / 2);
+    if (angleDiff >= 2 * Math.PI) {
+      return [
+        { type: "M", x: startX, y: startY },
+        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag: 1, sweepFlag, x: midX, y: midY },
+        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag: 1, sweepFlag, x: startX, y: startY }
+      ];
+    } else {
+      return [
+        { type: "M", x: startX, y: startY },
+        { type: "A", rx, ry, xAxisRotation: 0, largeArcFlag, sweepFlag, x: endX, y: endY }
+      ];
+    }
   }
   drawTo(ctx) {
     const { x, y, rx, ry, startAngle } = this;
@@ -405,12 +459,21 @@ class LineCurve extends Curve {
   getTangentAt(u, output = new Point2D()) {
     return this.getTangent(u, output);
   }
-  toPathCommands() {
+  getCommands() {
+    const { v1, v2 } = this;
     return [
-      { type: "M", x: this.v1.x, y: this.v1.y },
-      { type: "L", x: this.v2.x, y: this.v2.y }
+      { type: "M", x: v1.x, y: v1.y },
+      { type: "L", x: v2.x, y: v2.y }
     ];
   }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    const { v1, v2 } = this;
+    min.x = Math.min(min.x, v1.x, v2.x);
+    min.y = Math.min(min.y, v1.y, v2.y);
+    max.x = Math.max(max.x, v1.x, v2.x);
+    max.y = Math.max(max.y, v1.y, v2.y);
+    return { min, max };
+  }
   drawTo(ctx) {
     const { v1, v2 } = this;
     ctx.moveTo(v1.x, v1.y);
@@ -492,8 +555,8 @@ class HeartCurve extends Curve {
     const line = this.getCurrentLine(value);
     return new Point2D(line.v2.y - line.v1.y, -(line.v2.x - line.v1.x)).normalize();
   }
-  toPathCommands() {
-    return this.curves.flatMap((curve) => curve.toPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -550,8 +613,12 @@ class PloygonCurve extends Curve {
     const line = this.getCurrentLine(value);
     return new Point2D(line.v2.y - line.v1.y, -(line.v2.x - line.v1.x)).normalize();
   }
-  toPathCommands() {
-    return this.curves.flatMap((curve) => curve.toPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    this.curves.forEach((curve) => curve.getMinMax(min, max));
+    return { min, max };
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -573,8 +640,24 @@ class QuadraticBezierCurve extends Curve {
     );
     return output;
   }
-  toPathCommands() {
-    return [];
+  getCommands() {
+    const { v0, v1, v2 } = this;
+    return [
+      { type: "M", x: v0.x, y: v0.y },
+      { type: "Q", x1: v1.x, y1: v1.y, x: v2.x, y: v2.y }
+    ];
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    const { v0, v1, v2 } = this;
+    const x1 = 0.5 * (v0.x + v1.x);
+    const y1 = 0.5 * (v0.y + v1.y);
+    const x2 = 0.5 * (v0.x + v2.x);
+    const y2 = 0.5 * (v0.y + v2.y);
+    min.x = Math.min(min.x, v0.x, v2.x, x1, x2);
+    min.y = Math.min(min.y, v0.y, v2.y, y1, y2);
+    max.x = Math.max(max.x, v0.x, v2.x, x1, x2);
+    max.y = Math.max(max.y, v0.y, v2.y, y1, y2);
+    return { min, max };
   }
   drawTo(ctx) {
     const { v0, v1, v2 } = this;
@@ -664,8 +747,12 @@ class RectangularCurve extends Curve {
     const { v1, v2 } = this.getCurrentLine(value);
     return new Point2D(v2.y - v1.y, -(v2.x - v1.x)).normalize();
   }
-  toPathCommands() {
-    return this.curves.flatMap((curve) => curve.toPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    this.curves.forEach((curve) => curve.getMinMax(min, max));
+    return { min, max };
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -695,7 +782,7 @@ class SplineCurve extends Curve {
     );
     return output;
   }
-  toPathCommands() {
+  getCommands() {
     return [];
   }
   drawTo(_ctx) {
@@ -703,9 +790,8 @@ class SplineCurve extends Curve {
   copy(source) {
     super.copy(source);
     this.points = [];
-    for (let i = 0, l = source.points.length; i < l; i++) {
-      const point = source.points[i];
-      this.points.push(point.clone());
+    for (let i = 0, len = source.points.length; i < len; i++) {
+      this.points.push(source.points[i].clone());
     }
     return this;
   }
@@ -889,8 +975,12 @@ class CurvePath extends Curve {
     this.currentPoint.copy(curve.getPoint(1));
     return this;
   }
-  toPathCommands() {
-    return this.curves.flatMap((curve) => curve.toPathCommands());
+  getCommands() {
+    return this.curves.flatMap((curve) => curve.getCommands());
+  }
+  getMinMax(min = Point2D.MAX, max = Point2D.MIN) {
+    this.curves.forEach((curve) => curve.getMinMax(min, max));
+    return { min, max };
   }
   drawTo(ctx) {
     this.curves.forEach((curve) => curve.drawTo(ctx));
@@ -919,16 +1009,12 @@ class Path2D {
     __publicField(this, "currentPath", new CurvePath());
     __publicField(this, "paths", [this.currentPath]);
   }
-  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.currentPath.absarc(x, y, radius, startAngle, endAngle, !counterclockwise);
-    return this;
-  }
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    this.currentPath.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+  addPath(path) {
+    this.paths.push(...path.paths.map((v) => v.clone()));
     return this;
   }
-  lineTo(x, y) {
-    this.currentPath.lineTo(x, y);
+  closePath() {
+    this.currentPath.closePath();
     return this;
   }
   moveTo(x, y) {
@@ -937,10 +1023,56 @@ class Path2D {
     this.currentPath.moveTo(x, y);
     return this;
   }
+  lineTo(x, y) {
+    this.currentPath.lineTo(x, y);
+    return this;
+  }
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.currentPath.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+    return this;
+  }
   quadraticCurveTo(cpx, cpy, x, y) {
     this.currentPath.quadraticCurveTo(cpx, cpy, x, y);
     return this;
   }
+  arc(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.currentPath.absarc(x, y, radius, startAngle, endAngle, !counterclockwise);
+    return this;
+  }
+  arcTo(x1, y1, x2, y2, radius) {
+    const point = this.currentPath.currentPoint;
+    const currentX = point.x;
+    const currentY = point.y;
+    const dx1 = x1 - currentX;
+    const dy1 = y1 - currentY;
+    const dx2 = x2 - x1;
+    const dy2 = y2 - y1;
+    const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+    const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+    if (len1 < radius || len2 < radius) {
+      this.lineTo(x2, y2);
+      return this;
+    }
+    const unitV1 = { x: dx1 / len1, y: dy1 / len1 };
+    const unitV2 = { x: dx2 / len2, y: dy2 / len2 };
+    const centerX = x1 - unitV1.y * radius;
+    const centerY = y1 + unitV1.x * radius;
+    const startAngle = Math.atan2(unitV1.y, unitV1.x);
+    const endAngle = Math.atan2(unitV2.y, unitV2.x);
+    let angleDiff = endAngle - startAngle;
+    if (angleDiff > Math.PI) {
+      angleDiff -= 2 * Math.PI;
+    } else if (angleDiff < -Math.PI) {
+      angleDiff += 2 * Math.PI;
+    }
+    this.arc(centerX, centerY, radius, startAngle, startAngle + angleDiff, false);
+    this.lineTo(x2, y2);
+    return this;
+  }
+  ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+    this.currentPath.absellipse(x, y, radiusX, radiusY, startAngle, endAngle, !counterclockwise, rotation);
+    return this;
+  }
   rect(x, y, w, h) {
     this.currentPath.rect(x, y, w, h);
     return this;
@@ -949,8 +1081,33 @@ class Path2D {
     this.currentPath.splineThru(points);
     return this;
   }
-  toPathCommands() {
-    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.toPathCommands()));
+  getMinMax(min = new Point2D(), max = new Point2D()) {
+    this.paths.forEach((path) => path.curves.forEach((curve) => curve.getMinMax(min, max)));
+    return { min, max };
+  }
+  getCommands() {
+    return this.paths.flatMap((path) => path.curves.flatMap((curve) => curve.getCommands()));
+  }
+  getData() {
+    return this.paths.map((path) => path.getData()).join(" ");
+  }
+  getBoundingBox() {
+    const min = Point2D.MAX;
+    const max = Point2D.MIN;
+    this.paths.forEach((path) => path.getMinMax(min, max));
+    return {
+      x: min.x,
+      y: min.y,
+      width: max.x - min.x,
+      height: max.y - min.y
+    };
+  }
+  getSvgString() {
+    const { x, y, width, height } = this.getBoundingBox();
+    return `<svg viewBox="${x} ${y} ${width} ${height}" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" d="${this.getData()}"></path></svg>`;
+  }
+  getSvgDataUri() {
+    return `data:image/svg+xml;base64,${btoa(this.getSvgString())}`;
   }
   drawTo(ctx) {
     this.paths.forEach((path) => {

package/dist/index.d.cts

@@ -36,6 +36,8 @@ type PathCommand = {
 declare class Point2D {
     x: number;
     y: number;
+    static get MAX(): Point2D;
+    static get MIN(): Point2D;
     constructor(x?: number, y?: number);
     set(x: number, y: number): this;
     add(point: Point2D): this;
@@ -58,8 +60,12 @@ declare abstract class Curve {
     protected _cacheArcLengths?: number[];
     protected _needsUpdate: boolean;
     abstract getPoint(t: number, output?: Point2D): Point2D;
-    abstract toPathCommands(): PathCommand[];
+    abstract getCommands(): PathCommand[];
     abstract drawTo(ctx: CanvasRenderingContext2D): void;
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     getDivisions(divisions: number): number;
     getPointAt(u: number, output?: Point2D): Point2D;
     getPoints(divisions?: number): Point2D[];
@@ -70,6 +76,7 @@ declare abstract class Curve {
     getUtoTmapping(u: number, distance?: number): number;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
+    getData(): string;
     clone(): this;
     copy(source: Curve): this;
 }
@@ -99,7 +106,11 @@ declare class CurvePath extends Curve {
     absarc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise?: boolean): this;
     ellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
     absellipse(x: number, y: number, xRadius: number, yRadius: number, startAngle: number, endAngle: number, clockwise?: boolean, rotation?: number): this;
-    toPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: CurvePath): this;
 }
@@ -110,11 +121,14 @@ declare class CircleCurve extends Curve {
     start: number;
     end: number;
     constructor(center: Point2D, radius: number, start?: number, end?: number);
-    getPole(min: Point2D, max: Point2D): void;
-    getPoint(index: number): Point2D;
-    getTangent(index: number): Point2D;
-    getNormal(index: number): Point2D;
-    toPathCommands(): PathCommand[];
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
+    getPoint(t: number): Point2D;
+    getTangent(t: number): Point2D;
+    getNormal(t: number): Point2D;
+    getCommands(): PathCommand[];
     drawTo(_ctx: CanvasRenderingContext2D): void;
 }
 
@@ -125,7 +139,11 @@ declare class CubicBezierCurve extends Curve {
     v3: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D, v3?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
-    toPathCommands(): PathCommand[];
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: CubicBezierCurve): this;
 }
@@ -142,7 +160,7 @@ declare class EllipseCurve extends Curve {
     constructor(x?: number, y?: number, rx?: number, ry?: number, startAngle?: number, endAngle?: number, clockwise?: boolean, rotation?: number);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    toPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: EllipseCurve): this;
 }
@@ -160,7 +178,7 @@ declare class HeartCurve extends Curve {
     getCurrentLine(value: number): Curve;
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
-    toPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(ctx: CanvasRenderingContext2D): void;
 }
 
@@ -173,7 +191,11 @@ declare class LineCurve extends Curve {
     getPointAt(u: number, output?: Point2D): Point2D;
     getTangent(t: number, output?: Point2D): Point2D;
     getTangentAt(u: number, output?: Point2D): Point2D;
-    toPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: LineCurve): this;
 }
@@ -194,7 +216,11 @@ declare class PloygonCurve extends Curve {
     getCurrentLine(value: number): LineCurve;
     getTangent(value: number): Point2D;
     getNormal(value: number): Point2D;
-    toPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D): void;
 }
 
@@ -204,7 +230,11 @@ declare class QuadraticBezierCurve extends Curve {
     v2: Point2D;
     constructor(v0?: Point2D, v1?: Point2D, v2?: Point2D);
     getPoint(t: number, output?: Point2D): Point2D;
-    toPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D): void;
     copy(source: QuadraticBezierCurve): this;
 }
@@ -227,7 +257,11 @@ declare class RectangularCurve extends Curve {
     getCurrentLine(t: number): LineCurve;
     getTangent(t: number): Point2D;
     getNormal(value: number): Point2D;
-    toPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
     drawTo(ctx: CanvasRenderingContext2D): void;
 }
 
@@ -236,7 +270,7 @@ declare class SplineCurve extends Curve {
     constructor(points?: Point2D[]);
     getDivisions(divisions?: number): number;
     getPoint(t: number, output?: Point2D): Point2D;
-    toPathCommands(): PathCommand[];
+    getCommands(): PathCommand[];
     drawTo(_ctx: CanvasRenderingContext2D): void;
     copy(source: SplineCurve): this;
 }
@@ -247,14 +281,31 @@ declare class SplineCurve extends Curve {
 declare class Path2D {
     currentPath: CurvePath;
     paths: CurvePath[];
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): this;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
-    lineTo(x: number, y: number): this;
+    addPath(path: Path2D): 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: number): this;
     rect(x: number, y: number, w: number, h: number): this;
     splineThru(points: Point2D[]): this;
-    toPathCommands(): PathCommand[];
+    getMinMax(min?: Point2D, max?: Point2D): {
+        min: Point2D;
+        max: Point2D;
+    };
+    getCommands(): PathCommand[];
+    getData(): string;
+    getBoundingBox(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    getSvgString(): string;
+    getSvgDataUri(): string;
     drawTo(ctx: CanvasRenderingContext2D): void;
     strokeTo(ctx: CanvasRenderingContext2D): void;
     fillTo(ctx: CanvasRenderingContext2D): void;