Pass information to a canvas element that will be returned when it is clicked

Question

Is there a way to pass some id or information to an canvas element so that when you click on it you can retrieve it back?

Answer 1

I suggest you to take a look to Kinetic.js an object oriented canvas library. There are other options, but from the ones I've tried until now this one is specially easy to integrate in a HTML5 / Canvas project (IMO) and has a great support for events (click, mouseOver, mouseOut... etc.) and also for Drag & Drop. Great to use in user-interaction-oriented canvases.

Hope it helps you.

Answer 2

I'm afraid that you may not select canvas element just like selecting HTML DOM element by id or class. But you still can add mouse event listeners to detect the coordinates. And I still think using HTML button tag is much better.

Here's a tutorial about it http://simonsarris.com/blog/140-canvas-moving-selectable-shapes.

Hopefully, it can give you help.