关于使用canvas画图可以点击的问题

先上代码：

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext('2d');

var r = canvas.width / 2;

var arr=["red","orange","blue","green"];

for(var i=0;i

ctx.beginPath();

ctx.arc(r, r, r, Math.PI * (i)/2,Math.PI * (i+1)/2);

ctx.fillStyle = arr[i];

ctx.fill();

}

function isInPath (x, y){

return ctx.isPointInPath(x, y)//判断是否在某个区域内

}

canvas.addEventListener('click', function(e){

for(var i=0;i

ctx.beginPath();

ctx.arc(r, r, r, Math.PI * (i)/2,Math.PI * (i+1)/2);

if(isInPath(e.offsetX, e.offsetY)) {

alert(arr[i])

}

}

})