在HTML Canvas中渲染文本时如何停止晃动

Question

我有多个圆圈对象，每个圆圈对象内部都有一些文本。动画不流畅。我从字面上可以看到文字在圆圈内摇晃。如果我删除文本，圆圈将移动并彼此平滑反弹。这是代码，请告诉我是否有明显的改进/原因。

Circle.prototype.draw = function() {
  this.context.beginPath();
  this.context.arc(this.x,this.y,this.radius,0,Math.PI*2);

  this.context.fillStyle = this.color;
  this.context.fill();

  this.context.strokeStyle = this.color;
  this.context.fillStyle = 'white';
  this.context.font = "14px serif";
  this.context.textAlign = 'center';
  this.context.fillText(this.symbol,this.x,this.y+9);

  this.context.stroke();
};
Circle.prototype.update = function( allCircles,userText ) {
  this.handleBorderCollision();

  for (var i = 0; i < allCircles.length; i++) {
    if (allCircles[i] === this) continue;
    if (distance(this.x,this.y,allCircles[i].x,allCircles[i].y) - this.radius * 2 < 0) {
      resolveCollision(this,allCircles[i]);
    }
  }
  this.x += this.velocity.x;
  this.y += this.velocity.y;
  if (this.checkMatch(userText)){
    this.explode();
  };
  this.draw();
};


function animate () {
  requestAnimationFrame(animate);
  c.clearRect(0,0,innerWidth,innerHeight);
  for (var i = 0; i < circles.length; i++) {
    circles[i].update(circles,userText.join(''));
  }
};
animate();