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 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;
}
}