Angularjs 如何调用'p5.js'在按钮上单击绘制方法

我正在使用

p5.js

&下面是绘图代码

sketch(p: any) {
    p.setup = function () {
      var canvas = p.createCanvas(700, 400);
      canvas.parent('sketchdiv');
      p.strokeWeight(5);
      p.stroke(0);
    };
    p.draw = () => {
      if (p.mouseIsPressed) {
        if (p.mouseButton === p.LEFT) {
          p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY);
        }
      }
    };

    p.mouseReleased = () => {
      console.log("mouseReleased");
    };
}

但我只想在用户选择铅笔（点击图标）时绘制

但是我无法访问

isPencil

内的

sketch

变量。怎么做？如何在angular模式下将

setup（）

和

draw（）

与实例模式分离

请帮助/指导

<span (click)="pencil()">
    <i class="fas fa-pencil-alt"></i>
</span>

  isPencil: boolean = false;
  pencil() {
    console.log("Pencil is chosen");
    this.isPencil = true;
  }