html5 - How do I save the location of draggable shapes in canvas? -

I am using canvas to make shapes. These shapes are draggable How can the location of the shapes be saved, when I come back to the page, the shapes are taken to the same place, I pulled it out?

local storage

Using Web Storage (LocalStorage / SessionStorage) is the easiest The solution is

To create this work, you can use a chain object in size information, for example:

  var myShapeStack = []; // All objects here work myShape (x, y, width, height) {this.type = 'rectangle'; This.x = x; this. Y = y; This.width = width; This.height = Height; // ... back it; } // // Get the quotes from the drawing, then var size 1 = new size 1 (X, Y, W, H); MyShapeStack.push (shape1);   
 You can now store the entire stack using web storage:    ;   
 The next time you load and init:  
  myShapeStack = localStorage.getItem ('size'); myShapeStack = (myShapeStack! == faucet) ? JSON.parse (MyShapeStack): [];   
 If you want to remove it later:  
  localStorage.removeItem ('size');   
 or Brute-Force Everything:  
  localStorage.clear ();   
 If the browser supports Canvas Probably possibly with web storage as well.