title: How to fix parameter editing problem in function in requestAnimationFrame()
body: <p>I have been experimenting with the HTML Canvas for the last 2 weeks, and I am trying to make functions to make polygons, say,</p>
  
  <pre><code>//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);
  }
  </code></pre>
  
  <p>in the function</p>
  
  <pre><code>var square;
  function draw() {
      //arguments are examples
      square = new SquareGeometry(ctx, {x: 100, y: 100}, 20); 
      requestAnimationFrame(draw);
  }
  draw();
  </code></pre>
  
  <p>Now the problem is the edit: when I want it to move to a different place (e.g. square.position.x = 50), it will still be the center (i.e. position.x is still 100). The problem is that the properties of the function still become the arguments placed!</p>
  
  <p>I've tried using if(){}else{} functions, prototype, and some others. It still won't work. The only way is to edit the properties through the arguments (i.e. directly changing the "center" argument so the square.position property will follow). Can anyone fix this?</p>