Add An Event Listener To A Drawn Object On Html5 Canvas

I'm making a game where the bubbles (circles) appear on the screen and move upwards and I'm using HTML5 and JavaScript only which means no frameworks like kinetic and no jQuery at

Solution 1:

I have updated your sample on jsfiddle demonstrating hit-testing. This sample uses an onmousemove event handler bound to the canvas and performs the actual hit-test when this event occurs. The hit-test in your case is "Is the mouse coordinate with in the bubble's circle?"

Summary of changes:

• A "bubble" has a color property to demonstrate the effect of a hit test.
• function hitTest(x, y) { ... } used to test whether the passed in coordinates are within the bubble.
• function getMouse(e, canvas) ... used to transform the mouse coordinates to canvas relative coordinates. i.e, the mouse coordinate needs to be relative to the upper left hand corner of the canvas to be accurate.