जब कैनवास पर एक वृत्त खींचा जाता है और हम आधे पर लाल रंग और वृत्त के एक हिस्से पर ग्रे रंग डालते हैं, तो लाल रंग पर क्लिक करने पर, हम 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.