从HTML5 Canvas

Question

我试图解决我的HTML5 Canvas动画中出现的奇怪神器。我试图用相互跟随的线环绕文本。当我清除第三行时，仍然有一条线，好像clearRect()没有正常工作。
我已经使用Google搜索，我的绘图功能确实分别使用beginPath()和closePath()，所以当这件事情不清楚时，你可以想象我的挫败感。

我希望有人可以帮我看看这个动画我出错的地方。

这是绘图代码的一个例子（因为如果我链接到JSFiddle，堆栈溢出迫使我将代码放在这里）

function drawArc(xPos, yPos,
  radius,
  startAngle, endAngle,
  anticlockwise,
  lineColor, fillColor) {
  var startAngle = startAngle * (Math.PI / 180);
  var endAngle = endAngle * (Math.PI / 180);

  var radius = radius;

  context.strokeStyle = lineColor;
  context.fillStyle = fillColor;
  context.lineWidth = 1;

  context.beginPath();
  context.arc(xPos, yPos,
    radius,
    startAngle, endAngle,
    anticlockwise);
  context.fill();
  context.closePath();
}

function drawLine(xStartPos, yStartPos, xEndPos, yEndPos, width, color) {
  context.stokeStyle = color;
  context.lineWidth = width;

  context.beginPath();
  context.moveTo(xStartPos, yStartPos);
  context.lineTo(xEndPos, yEndPos);
  context.stroke();
  context.closePath();
}

JSFiddle：https://jsfiddle.net/xtkbnxx5/9/

使用此版本，看起来动画停在错误的位置。但是，如果您在javascript中注释掉第126行并再次运行它，您会看到该行就在那里并且永远不会被清除...

非常感谢任何帮助。