The computer graphics term for what you're trying to do is picking.
The issue with picking from an HTML
canvas is that the
canvas doesn't understand anything about sprites -- all it knows about is pixels. In more general terms,
canvas is a purely graphical representation -- it stores no semantic information. It has no idea what you wanted those pixels to represent.
The sprites you're talking about (which you're
for-looping over and which KineticJS has triggering events and such) are not defined at the
canvas level, but at your application's level. You could be rendering them with WebGL or SVG or anything else, but their semantics (what they mean) would stay the same. That's where you should be asking what did we click on?
All of this is just a long way of saying you're doing it totally right. :) Looping over objects to see which one of them was clicked is totally reasonable. (The
canvas could only have told you is what colour the clicked pixel was.)
Some stuff you might want to consider:
- If you want pixel-perfect picking from a
canvas, there's a very good discussion of that here.
- If you're worried about picking performance as the number of objects increases, you could speed it up by storing your objects in a quadtree. I've had great success using D3's quadtree implementation.
- If you want to make your own
EventEmitters, consider using Node.js' event API, which has been ported to also run on browser JS engines.