Suppose i have a html5/canvas application in which i can place objects on a drawing-canvas. Some kind of diagram editor, something like Visio (but much simpler)
Is there a framework which helps me find which object is clicked/draged?
An option is to capture the click-event and iterate over all my objects (in a semi-smart way) and check if it is clicked/draged, but I hate to reinvent the wheel :)
Unfortunately there is no object model for stuff you render into a canvas. You would need to keep track of everything you've drawn and fire separate events when you detect clicks, mouseup, mousedown, drags. It would mean creating a wrapper for all the context methods, storing the lines/images and their attributes into a COM (Canvas Object Model :) and firing events for each of the lines/images
I haven't seen anything out there that does it. This can be a lot of work, I've resorted to writing custom code everytime I need to add interactivity to a Canvas
For a Visio style app, or anything where interactivity with the drawn objects is important, you're better off with SVG. There are already some open source projects which you could use as a starting point. The problem with SVG is, as with any DOM heavy stuff, performance can degrade sharply once you have a large number of objects to manipulate.
The short version is that Canvas itself keeps track of none of that.
If you don't want to reinvent the wheel, start with my sample code from the tutorial "Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example." It provides a good introduction and platform for clicking and dragging.