title: JavaScript: .push() replaces all the stored values with the values of last object pushed
body: <p>i'm quite new to JavaScript.. i'm basically writing this different shapes drawing (on canvas) program in which when user can draw shapes on canvas after clicking the desired shape button... code of that looks like this:</p>
  
  <pre><code>var rectangle = document.getElementById('rec');
  rectangle.addEventListener('click', function (e) {
      x2 =  y2 = 0;
      globalOption = 'rec';
      var rec = new shape();
      e.preventDefault();
  }, false)
  </code></pre>
  
  <p>after that in the init function.. on mousedown event:</p>
  
  <pre><code>else if(globalOption == 'rec')
      {           
          e.target.style.cursor = 'crosshair';
          rec.name = 'rec';
          started = 'true';
          x2 = y2 = 0;
          x = e.pageX - canvas.offsetLeft;
          y = e.pageY - canvas.offsetTop;
          rec.x = x;
          rec.y = y;
          //context.beginPath();
      }
  </code></pre>
  
  <p>i'm storing all the information about this shape in the shape object i created earlier in addEventListener code "var rec = new shape();". I'm pushing this object in an array on mouse up event. Now the problem is that, it stores only the information of last pushed object.. even though array length is correct.. but all the objects it contains have one same information of the last object pushed! Why's that?? i tried placing "var rec = new shape();" line on different places but no use!</p>