restricting movement inside a html5 canvas?

Question

I have a Canvas in which I'm loading images from HTML img tag on click... I'm making those elements draggable using kinetic.js library.. Now what I want to achieve is to restrict the movement of those images within a particular area. and also to make em snappable if one comes near the other... I was looking at jquery draggable library but thr is no use of implementing that stuff inside of html5 canvas..cause the library makes the elements draggable and then the snap operation works..now my elements are already draggable.So it will just make things more complex and will decrease speed.

So anyone knows any way to restrict the movement of Images inside HTml5 canvas ..?

Answer 1

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/

here is the answer..Thanks to KineticJs