在画布上分层

Question

I currently working on prototype which display some data as vague-meter: back-ground gray arc show start to end limit, the blue arc show the current value. I adding line-stroke at start and end of back-ground gray arc.

For drawing this I am using html canvas.

var ctx ;

var currVague=document.getElementById("currVague");

ctx = currVague.getContext("2d");
ctx.beginPath();
ctx.arc(122,122,99,0.81*Math.PI,0.19*Math.PI);
ctx.strokeStyle="#555";
ctx.lineWidth=16;
ctx.stroke();

ctx.beginPath();
ctx.arc(122,122,99,0.81*Math.PI,0.12*Math.PI);
ctx.strokeStyle="#3872C1";
ctx.lineWidth=16;
ctx.stroke();

ctx.strokeStyle="#949494";
ctx.moveTo(25,175);
ctx.lineTo(50,175);
ctx.lineWidth=5;
ctx.stroke();

This first time I am trying canvas, and not sure why the gray curve showing in foreground.

Answer 1

Just add a beginPath() in the last section where you draw the line:

ctx.strokeStyle="#949494";
ctx.beginPath();     /// here needs to be a beginPath()
ctx.moveTo(25,175);
ctx.lineTo(50,175);
ctx.lineWidth=5;
ctx.stroke();

If you don't what happens is that the previous arc is still a part of the path and when you stroke it that arc and your newly added line will both be stroked. To "break" the path so-to-speak just call beginPath() and only what is added afterwards will be stroked (or filled) next time.