Javascript 将在画布上绘制的两个函数层叠在一起

我有两个javascript函数，它们在画布上绘制。我想知道是否有一种方法可以把它们叠在一起，这样它们就可以在同一个地方的画布上画画了。 如果有帮助，两个功能是：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var RectCount = 0;
ctx.strokeStyle = "white";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, c.width, c.height);
setInterval(function () {
    //fills in canvas
}, 1000);

及

---

对于代码中的任何错误，我深表歉意，它已被详细解释。

您想更改画布背景并绘制圆圈，对吗？您知道如何将画布背景更改为函数吗？

function draw1(x1, y1) {
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(x1, y1, 25, 25, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
ctx.stroke();

window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / fps);
            };
}());
function animate() {
    setTimeout(function () {
        caf = window.requestAnimFrame(animate);
        ctx.beginPath();
        angle += Math.acos(1 - Math.pow(dd / radius, 2) / 2);
        var newX = cx + radius * Math.cos(angle),
            newY = cy + radius * Math.sin(angle),
        draw1(newX1, newY1);
        ctx.arc(cx, cy, radius2, 0, 2 * Math.PI);
        ctx.closePath();
    }, 1000 / fps);
}
animate();