Javascript 角度画布问题（无法设置未定义的属性'；线宽'）

我正在尝试制作包含画布元素的角度组件，您可以将其用作绘图工具

它编译成功，但我一单击画布就会显示两个错误：

错误类型错误：this.draw不是函数

错误类型错误：无法设置未定义的属性“lineWidth”

组件代码：

export class WhiteboardComponent implements OnInit {

  board: HTMLCanvasElement;
  ctx: CanvasRenderingContext2D;
  active: boolean = false;

  constructor() {
  }

  ngOnInit(): void {

    this.board = <HTMLCanvasElement>document.getElementById('board');
    this.ctx = this.board.getContext('2d');

    this.board.addEventListener("mousedown", this.startDrawing);
    this.board.addEventListener("mouseup", this.endDrawing);
    this.board.addEventListener("mousemove", this.draw);

  }


  startDrawing(e: MouseEvent): void {

    this.active = true;
    this.draw(e);

    console.log("start drawing: active:" + this.active);

  }

  endDrawing(): void {

    this.active = false;
    this.ctx.beginPath();
    console.log("end drawing: active:" + this.active);
  }

  draw(e: MouseEvent): void {

    console.log("drawing...");

    if (!this.active) { return; }

    this.ctx.lineWidth = 10;
    //this.ctx.strokeStyle = 'black';
    this.ctx.lineCap = "round";
    this.ctx.lineTo(e.clientX, e.clientY);
    this.ctx.stroke();
    this.ctx.beginPath();
    this.ctx.moveTo(e.clientX, e.clientY);

  }
}

导出类白板组件实现OnInit{
董事会：HTMLCanvasElement；
ctx:CanvasRenderingContext2D；
活动：布尔=假；
构造函数（）{
}
ngOnInit（）：void{
this.board=document.getElementById（'board'）；
this.ctx=this.board.getContext（'2d'）；
this.board.addEventListener（“鼠标向下”，this.startDrawing）；
this.board.addEventListener（“鼠标”，this.endDrawing）；
this.board.addEventListener（“mousemove”，this.draw）；
}
开始绘图（e:MouseeEvent）：无效{
this.active=true；
本图为（e）；
console.log（“开始绘图：激活：+此.active”）；
}
endDrawing（）：void{
this.active=false；
this.ctx.beginPath（）；
console.log（“结束图：活动：“+此.active”）；
}
draw（e:MouseEvent）：无效{
控制台日志（“绘图…”）；
如果（！this.active）{return；}
this.ctx.lineWidth=10；
//this.ctx.strokeStyle='black'；
this.ctx.lineCap=“round”；
this.ctx.lineTo（e.clientX，e.clientY）；
这个.ctx.stroke（）；
this.ctx.beginPath（）；
this.ctx.moveTo（e.clientX，e.clientY）；
}
}

您应该将事件侦听器绑定到组件范围：

this.board.addEventListener("mousedown", this.startDrawing.bind(this));
this.board.addEventListener("mouseup", this.endDrawing.bind(this));
this.board.addEventListener("mousemove", this.draw.bind(this));

备选方案：

    this.board.addEventListener("mousemove", (evt) => {
        console.info(evt);
        this.draw(evt);
    });

---

您应该将事件侦听器绑定到组件范围：

this.board.addEventListener("mousedown", this.startDrawing.bind(this));
this.board.addEventListener("mouseup", this.endDrawing.bind(this));
this.board.addEventListener("mousemove", this.draw.bind(this));

备选方案：

    this.board.addEventListener("mousemove", (evt) => {
        console.info(evt);
        this.draw(evt);
    });