javascript - 行を段階的に適切に消去する方法は? (つまり、アニメーション)

Question

次のようなアニメーションの方法で線を描画する JavaScript があります。

function drawLeftLine() {
  var yoffset = 500;
  var startX = 0;
  var startY = yoffset;
  var endX = canvas.width;
  var endY = yoffset;
  var amount = 0;
  setInterval(function() {
      amount += 0.03; // change to alter duration
      if (amount > 1) amount = 1;
      //c.clearRect(1, 1, canvas.width, canvas.height);
      context.lineWidth = 1;
      c.beginPath();
      c.strokeStyle = "black";
      c.moveTo(startX, startY);
      // lerp : a  + (b - a) * f
      c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
      c.stroke();
      c.closePath();
  }, 30);
}

その行をアニメーションで消去したい (つまり、消去されているように見えるはずです)。同じコードを使用してその上に白い線を描き、ストロークの色を白に変更して、これを試しました。その結果、「灰色」の線が表示されます。その上にかなり幅の広い白い線を引いても、透けて見えることがあります。フルスクリーンで表示する必要があります。

http://jsfiddle.net/3D9jt/5/embedded/result/

完全なコードは次のとおりです。http://fiddle.jshell.net/3D9jt/5/

この行を段階的に消去する良い方法は何ですか? 私のキャンバスには他にもあることに注意してください。助けてくれてありがとう！