HTML5 Canvas KineticJS Custom Hit Function Tutorial

To create a custom hit draw function for a shape with KineticJS, we can set the drawHitFunc property.  A hit draw function is the function that KineticJS will use to draw a region used for hit detection.  Using a custom draw hit function can have several benefits, such as making the hit region larger so that it's easier for users to interact with a shape, making some portions of a shape detectable and others not, or simplifying the hit draw function in order to improve rendering performance.

Instructions: Mouseover, mouseout, mousedown, and mouseup over the star and observe that the hit region is an over sized circle encompassing the shape.

new window

Code Editor

Modified on April 9th, 2013 by Eric Rowell
comments powered by Disqus