How to adjust coordinates of an image map when the image is resized?

Question

In one of my admin pages i have divs as follows:

<div class="row">
    <div class="col-lg-12">
        <a href="#" id="btnCreateSelector">Mark Image area</a>
    </div>
    <div class="col-lg-12">
        <div id="canvas" style="position:relative;width:800px;">
            <img src="img/1324_2041.jpg" style="width:100%;height:auto;" class="img-responsive" />
        </div>
    </div>
</div>

Now 'btnCreateSelector' when clicked, creates a stretchable overlay div which is basically used to select areas on the image which later on used as image hotspots. This overlay div also contains save button to save capture and save the coordinates of the selected area.

$('#btnCreateSelector').click(function() {
    var guid = $.fn.genUID();

    var string = '<div id="' + guid + '" data-id="'+ guid +'" class="area area-unsaved" style="box-sizing: content-box;top: 0; left: 0; width: 140px; height: 140px;">';

    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnSave btn btn-info btn-xs" title="Save"><span class=" glyphicon glyphicon-floppy-save"></span></a> ';
    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnEdit btn btn-warning btn-xs" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a> ';
    string += '<a href="#" id="' + guid + '" data-id="'+ guid +'" class="btnDelete btn btn-danger btn-xs" title="Delete"><span class="glyphicon glyphicon-remove"></span></a>  ';
    string += "</div>";
    $("#canvas").append(string);
    $(".area").resizable({
        handles: "n, e, s, w, nw, ne, sw, se",
        minHeight: 1,
        minWidth: 1,
    }).draggable();
});

$(document).on("click", ".btnSave", function (e) {
    e.preventDefault();
    var id = $(this).attr("data-id");
    curr_div_id = id;

    var t = parseFloat($("#" + id).css("top"));
    var l = parseFloat($("#" + id).css("left"));
    var w = parseFloat($("#" + id).css("width"));
    var h = parseFloat($("#" + id).css("height"));

    $.ajax({
        url:"<?=site_url();?>pm/maparea/add/",
        type:"POST",
        data: {m_top: t, m_left: l, m_width: w, m_height: h},
        success: function (response) {
            if(response == '1')
            {
                alert('success');
            }
        },
        error: function(response) {
            alert(response);
        }
    });
});

In one the page accessible to the general public, i am displaying the above image(1324_2041.jpg) with image hotspots on it.

<div id="vas">
    <img src="<?=site_url();?>assets/admin/uploads/pages_img/1324_2041.jpg" usemap="#article_map"  class="img-fluid" />
    <map name="article_map">
        <area shape="rect" coords="137.025,327.20625,581.175,556.36875" href="#" alt="Sun">
    </map>
</div>

Now, from here on my problem starts.The coordinates obtained from the database does not overlap with the intended image parts.They are off on desktop view or tablet view or mobile.Please advise where am I going wrong.Am I capturing the coordinates correctly? How to capture or adjust coordinates when the image is resized?.