为什么setInterval只显示我的一个画布动画？

Question

我是使用画布的新手，我无法运行两个弹跳球动画。我正在使用setInterval并将我的代码设置为类似于人们说最好的方式：

function bCircle() {
    c.beginPath();
    c.arc(bx, by, bRadius, 0, Math.PI * 2, false);
    c.strokeStyle = "cornflowerblue";
    c.stroke();
    c.fillStyle = "cornflowerblue";
    c.fill();
    c.closePath();

}

function rCircle() {
    c.beginPath();
    c.arc(rx, ry, rRadius, 0, Math.Pi * 2, false);
    c.strokeStyle = "red";
    c.stroke();
    c.fillStyle = "red";
    c.fill();
    c.closePath();

}

function draw() {
    c.clearRect(0, 0, innerWidth, innerHeight);
    bCircle();
    rCircle();

    //bCircle Conditional
    if (bx + bRadius > innerWidth || bx - bRadius < 0) {
        bbdx = -bbdx;
    }
    //Conditional to mall the ball bounce up and down
    if (by + bRadius > innerHeight || by - bRadius < 0) {
        bbdy = -bbdy;
    }
    //Add 1 to x continously for it to move
    bx += bbdx;
    //Add 1 constantly to y for it to move up and down also
    by += bbdy;

    //rCircle Conditional
    if (rx + rRadius > innerWidth || rx - rRadius < 0) {
        rrdx = -rrdx;
    }
    if (ry + rRadius > innerHeight || ry - rRadius < 0) {
        rrdy = -rrdy;
    }
    rx += rrdx;
    ry += rrdy;
}



setInterval(function() {
    draw();
}, 8);

问题在于，无论我尝试什么方法，只有蓝球会运行。此外，如果我尝试自己运行红球功能，则不会显示任何内容。我不知道问题是什么，因为除了样式和填充之外，函数是相同的。控制台上没有出现任何错误。任何人都可以发现它是什么我错过了吗？