HTML5 Canvas, my arc draw a startline to the center

Question

The arc have the following result. Do I have to calculate the start point of the arc myself? jsfiddle link here: jsfiddle link here

canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
context.beginPath();
context.strokeStyle = "#FF0000";
context.lineWidth = 1;
//   context.moveTo(49, 49);
context.arc(19, 19, 15, 0, 1 * Math.PI);
context.moveTo(49, 49);
context.arc(49, 49, 15, 0, 1 * Math.PI);

context.stroke();

Answer 1

You need to close the path each time:

http://jsfiddle.net/8EDHb/1/

context.beginPath();
context.arc(19, 19, 15, 0, 1 * Math.PI);
context.stroke();
context.closePath();
context.moveTo(49, 49);
context.beginPath();
context.arc(49, 49, 15, 0, 1 * Math.PI);
context.stroke();
context.closePath();

Answer 2

If you want a complete circle you should use 2 * Math.PI . You can make javascript calculate the starting position, for a circle with center (cx,cy) and radius r .

Use context.arc(cx + r,cy) and so on If you have definite values, Eg. Centre at 100,100 and radius 50 use

context.arc(150,100,...)