कैनवास तत्व में खींचे गए तत्वों का कोई प्रतिनिधित्व नहीं है। उनका एकमात्र प्रतिनिधित्व उनके द्वारा उपयोग किए जाने वाले पिक्सेल और उनका रंग है। कैनवास तत्व में आरेखण का अर्थ है तत्काल मोड में बिटमैप बनाना। कैनवास तत्व (आकृति) पर एक क्लिक ईवेंट प्राप्त करने के लिए, आपको कैनवास 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);
});