如何正确地逐步删除一行？ （即动画）

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/

逐步删除此行的好方法是什么？请记住，我的画布上还有其他东西。谢谢你的帮助！