如何检测画布中的非透明区域？并在非透明区域跟踪绘制线

Question

我正在使用ionic 4制作绘图应用程序，在该应用程序中，我使用drawImage在画布中添加了图像。

此处的图片示例：

在此图像中，如果用户（孩子）画一条线来学习数字。例如如果用户当时在1号图像上绘制1号，我想以百分比显示准确性。一旦达到100％，就表示是正确的。

isTransparent(x, y) { // x, y coordinate of pixel
let alpha = this.ctx.getImageData(x, y, 1, 1).data[3]; // 3rd byte is alpha

if (alpha === 0) {
  this.accuracy = 0;
  console.log("Transparent image clicked!");
} else {
  this.accuracy = 100;
  console.log("image clicked!");
}
}

我在GitHub上添加的code sample是live Demo。