Fixed rendering issues

ts/app.ts

@@ -3,13 +3,14 @@ class CanvasReceiverController {
     private canvas!: HTMLCanvasElement;
     private ctx!: CanvasRenderingContext2D | null;
     private ws: WebSocket;
+    private coordinates?: Coordinates;
 
     /**
-     * Represents whether the app is waiting for the first coordinates of a draw path. The first
+     * Represents whether the app is waiting for the first coordinates of a draw path. If lineTo
-     * coordinates need to be handled with the moveTo canvas method instead of lineTo, therefore
+     * is called with the first pair of coordinates, every path will be connected. Therefore this
-     * this variable is needed to decide how to handle the next coordinates.
+     * variable is needed to prevent drawing a line to the first pair of coordinates.
      */
-    private waiting: boolean = false;
+    private firstCoordinates: boolean = false;
 
     constructor() {
         this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
@@ -56,9 +57,7 @@ class CanvasReceiverController {
         if (!this.ctx) {
             return;
         }
-
+        this.firstCoordinates = true;
-        this.ctx.beginPath();
-        this.waiting = true;
     }
 
     stopDrawing() {
@@ -77,15 +76,20 @@ class CanvasReceiverController {
             return;
         }
 
-        if (this.waiting) {
+        this.ctx.beginPath();
-            this.waiting = false;
+
-            this.ctx.moveTo(coordinates.x, coordinates.y);
+        if (this.coordinates) {
+            this.ctx.moveTo(this.coordinates.x, this.coordinates.y);
+        }
+
+        if (this.firstCoordinates) {
+            this.firstCoordinates = false;
         } else {
             this.ctx.lineTo(coordinates.x, coordinates.y);
         }
 
-        this.ctx.lineWidth = 1;
         this.ctx.stroke();
+        this.coordinates = coordinates;
     }
 }