เมื่อมีวงกลมวาดบน canvas และเราทาสีแดงครึ่งหนึ่งและสีเทาส่วนหนึ่งของวงกลม แล้วคลิกสีแดง เรียก function1
คลิกส่วนสีเทา เรียก function2 ต้องใช้ reusable path objects เก็บส่วนต่างๆ ที่ต้องการทดสอบ Click handler ใช้ร่วมกับ canvas และทำงานที่ต้องการ Path2D objects ใช้เก็บข้อมูล path
var path1 = new Path2D(); var path2 = new Path2D(); var newpaths = [path1, path2]; // 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);
จากนั้นตรวจสอบการคลิกบน canvas ร่วมกับแกน x และ y แล้ว iterate path array ทดสอบแต่ละ path สำหรับ hits
<canvas id="myCanvas1"></canvas> // Then it is attached with corresponding canvas.
