Map Creator based on CANVAS - upgrade

I need a location creator consisting of different imgs Functionalities : - objects can be drag and dropped within canvas ( adding ) and outside of it (removing ) - objects must snap lines and snap points - it must include collision detection ( for objects ) - triming the map ( the remaining space to be removed ) - untrim the map to the original dimentions whidth and height - When the map loades, it is grouped by default in 3 parts (front , middle , back) front, middle and back act as layers with canvas. So objects will be dropped inside layers, and these layers are inside the canvas. -Side bar : must be out of canvas. on this side bar will be all the elements which can be dragged and dropped into thoese canvas layers. - SAVE : serializate the canvas as json in the form of : { "front": [ [{ "price": 70, "type": "seat", "icon": "[login to view URL]", "coords": {"y": 0, "x": 5} }, { "price": 70, "type": "seat", "icon": "[login to view URL]", "coords": {"y": 0, "x": 10} }] ], "middle": [ [{ "type": "[login to view URL]", "coords": {"y": 15, "x": 5} }, { "price": 70, "type": "seat", "icon": "[login to view URL]", "coords": {"y": 20, "x": 15} }] ], "back": [ [{ "price": 50, "type": "seat", "icon": "[login to view URL]", "coords": {"y": 25, "x": 20} }, { "type": "playground_kids", "icon": "[login to view URL]", "coords": {"y": 50, "x": 50} }] ] }