Does any one know is there any collision detection API for HTML5 Canvas..?

Question

I have been experimenting HTML5 canvas by coding basic mind-mapping application. I have tried to find out if there is any javascript API used for managing object in canvas like collision detection between images or shapes. I think it is not a good idea to write my own since there might be some good API around. Anyone have clue or some information on this. I would very much appreciate.

Answer 1

Lately I've been experimenting with this myself. I found that Box2DJS is a great Newtonian physics engine, if you want to try it out. http://box2d-js.sourceforge.net/

It's kind of hard to grasp the concept at first, but it gets easier as you go on, and it also comes with some nice examples. Box2D has been ported to many languages and most use the same, or very similar methods, so documentation for any port will likely suit your needs.

Good luck :).

EDIT: I found a link to this documentation on the previously stated site: http://www.kyucon.com/doc/box2d/ (Couldn't make it a hyper link due to my low reputation limiting me to one per post, I'm a noob ;P)

It's for Box2DFlashAS3, but they claim that "The Box2DJS APIs are completely [the] same as those of Box2DFlashAS3"

EDIT: Oh, I just noticed you were looking for collision detection, not physics, my bad... Perhaps Box2D could still work, but perhaps not. Sorry about that...

Answer 2

Take a look at Cake. It's a scene graph plug-in for canvas elements. I don't think it'll do collision detection, but it will maybe help get you in the right direction. You can at least attach event handlers to canvas objects with it.