jquery - drawing rectangles on an image in javascript -

I am trying to write a simple JavaScript program to mark the rectangle on an image. When you click on a button to add a rectangle, you click the upper left and lower right corner and the program should rectangle in red. I am using jquery directly with jquery.

Everything works almost exclusively, except that when the upper left or lower right corner of a rectangle is in that case inside another rectangle, while the click event is processed, the x and y are wrong Are there.

I'm trying to troubleshoot it for hours and Google did not help. Specifically I tried:

• Changing e.pageX for e.spaperX and e.screenY
• Use full position (up and left) instead of offset

  It is clear that I am missing something that is not allowing me to correct it, but I do not know at all.

  I still have a JS Code if you do not want to click on it:

    var rects = [{x1: 708, y1: 246] , X2: 738, y2: 277}, {X1: 442, y1: 23 9, x2: 474, y2: 271}, {x1: 676, y1: 242, x 2: 703, y2: 270}]; Var $ Container = $ ("# Container"); Var click_count = 0; Var added_rects = 0; Var waiting_for_clicks = false; Var new_rects = []; Var current_rect = {}; Var add_rect = function (color, rect) {$ ('' div class = "child" /> ') .appendTo ($ container). Css ("left", rect.x1 + "px") .css "top", rect.y1 + "px"). CSS ("width", (rect.x2-rect.x1) + "px"). Css ("height", (rect.y2-rect.y1) + "px"). CSS ("border", "1px solid" + color); }; Var remove_last_rect = function () {if (new_rects.length & gt; 0) {$ container.children ('div: last-child') Remove (); New_rects.pop (); }} _.map (rites, _partial (ad_state, 'red')); Var listen_for_rect = function () {click_count = 0; Waiting_for_clicks = True; Current_rect = {x1: -1, y1: -1, x2: -1, y2: -1}; $ ('# Add-rect'). Attr ('disabled', 'disabled'); $ ('# Remove-rect') Et ('disabled', 'disabled'); }; Var stop_listening_for_rects = function () {waiting_for_clicks = false; $ ("#Add-Rect") removeAttr ('disabled'). $ ('# Remove-Rect') removeAttr ('Disabled'). Add_rect ('red', current_rect); New_rects.push (current_rect); } $ ('# Add-rect'). Click (function (e) {e.preventDefault (); listen_for_rect ();}); Click $ ('# remove-rect') (function (e) {remove_last_rect (); if (new_rects.length == 0) $ (this) .attr ('disabled', 'disabled');}); Var click_event = function (e) {e.preventDefault (); If (waiting_for_clicks) {click_count ++; Var Offset = $ (this) .offset (); Var x = e.pageX-offset.left; Var y = e.pageY-offset.top; Console.log (x); Console.log (y); If (click_count == 1) {current_rect.x1 = x; Current_rect.y1 = y; } And if (click_count == 2) {current_rect.x2 = x; Current_rect.y2 = y; Stop_listening_for_rects (); }}}; $ Container.one ('click', '.child', click_event); . Click on $ ('Img') (click_event); // console.log ($ ('. Child'));    
   
   
   If you click inside a reset, then the x and y coordinate image Instead of the top left corner,  relative  in the top left corner of the rectangle.  
   This means that $ (this) .offet () gives the offset of the element that you are clicking, not offset the image, so when you click inside a reset, Returns offset   
    var offset = $ ("img").  
   In this  click_event = function (e) {: <();