Как исправить проблему редактирования параметров в функции в requestAnimationFrame ()

Question

Я экспериментировал с HTML Canvas последние 2 недели и пытаюсь создать функции для создания многоугольников, скажем,

//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 {}, prototype и некоторые другие.Это все еще не будет работать.Единственный способ - отредактировать свойства с помощью аргументов (т.е. напрямую изменить аргумент «center», чтобы свойство square.position следовало).Кто-нибудь может это исправить?