How to draw circle or rectangle on leaflet.js tile images

I know that when using leaflet.js it is possible to draw circle or rectangle in pictures. here is one link http://jsfiddle.net/tridip/p6ssbvqj/

The sheet has a function called circle() polygon() etc

my interface is like i have 4 buttons one of which is circle, rectangle, loading image, saving image.

when the page is loaded the first time then i will show the image with leaflet.js and when the user clicks on the circle or rectangle button i have to allow the user to draw the circle or rectangle on the image. the question which jquery or any javascript library i should use which will allow to draw a circle or rectangle on image ?

next I need to store these coordinates of the circle or rectangle on the client side because later I was able to store this information in the db.

Third, when I load images again, I need to show the drawn circle or rectangle in the same image and in the same place where the user drew.

please help me how to achieve this. I've never done this before, so I have no idea. please, help. thank

EDIT 1

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

      

        
        
        
      

    

1) What's the point L.FeatureGroup()

? What does it do L.FeatureGroup()

?

2) What does the code below do?

var drawControl = new L.Control.Draw({
    draw: {
        position: 'topleft',
        polygon: {
            allowIntersection: false,
            drawError: {
                color: '#b00b00',
                timeout: 1000
            },
            shapeOptions: {
                color: '#bada55'
            },
            showArea: true
        },
        polyline: {
            metric: false
        },
        circle: {
            shapeOptions: {
                color: '#662d91'
            }
        }
    },
    edit: {
        featureGroup: drawnItems
    }
});

map.addControl(drawControl);

      

        
        
        
      

    

which is what the above code does. it seems like the above code is trying to programmatically map control to the map. maybe I'm wrong. because if the above line is about programmatically controlling drawing on a map, then there should be a coordinate or something relavent there, but I have not found anything in the above code. so please tell me what the above code does?

3) if I need to draw any shape on the map, then I need to add any layer on the map first, because like in your code, you first add the layer along that line map.addLayer(drawnItems);

4) the code below is transparent

if (type === 'marker') {
   coords = JSON.stringify(layer._latlng);
}

      

        
        
        
      

    

the above code stores lat and lang as coordinate in a variable, but you missed displaying another set of code where I will provide lat and lang as coordinate, then the code will draw the same shape at the correct position as the lat and lang value.

please read my all 4 points and please write an answer to banish my confusion. specifically for code 1 and 2 the code is not clear to me and then give me the code where I pass the form name and latlang and then the api booklet will take the form accordingly.

thank