javascript - キャンバスの一部をクリアするには?

Question

これが例です！

drawValueArc()変更ボタンをクリックするたびに緑の弧が削除され、再描画されるように、内部の緑の弧をリセットしようとしています。キャンバス全体を削除せずに削除するにはどうすればよいですか? また、余談ですが、Math.random() * 405 * Math.PI / 180実際には常に灰色の弧の内側に収まる弧になるとは限らず、灰色の弧よりも大きい場合があることに気付きました。これはなぜですか?

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

var cx = 150;
var cy = 150;
var startRadians = 135 * Math.PI / 180;
var endRadians = 405 * Math.PI / 180;

//main arc
ctx.beginPath();
ctx.arc(cx, cy, 58, startRadians, endRadians, false);
ctx.strokeStyle="rgb(220,220,220)";
ctx.lineWidth = 38;
ctx.stroke();

$('#setRandomValue').click(function(){
  drawValueArc(Math.random() * 405 * Math.PI / 180);
});


function drawValueArc(val){
  //ctx.clearRect(0, 0, W, H);
  ctx.beginPath();
  ctx.arc(cx, cy, 58, startRadians, val, false);
  ctx.strokeStyle = "green";
  ctx.lineWidth = 38;
  ctx.stroke();
}