如何在HTML5画布上使用多次点击事件？

当在画布上绘制一个圆，然后将红色放在一半上，灰色放在圆的一部分上，然后单击红色时，我们将其称为function1。

单击灰色部分时，将调用函数2，我们需要使用可重用的路径对象来存储要测试的不同部分。点击处理程序可用于共享画布并完成我们所需的工作。Path2D对象可用于存储路径信息。

var path1 = new Path2D();
var path2 = new Path2D();

var newpaths = [path1,path 2];   // Array is needed to store paths

path1.arc(200, 85,650, -0.2 * Math.PI, 2.7 * Math.PI);  // Path for red part
path2.arc(200, 85, 60, 2.7 * Math.PI, -1.1 * Math.PI);  //Path for  grey part


// Two path objects are rendered  using a common context ctx1, but with different style
ctx1.lineWidth = 16;
ctx1.strokeStyle = "#d43030";
ctx1.stroke(path1);
ctx1.strokeStyle = "#b8b8b8";
ctx1.stroke(path2);

然后使用x和y轴检查常见画布上的点击次数。
然后迭代路径数组以测试每个路径的点击率。

<canvas id = "myCanvas1"></canvas> // Then it is attached with corresponding canvas.