title: Find position of objects drawn in HTML5 canvas
body: <p>I'm making an HTML5 project in which the user can drag and drop multiple items inside a canvas..I want to record the position of these objects on page load and also after moving them around in the canvas.For this I'm saving all this in an array using the save() method of canvas inside the draw function to store all the context details as the draw function is called even while drawing objects in the new location..</p>
  
  <pre><code> function draw() {
  clear();
  ctx.fillStyle = "#FAF7F8";
  rect(0, 0, WIDTH, HEIGHT);
  // redraw each rect in the rects[] array
  for (var i = 0; i &lt; rects.length; i++) {
      var r = rects[i];
      ctx.fillStyle = r.fill;
      rect(r.x, r.y, r.width, r.height);
      pos[i]= ctx.save();
  }
  }
  </code></pre>
  
  <p>I'm calling the value of 1st array element on button click to make sure that the context values are being stored properly..</p>
  
  <pre><code>function position(){
  alert("pos[0]");
  }
  </code></pre>
  
  <p>When i run this code, on button click i'm getting the output as undefined in the alert box like shown in the image below.<img src="https://i.stack.imgur.com/Sx6Sn.png" alt="undefined">...</p>
  
  <p>The js fiddle of the above code is </p>
  
  <p><a href="http://jsfiddle.net/qm9Eb/4/" rel="nofollow noreferrer">http://jsfiddle.net/qm9Eb/4/</a></p>
  
  <p>Please Help..</p>