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..

 function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0, 0, WIDTH, HEIGHT);
// redraw each rect in the rects[] array
for (var i = 0; i < rects.length; i++) {
    var r = rects[i];
    ctx.fillStyle = r.fill;
    rect(r.x, r.y, r.width, r.height);
    pos[i]= ctx.save();
}
}

I'm calling the value of 1st array element on button click to make sure that the context values are being stored properly..

function position(){
alert("pos[0]");
}

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....

The js fiddle of the above code is

/

Please Help..

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..

 function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0, 0, WIDTH, HEIGHT);
// redraw each rect in the rects[] array
for (var i = 0; i < rects.length; i++) {
    var r = rects[i];
    ctx.fillStyle = r.fill;
    rect(r.x, r.y, r.width, r.height);
    pos[i]= ctx.save();
}
}

I'm calling the value of 1st array element on button click to make sure that the context values are being stored properly..

function position(){
alert("pos[0]");
}

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....

The js fiddle of the above code is

http://jsfiddle/qm9Eb/4/

Please Help..

• javascript
• html
• canvas
• coordinates

Share Follow edited Jul 28, 2014 at 9:48 Lucy asked Jul 28, 2014 at 7:11 LucyLucy 1,8521616 gold badges5757 silver badges9797 bronze badges 1

• I'm not experienced with canvas, so please take my advice with that in mind. I'm looking through examples of the save() method, and I do not see any examples of a variable being set equal to a state save. Is it possible to alert the state of the canvas? Perhaps you have to alert something more specific. – user3735633 Commented Jul 28, 2014 at 7:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The better way to do this is to create a new object for each rectangle. This way you can store each object with its own properties in an array and redraw it in each cycle of your drawloop. You can access all the variables on this object whenever you wish and use it in a much more flexible way.

So I would use something like this:

function Rectangle(props){
  var posX = this.posX = props.x;
  var posY = this.posY = props.y;

  this.width = props.width;
  this.height = props.height;
  this.fill = props.fill;

  this.draw = function(){
    ctx.fillStyle = this.fill;
    ctx.fillRect(this.posX, this.posY, this.width, this.height);
  }
}

The use of this is demonstrated in this JSFiddle http://jsfiddle/hgh2S/

I have left off the drag events and all to make the usecase a bit more clear. You could easily implement it yourself based on this example.

Also, note the way I have hooked the button to a listener instead of directly calling JS from your HTML element. This is a much safer way to do this.

You should take a look at this question.

The save method pushes the actual state of the context to an array, but it's an array defined and used only by canvas. You can use the method restore() later in order to load again the state.

This is a good article about this topic and it will expain it better than me.