Question

I have a path containing two arcs, the first arc is created and when the second one is created they are automatically connected/joined given that they are contained within the same path, but they are only joined at one end, at the other there is nothing, how do I tell it to join at the other end as well?

Working example can be found here (though it actually contains 4 arcs, but 2 for each path): http://jsfiddle.net/QjLT2/

var ctx = document.getElementById("display").getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 20, Math.PI/2, 0.0, true);
ctx.arc(100, 100, 50, 0.2, Math.PI/2, false);
//ctx.lineTo(100, 100+17);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.arc(200, 200, 20, Math.PI/1.5, 0.0, true);
ctx.arc(200, 200, 50, 0.0, Math.PI/1.5, false);
//ctx.lineTo(200, 200+17);

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
​

Answer 1

See here: http://jsfiddle.net/QjLT2/6/

1) You don’t need to set strokeStyle or lineWidth more than once, unless you are actually changing the values. Doing so actually reduces performance as the context has a concept of “state” that it tracks.

2) You need to call closePath before calling stroke if you want the completed path to be stroked.

var ctx = document.getElementById("display").getContext('2d');

ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;

ctx.beginPath();
ctx.arc(100, 100, 20, Math.PI/2, 0.0, true);
ctx.arc(100, 100, 50, 0.0, Math.PI/2, false);
ctx.closePath();

ctx.stroke();

ctx.beginPath();
ctx.arc(200, 200, 20, Math.PI/1.5, 0.0, true);
ctx.arc(200, 200, 50, 0.0, Math.PI/1.5, false);
ctx.closePath();

ctx.stroke();​