যখন ক্যানভাসে একটি বৃত্ত আঁকা হয় এবং আমরা একটি বৃত্তের অর্ধেক অংশে লাল এবং ধূসর রঙ রাখি, তখন একটি লাল রঙে ক্লিক করলে, আমরা ফাংশন 1 বলি৷
ধূসর অংশে ক্লিক করার সময়, ফাংশন 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.
