in src/app/canvas.component.ts [73:106]
private draw(event: MouseEvent) {
if (!this.drawing) return;
if (!this.canvas()) return;
const el = this.canvas()!.nativeElement as HTMLCanvasElement;
const context = el.getContext('2d');
if (!context) return;
const rect = el.getBoundingClientRect();
this.pointBuffer.push({
x: event.x - rect.left,
y: event.y - rect.top,
});
if (this.pointBuffer.length < 3) {
return;
}
context.moveTo(this.pointBuffer[0].x, this.pointBuffer[0].y);
context.bezierCurveTo(
this.pointBuffer[0].x,
this.pointBuffer[0].y,
this.pointBuffer[1].x,
this.pointBuffer[1].y,
this.pointBuffer[2].x,
this.pointBuffer[2].y
);
this.pointBuffer.shift();
context.stroke();
}