Javascript 如何使用对象在画布上绘制，如何在不绘制的情况下移动对象？

我有一个蓝色的圆圈，它绕着红色的圆圈旋转，只要按下按钮，它就会在画布上不断地朝一个方向移动

现在我想画一个红色的圆圈，当按下按钮时，圆圈移动（轨迹）。 问题：

当我试图不使用clearRect（0,0，canvas.width，canvas.height）在画布上绘制时；蓝色圆圈也开始在画布上画画，同时移动我不需要的东西。 在同一张画布上，可以用一个圆圈画画，也可以不用另一个圆圈画画吗

const canvas=document.getElementById（'canvas1'）；
const ctx=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
设位置x=100；
设y=100；
设X=50；
设Y=50；
设角度=0；
让mouseButtonDown=false；
document.addEventListener（'mousedown'，（）=>mouseButtonDown=true）；
document.addEventListener（'mouseup'，（）=>mouseButtonDown=false）；
函数圆（）{
ctx.fillStyle='红色'；
ctx.beginPath（）；
弧（X，Y，20，0，数学π*2）；
ctx.closePath（）；
ctx.fill（）；
}
函数方向（）{
ctx.fillStyle='蓝色'；
ctx.beginPath（）；
ctx.弧（位置X+X，位置Y+Y，10,0，数学PI*2）；
ctx.closePath（）；
位置X=35*数学正弦（角度）；
位置Y=35*数学cos（角度）；
ctx.fill（）；
}
函数animate（）{
如果（鼠标按钮）{
X+=位置X/10；
Y+=位置Y/10；
}否则{
角度+=0.1；
}
ctx.clearRect（0,0，canvas.width，canvas.height）；
圆圈（）；
方向（）；
请求动画帧（动画）；
}
制作动画（）
#游说1{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
您所需要做的就是调用clearRect，告知蓝色圆圈的位置和尺寸

ctx.clearRect（blueCircle.x，blueCircle.y，blueCircle.diameter，blueCircle.diameter）；

或者，如果您在其局部参照系中平移圆：

ctx.clearRect（blueCircle.x-blueCircle.radius，blueCircle.y-blueCircle.radius，blueCircle.diameter，blueCircle.diameter）；