HTML Canvas draws an arc between two points

Question

I found similar questions there, but no answer. I sketched such a circle

ctx.strokeStyle='rgb(0,0,0)'; ctx.lineWidth=10; ctx.beginPath(); ctx.arc(100,100,45,0,Math.PI*2,true); ctx.closePath(); ctx.stroke(); 

which gives a circle located at (100,100) with a radius of 45, plus 5 for the line width, making it a circle of radius 50. Now I want to sketch the same circle, but a different color and only 1/4 of the original round (think that the XBOX 360 - red ring of death). So i tried this

 ctx.strokeStyle='rgb(0,250,0)'; ctx.lineWidth=10; ctx.beginPath(); ctx.arc(100,100,45,0,Math.PI/2,true); //use 1/4 of original angle ctx.closePath(); ctx.stroke(); 

But this has a really annoying aspect of connecting the first and last points (sometimes I wonder who created the canvas element, for example, when attaching text, but don't make me start with this ...)

Answer 1

I commented on the line you do not want. By calling closePath() , you close the path of your arc.

Example

Javascript

 ctx.strokeStyle='rgb(0,250,0)'; ctx.lineWidth=10; ctx.beginPath(); ctx.arc(100,100,45,0,Math.PI/2,true); //use 1/4 of original angle //ctx.closePath(); ctx.stroke(); 

jsFiddle .