Question

http://jsfiddle.net/cs5Sg/

As you can see, I’m trying to make two circles and one line. When u click on the first cirle u can modify the line position.
I have 2 questions:

1. How to remove the second line? (The second line swhow up only when I add the second circle.)
2. How to stop the “animation” after mouseup event?

Answer 1

You only begin one path, hence the line between the two circles, and start will always be true in that if statement – you should put that inside the mousemove listener, and only attach it once.

This creates an arc:

context.arc(x,y,radius,0,2*Math.PI);

And then, this creates an arc on the same path, so there’ll be a line from the last one’s end to this one’s start:

context.arc(x1,y1,radius,0,2*Math.PI);

Instead, just put them in separate paths:

context.beginPath();
context.arc(x,y,radius,0,2*Math.PI);
context.stroke();

context.beginPath();
context.arc(x1,y1,radius,0,2*Math.PI);

context.moveTo(x,y);
context.lineTo(x1,y1);
context.stroke();

Here’s the updated jsFiddle.