vektron
/
canvas-receiver
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed rendering issues

This commit is contained in:
Robin Steinberg 2021-08-25 23:12:19 +02:00
parent 63d4e16fb8
commit eb3236f3cd
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ts/app.ts
View File

@ -3,13 +3,14 @@ class CanvasReceiverController {
private canvas!: HTMLCanvasElement; private canvas!: HTMLCanvasElement;
private ctx!: CanvasRenderingContext2D | null; private ctx!: CanvasRenderingContext2D | null;
private ws: WebSocket; 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() { constructor() {
this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement; this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
@ -56,9 +57,7 @@ class CanvasReceiverController {
if (!this.ctx) { if (!this.ctx) {
return; return;
} }
this.firstCoordinates = true;
this.ctx.beginPath();
this.waiting = true;
} }
stopDrawing() { stopDrawing() {
@ -77,15 +76,20 @@ class CanvasReceiverController {
return; 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 { } else {
this.ctx.lineTo(coordinates.x, coordinates.y); this.ctx.lineTo(coordinates.x, coordinates.y);
} }
this.ctx.lineWidth = 1;
this.ctx.stroke(); this.ctx.stroke();
this.coordinates = coordinates;
} }
} }