From eb3236f3cd0c60900f704bb3ac2198f659d3ba8a Mon Sep 17 00:00:00 2001
From: Robin Steinberg <robinsteinberg92@gmail.com>
Date: Wed, 25 Aug 2021 23:12:19 +0200
Subject: [PATCH] Fixed rendering issues

---
 ts/app.ts | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/ts/app.ts b/ts/app.ts
index 427413c..3838f6e 100644
--- a/ts/app.ts
+++ b/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
-     * coordinates need to be handled with the moveTo canvas method instead of lineTo, therefore
-     * this variable is needed to decide how to handle the next coordinates.
+     * Represents whether the app is waiting for the first coordinates of a draw path. If lineTo
+     * is called with the first pair of coordinates, every path will be connected. Therefore this
+     * 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.ctx.beginPath();
-        this.waiting = true;
+        this.firstCoordinates = true;
     }
 
     stopDrawing() {
@@ -77,15 +76,20 @@ class CanvasReceiverController {
             return;
         }
 
-        if (this.waiting) {
-            this.waiting = false;
-            this.ctx.moveTo(coordinates.x, coordinates.y);
+        this.ctx.beginPath();
+
+        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;
     }
 }