在平移画布时，为什么在画布的边界处绘制的形状会拖动？

Question

我目前正在尝试自己制作一个更简单的agar.io游戏版本。 agar.io的画布将根据圈子（玩家自己）的位置进行翻译。但是，当我平移画布时，画布边框处的圆圈将被拖动（画一条线）到画布上。我该如何解决？

const ctx = canvas.getContext('2d')
canvas.height = window.innerHeight
canvas.width = window.innerWidth
const mouse = {
    x : canvas.width/2,
    y : canvas.height/2
}

class Bubble{
    constructor(x,y,r){
        this.x = x
        this.y = y
        this.radius = r
        //this.last_mouse = { x : x , y : y}
    }
    draw(ctx){
        ctx.save()
        ctx.beginPath()
        ctx.arc(this.x,this.y,this.radius,0, 2*Math.PI,false)
        ctx.fillStyle = ("#FF9933")
        ctx.fill()
        ctx.closePath()
        ctx.restore()
    }
    update(ctx,velocity,width,height){
        this.x += (velocity.x)
        this.y += (velocity.y)
    }
}
addEventListener('mousemove', event => {
    mouse.x = event.clientX
    mouse.y = event.clientY
    velocity.x = (mouse.x - canvas.width/2)*0.01 //- canvas.width/2)
    velocity.y = (mouse.y - canvas.height/2)*0.01 //- canvas.height/2)
})

function randomIntFromRange(min,max){
    return Math.floor(Math.random()*(max-min-1) + min);
}
/////////////////////////////////////ANIMATION PART///////////////////////////////////
var blob
var players_blob
var velocity = {
    x : 0,
    y : 0
}
function init(){
    players_blob = []
    blob = new Bubble(canvas.width/2, canvas.height/2, 30)
    for (var i = 0; i < 30; i++){
        var x = randomIntFromRange(0, canvas.width)
        var y = randomIntFromRange(0, canvas.height)
        players_blob[i] = new Bubble(x,y, 10)
    }
}
function animation(){
    requestAnimationFrame(animation)
    ctx.clearRect(0,0,canvas.width, canvas.height)
    ctx.translate(-velocity.x, - velocity.y)
    blob.draw(ctx)
    blob.update(ctx,velocity,canvas.width, canvas.height)
    for (var i in players_blob){
        players_blob[i].draw(ctx)
    }
}
init()
animation()```