ক্যানভাস এলিমেন্টে যে উপাদানগুলো আঁকা হয় সেগুলোর কোনো উপস্থাপনা নেই। তাদের একমাত্র উপস্থাপনা হল তারা যে পিক্সেলগুলি ব্যবহার করে এবং তাদের রঙ। একটি ক্যানভাস উপাদান আঁকা মানে তাত্ক্ষণিক মোডে একটি বিটম্যাপ আঁকা। একটি ক্যানভাস উপাদান (আকৃতি) এ একটি ক্লিক ইভেন্ট পেতে, আপনাকে ক্যানভাস HTML উপাদানে ক্লিক ইভেন্টগুলি ক্যাপচার করতে হবে এবং কোন উপাদানটি ক্লিক করা হয়েছে তা নির্ধারণ করতে হবে। এর জন্য উপাদানটির প্রস্থ এবং উচ্চতা সংরক্ষণ করা প্রয়োজন।
আপনার ক্যানভাস উপাদানে একটি ক্লিক ইভেন্ট যোগ করতে, নীচের প্রদত্ত কোড ব্যবহার করুন
canvas.addEventListener('click', function() { }, false); উদাহরণ
কোন উপাদানে ক্লিক করা হয়েছে তা নির্ধারণ করতে, নিম্নলিখিত কোড স্নিপেটটি ব্যবহার করুন −
var e = document.getElementById('myCanvas'),
elemLeft = e.offsetLeft,
elemTop = e.offsetTop,
context = e.getContext('2d'),
elements = [];
// event listener for click event
e.addEventListener('click', function(event) {
var xVal = event.pageX - elemLeft,
yVal = event.pageY - elemTop;
console.log(xVal, yVal);
elements.forEach(function(ele) {
if (yVal > ele.top && yVal < ele.top + ele.height && xVal > ele.left && xVal < ele.left + ele.width) {
alert(‘element clicked');
}
});
}, false);
elements.push({
colour: '#1C2128’,
width: 250,
height: 200,
top: 30,
left: 20
});
elements.forEach(function(ele) {
context.fillStyle = element.colour;
context.fillRect(ele.left, ele.top, ele.width, ele.height);
}); 