HTML5 Canvas एलिमेंट पर सिंपल onClick इवेंट हैंडलर कैसे जोड़ें?

कैनवास एलिमेंट में खींचे गए एलिमेंट्स का कोई प्रतिनिधित्व नहीं होता। उनका एकमात्र प्रतिनिधित्व उनके द्वारा उपयोग किए जाने वाले पिक्सेल्स और उनका रंग होता है। कैनवास एलिमेंट पर ड्राइंग का अर्थ इमीडिएट मोड में बिटमैप ड्राइंग है। कैनवास एलिमेंट (आकृति) पर क्लिक इवेंट प्राप्त करने के लिए, आपको कैनवास HTML एलिमेंट पर क्लिक इवेंट्स कैप्चर करने और यह निर्धारित करने की आवश्यकता है कि कौन सा एलिमेंट क्लिक किया गया था। इसके लिए एलिमेंट की चौड़ाई और ऊंचाई स्टोर करने की आवश्यकता होती है।

अपने कैनवास एलिमेंट पर क्लिक इवेंट जोड़ने के लिए, नीचे दिए गए कोड का उपयोग करें:

canvas.addEventListener('click', function() { }, false);

उदाहरण

यह निर्धारित करने के लिए कि कौन सा एलिमेंट क्लिक किया गया था, निम्न कोड स्निपेट उपयोग करें:

var e = document.getElementById('myCanvas'),
    elemLeft = e.offsetLeft,
    elemTop = e.offsetTop,
    context = e.getContext('2d'),
    elements = []; // click इवेंट के लिए इवेंट लिसनर
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 = ele.colour;
  context.fillRect(ele.left, ele.top, ele.width, ele.height);
});

कैनवास में हिट टेस्टिंग मैन्युअल करनी पड़ती है। प्रत्येक ड्रॉन ऑब्जेक्ट की ज्यामिति (स्थिति, आकार) स्टोर करें, फिर क्लिक निर्देशांकों की तुलना करें। लाइब्रेरीज़ जैसे Fabric.js, Konva.js, Paper.js इसे सरल बनाती हैं।