jquery - HTML5 Canvas, registering click events for each rectangle -

यह एक रंग बार है जो HTML5 कैनवास पर एक ड्रा है प्रत्येक रंग बार को 00:30 या 05:45 जैसे एक समय स्टाम्प represnets।

ये रंग सलाखों मूल रूप से आयताकार हैं जो मैं कैनवास पर खींचता हूँ।

मैं एक प्रत्येक आयत के लिए ईवेंट पर क्लिक करें ताकि मैं टाइमस्टैम्प दिखा सकूं और पृष्ठ पर अन्य सामान अपडेट कर सकूं। क्या यहां कोई भी मदद कर सकता है, प्रत्येक आयत के लिए क्लिक ईवेंट कैसे रजिस्टर करें?

बीटीडब्लू, मैं एम्बरजेएस का उपयोग कर रहा हूं, इसलिए डेटा अपडेट करना कोई समस्या नहीं है।

UPDATE

यहां एक अलग स्ट्रैक ओवरफ्लो प्रश्न से जेएसएफडियल है। http://jsfiddle.net/DV9Bw/

  ड्रा: फ़ंक्शन (इंडेक्स, स्कोर) {var कैनवास = this.get ('element') var ctx = canvas.getContext ( '2 डी'); ctx.fillStyle = this.get ( 'colorCodes') [गणित.गोल (स्कोर)]; ctx.fillRect (सूचकांक * 3,0,3,150); यह देखते हुए, यह हमें रंग का मान लौटाता है, लेकिन मैं कुछ अन्य डेटा भी दिखाना चाहता हूं।   
   
 < Div class = "post-text" itemprop = "text"> 
 यह आपके उपयोग के मामले में हो सकता है कि  पूर्ण समाधान  नहीं है, लेकिन उदाहरण के साथ थोड़ा सा गड़बड़ करने के बाद आप यहां दिए गए उदाहरण के साथ।  
 
 बीटीडब्लू, मैं एम्बरजेएस का उपयोग कर रहा हूं, इसलिए डेटा अपडेट करना कोई समस्या नहीं है।   
 मैंने पहले   एम्बरिफ़िड   एम्बर का उपयोग प्रतिबिंबित करने के लिए उदाहरण।  
 मुझे लगता है कि मुश्किल भाग पर आप अपने एम्बर में निहित डेटा  मानचित्र / संबंधित  कैसे करते हैं  कैनवास में क्लिक किए गए बार के साथ मॉडल  रिकॉर्ड, क्योंकि क्लिक किए गए तत्व का आपके मॉडल के संबंध में कोई डेटा नहीं है।  
 एक संभावित समाधान के साथ बार के सूचकांक की गणना करने के लिए हो सकता है वर्तमान माउस निर्देशांक तब होता है जब एक बार क्लिक किया जाता है, और  objectAt (index) ।  
 के साथ परिकलित सूचकांक से संबंधित आंकड़ों को खोजता है। संभावित सापेक्षता  (सादगी के लिए किसी भी रूपरेखा के उपयोग के बिना)  के लिए प्रदान की गई तरफ देखा है, यह एक कुछ भोलेदार दृष्टिकोण हो सकता है जिसे आगे सुधार किया जा सकता है, लेकिन प्रारंभिक बिंदु के रूप में यह काम करने के लिए तेजी अब तक।  
 आशा है कि यह मदद करता है।