title: Drag a canvas element on a circle path
body: <p>I would like to achieve jQuery Knob-like effect using HTML5 Canvas, but with a circle knob/cursor, instead of the stroke cursor effect that jQuery Knob does.</p>
  
  <p>Based on jQuery Knob code, I was managed to connect the onMouseMove event with my circle knob/cursor so the circle knob moves according to the X and Y coordinates of where the mouse is. However I cannot "restrict" the knob to move only on/along the circle path just like <a href="http://bseth99.github.com/projects/svg/4-raphael-svg-slider.html" rel="nofollow"><strong>this example</strong></a>, so if I click/mousedown inside the circle path, the circle knob moves to inside the path.</p>
  
  <p>Is there any way to achieve this only using Canavas and jQuery, not Raphael like the example above? </p>
  
  <p>One of my thoughts was to move the circle knob back on track (on the path) whenever mousemove event occurs outside the path (like <a href="http://wrappingcontainer.com/stackoverflow/referenceimages/2.jpg" rel="nofollow"><strong>this</strong></a>). However no luck in succeeding the calculation for this. Is there any math/geometry formula I can use to achieve this?</p>