Save paths

ts/app.ts

@@ -7,6 +7,9 @@ class CanvasController {
     private x: number = 0;
     private y: number = 0;
 
+    private paths: Coordinates[][] = [];
+    private currentPath: Coordinates[] = [];
+
     constructor() {
         this.canvas = document.createElement("canvas");
         this.canvasDiv = document.querySelector("#canvas") as HTMLDivElement;
@@ -26,10 +29,13 @@ class CanvasController {
         this.isMouseDown = true;
         this.x = event.clientX;
         this.y = event.clientY;
+        this.currentPath = [new Coordinates(this.x, this.y)];
     }
 
     onMouseUp() {
         this.isMouseDown = false;
+        this.ctx?.closePath();
+        this.paths.push(this.currentPath);
     }
 
     onMouseMove(event: MouseEvent) {
@@ -43,11 +49,24 @@ class CanvasController {
         this.ctx.lineWidth = 1;
         this.ctx.stroke();
 
+        this.currentPath.push(new Coordinates(event.clientX, event.clientY));
+
         this.x = event.clientX;
         this.y = event.clientY;
     }
 }
 
+
+class Coordinates {
+    public x: number;
+    public y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+}
+
 const app = new CanvasController();
 
 export { app };