private draw()

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