Live preview - draw every coordinate

index.html

@@ -9,18 +9,10 @@
     </body>
 
     <style>
-        body {
-            margin: 0 0 0 0;
-        }
-
-        #canvas {
-            height: 100vh;
-            width: 100vw;
-        }
-
         #canvas > canvas {
-            width: 100%;
-            height: 100%;
+            width: 500px;
+            height: 500px;
+            border: 1px solid black;
         }
     </style>
-</html>
+</html>

ts/app.ts

@@ -4,6 +4,13 @@ class CanvasReceiverController {
     private ctx!: CanvasRenderingContext2D | null;
     private ws: WebSocket;
 
+    /**
+     * 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.
+     */
+    private waiting: boolean = false;
+
     constructor() {
         this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
 
@@ -12,7 +19,7 @@ class CanvasReceiverController {
         this.ws = new WebSocket('ws://localhost:8081', 'json');
 
         this.ws.onmessage = message => this.processMessage(message);
-        this.ws.onopen = () => this.ws.send("RECEIVER");
+        this.ws.onopen = () => this.ws.send('RECEIVER');
     }
 
     private createCanvas() {
@@ -20,34 +27,61 @@ class CanvasReceiverController {
         this.canvasDiv.appendChild(this.canvas);
         this.canvas.width = this.canvas.offsetWidth;
         this.canvas.height = this.canvas.offsetHeight;
-        this.ctx = this.canvas.getContext('2d');
-    }
-
-    processMessage(message: MessageEvent<any>) {
-        if (message.data === "CLEAR") {
-            this.canvasDiv.removeChild(this.canvas);
-            this.createCanvas();
+        if (!this.canvas.getContext) {
+            alert('Canvas API unavailable, drawing will not work!');
         } else {
-            this.draw(JSON.parse(message.data));
+            this.ctx = this.canvas.getContext('2d');
         }
     }
 
-    draw(path: Coordinates[]) {
+    processMessage(message: MessageEvent<any>) {
+        switch (message.data) {
+            case 'CLEAR':
+                this.clear();
+                break;
+            case 'START':
+                this.startDrawing();
+                break;
+            case 'STOP':
+                this.stopDrawing();
+                break;
+            default:
+                this.draw(JSON.parse(message.data));
+                break;
+        }
+    }
+
+    startDrawing() {
+        console.log('Received START command');
         if (!this.ctx) {
             return;
         }
 
-        const first = path.shift();
+        this.ctx.beginPath();
+        this.waiting = true;
+    }
 
-        if (!first) {
+    stopDrawing() {
+        if (!this.ctx) {
+            return;
+        }
+    }
+
+    private clear() {
+        this.canvasDiv.removeChild(this.canvas);
+        this.createCanvas();
+    }
+
+    draw(coordinates: Coordinates) {
+        if (!this.ctx) {
             return;
         }
 
-        this.ctx.beginPath();
-        this.ctx.moveTo(first.x, first.y);
-
-        for (const cur of path) {
-            this.ctx.lineTo(cur.x, cur.y);
+        if (this.waiting) {
+            this.waiting = false;
+            this.ctx.moveTo(coordinates.x, coordinates.y);
+        } else {
+            this.ctx.lineTo(coordinates.x, coordinates.y);
         }
 
         this.ctx.lineWidth = 1;