Irregular image drag & drop using HTML5 canvas

Question

I'd like to be able to write an application in HTML5 that is similar to the following.

HTML5 Canvas Animals on the Beach Game with KineticJS

The problem with that demo though is the mouse over event is only accurate to the rectangle surrounding the animal. Is there any way to do this with more accuracy, be it in KinectJS or otherwise?

Answer 1

There are generally two ways:

1. Using custom paths with each image as hitboxes (that you manually define) then using an is-point-in-path algorithm
2. Using a ghost-canvas (or whatever you like to call it) as I detailed in this old tutorial . Ignore the link to the new tutorial, the old one uses what you'd want.

The first method here is much faster but requires a lot more code and manual work. The second method is pixel-perfect but much slower. Still, if you don't have an enormous amount of objects it may suit your needs.