如何解决requestAnimationFrame（）函数中的参数编辑问题

Question

在过去的两周里，我一直在尝试使用HTML Canvas，我正在尝试制作一些函数来制作多边形，例如，

//center is {x: n, y: n}
function SquareGeometry(ctx, center, distance, stroke, fill) {
    this.ctx = ctx;
    this.position = center || {x: 100, y: 100};
    this.distance = distance || 10;
    var c = this.position; var d = this.distance;
    this.vertices = [
        c.x-d, c.y-d, //top left
        c.x+d, c.y-d, //top right
        c.x+d, c.y+d, //bottom right
        c.x-d, c.y+d, //bottom left
        c.x-d, c.y-d  //top left again
    ];
    //drawVertices is already given with the four arguments (ctx, vertices,  
    //stroke, fill)
    drawVertices(this.ctx, this.vertices, stroke, fill);
}

在功能中

var square;
function draw() {
    //arguments are examples
    square = new SquareGeometry(ctx, {x: 100, y: 100}, 20); 
    requestAnimationFrame(draw);
}
draw();

现在的问题是编辑：当我希望它移动到另一个位置（例如，square.position.x = 50）时，它仍将是中心位置（即position.x仍为100）。问题在于该函数的属性仍然成为放置的参数！

我尝试使用if（）{} else {}函数，原型和其他一些功能。它仍然无法正常工作。唯一的方法是通过参数编辑属性（即直接更改“ center”参数，以便随后跟随square.position属性）。谁能解决这个问题？