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.