无法使clearRect与旋转和弧一起使用

Question

我正在尝试使用HTML5 Canvas在弯曲路径上为小点设置动画。动画我工作但我无法使clearRect工作，所以每个帧只是堆叠在下一个上面。

这是绘图代码，can2和ctx2是在页面的.ready函数中设置的全局变量。

function drawTempStep(){
    //Clear the Canvas
    ctx2.clearRect(0, 0, can2.width, can2.height);
    ctx2.save();
    //Check we're centered
    ctx2.moveTo(0, 0);
    //Rotate Canvas so we are drawing strait
    ctx2.rotate(getRadians(canvasRotation));
    //Begin new Path
    //Create reflection for the dot
    //First create gradiated fill style
    var grd = ctx2.createRadialGradient(0, weatherDivSize.width / 2 * .70, 0, 0, weatherDivSize.width / 2 * .70, weatherDivSize.width*.2);
    grd.addColorStop(0, "rgba(176,0,0,0.2)");
    grd.addColorStop(1, "rgba(0,0,0,0)");
    //Now beging the path
    ctx2.beginPath();
    //Draw the Arc
    ctx2.arc(0, weatherDivSize.width / 2 * .70, weatherDivSize.width*.2, 0, 2 * Math.PI, false);
    ctx2.closePath();
    //Fille and stroke it
    ctx2.fillStyle = grd;
    ctx2.fill();
    ctx.stroke();
    //Now lets draw the smaller inner circle
    ctx2.beginPath();
    ctx2.arc(0, weatherDivSize.width / 2 * .70, weatherDivSize.width*.009, 0, 2 * Math.PI, false);
    ctx2.closePath();
    ctx2.fillStyle = '#B00000';
    ctx2.fill();
    ctx.stroke();
    //Return the canvas rotation to it's starting point
    ctx2.rotate(-getRadians(canvasRotation));
    //All done so restore the context to it's previous state
    ctx2.restore();
}

以下是CodePen上完整项目的链接，以便您了解正在发生的事情。

CodePen Link

由于

加雷