Constrain dragging to a circular path?

I am designing an interface where a person will drag a circular measurement tool (called a goniometer) over part of an image, and then rotate two different arms on the tool to measure an angle.

The entire tool itself needs to be draggable by its center. So far I have the arms rotating by means of pressing the arrow keys on the keyboard, but it would be more realistic to have the user drag the arms to rotate them. I can’t think of how to accomplish that, though.

Please see this example to get an idea of what I am doing:

http://interactive.elon.edu/goniometer.html

My other question is, why is it that you have to click the mouse somewhere on the screen before the key arrows will work?

TIA!