जब कैनवास पर एक सर्कल ड्रॉ किया जाता है और हम आधे पर लाल रंग और सर्कल के एक हिस्से पर ग्रे रंग डालते हैं, तो लाल रंग पर क्लिक करने पर हम function1 को कॉल करते हैं।
ग्रे भाग पर क्लिक करने पर, function 2 को कॉल किया जाता है और हमें विभिन्न भागों को स्टोर करने के लिए पुन: प्रयोज्य पथ ऑब्जेक्ट्स का उपयोग करने की आवश्यकता होती है, जिनका हम परीक्षण करना चाहते हैं। क्लिक हैंडलर को कैनवास को साझा करने और हमारे वांछित कार्य को करने के लिए उपयोग किया जा सकता है। Path2D ऑब्जेक्ट्स का उपयोग पथ जानकारी स्टोर करने के लिए किया जा सकता है।
var path1 = new Path2D(); var path2 = new Path2D(); var newpaths = [path1,path 2]; // पथ स्टोर करने के लिए सरणी की आवश्यकता होती है path1.arc(200, 85,650, -0.2 * Math.PI, 2.7 * Math.PI); // लाल भाग के लिए पथ path2.arc(200, 85, 60, 2.7 * Math.PI, -1.1 * Math.PI); //ग्रे भाग के लिए पथ // दो पथ ऑब्जेक्ट्स को एक सामान्य संदर्भ ctx1 का उपयोग करके रेंडर किया जाता है, लेकिन अलग स्टाइल के साथ ctx1.lineWidth = 16; ctx1.strokeStyle = "#d43030"; ctx1.stroke(path1); ctx1.strokeStyle = "#b8b8b8"; ctx1.stroke(path2);
फिर x और y-अक्ष के साथ सामान्य कैनवास पर क्लिक की जांच की जाती है। फिर पथ सरणी को प्रत्येक पथ के लिए हिट का परीक्षण करने के लिए इटरेट किया जाता है।
<canvas id = "myCanvas1"></canvas> // फिर इसे संबंधित कैनवास से जोड़ा जाता है।
