HTML Canvas - Drag object along a path

[FlatChat]

Looking for an example of dragging an object (e.g. symbol) along a path. In this case just aound a circle path.

[FlatChat]

@kglad   Last question on this for the moment hopefully.

As I mentioned earlier, when you click to move the object around the circle, the object jumps to a postion on the circle circumference. 

I want the object to move from where it is originally positioned (above the 90 degree mark on the circle/compass symbol), and not jump to another position when starting to drag. 

You can see this in the video below.   

I need this to coordinate the movement of the light streak on the eye, as per a previous vide I posted above.  This is really important.

My current code:

stage.enableMouseOver();

var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;


root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));


function mouseOverKnob(evt)
{
    root.streakRotatorKnob.addEventListener("pressmove", moveF);
}


function moveF(evt) {
	var rads = Math.atan2(stage.mouseY - knob_Y, stage.mouseX - knob_X);
	evt.currentTarget.x = knob_X + radius * Math.cos(rads);
    evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
	stage.update();
	
	streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);
	if (leye == true) {
		root.streakMainLeft.rotation = streakAngle;
	} else if (reye == true) {
		root.streakMainRight.rotation = streakAngle;
	}
	root.streakAngle.text = streakAngle;
}

[kglad]

what's wrong with this, c (kglad.com)

[FlatChat]

@kglad   The c object jumps to a position close to the 180 mark on the circle, almost 1.57 rads clockwise from its starting location, on pressmove.  I need c to start from the the 90 mark on the circle on pressmove, that is it's originally stage position.

This is necesssy as the c object together with the dial/compass graphic is used by the user to rotate the light streak over the eye.  So they need to have the same starting angle to be synchcronised. The light streak coming from the retinoscope onto the eye always starts from vertical, so too does the knobe, c (in this case).

[FlatChat]

I solved this by just setting the position of the knob at the 0 position (3 o'clock) on the compass/dial/.  

stage.enableMouseOver();

var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;


root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));

root.streakRotatorKnob.x = knob_X + radius * Math.cos(0);
root.streakRotatorKnob.y = knob_Y + radius * Math.sin(0);

function mouseOverKnob(evt)
{
root.streakRotatorKnob.addEventListener("pressmove", moveF);
}


function moveF(evt) {
var rads = Math.atan2(stage.mouseY - knob_Y, stage.mouseX - knob_X);
var atan_knob = Math.atan2(evt.currentTarget.y, evt.currentTarget.x);
evt.currentTarget.x = knob_X + radius * Math.cos(rads);
evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
console.log(atan_knob);

streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);
if (leye == true) {
root.streakMainLeft.rotation = streakAngle + 90;
} else if (reye == true) {
root.streakMainRight.rotation = streakAngle + 90;
}
root.streakAngle.text = streakAngle + "\u00B0";
}

Though I may only need a half circle in the end going from 1 to 180...