使用setInterval时，在动画期间clearRect（）似乎不起作用

Question

我正在尝试使红色部分的圆圈围绕黑色圆圈旋转，但是当它们开始旋转时，它们似乎并没有清除，它只是在黑色的圆圈周围绘制了一个红色圆圈。有什么办法可以解决这个问题？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var Spin = 0;
var spinred = window.setInterval(MiddleCircles, 10);

function MiddleCircles(){

    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.beginPath();
    ctx.arc(325, 325, 51, Spin, Spin+0.5*Math.PI);
    ctx.strokeStyle = "#FF0000";
    ctx.lineWidth = "10";
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(325, 325, 51, Spin + 1*Math.PI, Spin + 1.5*Math.PI);
    ctx.strokeStyle = "#FF0000";
    ctx.lineWidth = "10";
    ctx.stroke();

    Spin += 0.01;
    ctx.beginPath();
    ctx.arc(325, 325, 50, 0, 360);
    ctx.fillStyle = "black";
    ctx.fill();
    ctx.stroke();
    console.log();
 }

<canvas id="myCanvas" width=400 height=400></canvas>