Topic: Canvas based apps which allow user to interact directly using mouse (Page 1 of 1)

Hello,
I've been looking to find technicuqes for canvas based apps which allow the user to directly interact with objects displayed within, through mouse events [vs binding to a keyboard event], and was wondering if somebody could show some examples or some techniques used to achieve this... ?

If it were plain dhtml it wouldnt be a problem because i could bind to events on a specific domnode, but using canvas its an entire other pair of gloves.

Any input, anybody?

Using SVG you could add any regular DOM event listener to the shapes or groups.

Using Canvas, you can easily track the position of the mouse on click or mouse move, convert the coordinates to the coordinates system of your canvas ( if it's scaled ), then check if the point is inside the path of some geometric shapes if you use geometric to represent or approximate the elements on your canvas. If you use bitmaps, one way to do collision detection is to have a hidden canvas where you draw each element with a unique color so that can simply check the color where the user clicked and voila.

Thanks for the reply,
If using 3d in the canvas, what kind of technique would you suggest to map out the current polygon which is being interacted with? A separate canvas which maps the projection of the polygons and ultimatley use the same technique as you mentioned for bitmaps or is there something more efficient? I'd like to handle solid textured objects. Think the basics of the engine for a game, but thats not what its going to be used for.. just some infographics in the context of a visual experiment.

Also, i'm looking for some info on documentation which you may think is worthwile reading on the subject, or any toolkits which could eventually handle this but are difficult to find if not specifically searched for.. got any pointers? I'm currently using dojo which has 3d drawing ability, but am not quite satisfied with performance...