ক্যানভাস এলিমেন্টে আঁকা এলিমেন্টগুলোর কোনো রিপ্রেজেন্টেশন নেই। তাদের একমাত্র রিপ্রেজেন্টেশন হলো তারা যে পিক্সেল এবং কালার ব্যবহার করে। ক্যানভাস এলিমেন্টে আঁকা মানে ইমিডিয়েট মোডে একটি বিটম্যাপ আঁকা। ক্যানভাস এলিমেন্টে (শেপে) ক্লিক ইভেন্ট পেতে, আপনাকে 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); });
