title: drawing rectangles on an image in javascript
body: <p>I'm trying to write a simple java script program to mark rectangles on an image. You click a button to add a rectangle then you click on the upper left and lower right corner and the program should mark the rectangle in red. I'm using straight javascript with jquery.</p>
  
  <p>Everything almost works, except when either the upper left or lower right corner of a rectangle is inside another rectangle in that case, while the click event gets processed, the x and y are incorrect.</p>
  
  <p>I've been trying to troubleshoot this for hours and google didn't help. I specifically tried:</p>
  
  <ul>
  <li>changing the e.pageX for e.screenX and e.screenY </li>
  <li>using the absolute position (the top and left) instead of the offset</li>
  </ul>
  
  <p>It is clear I'm missing something that is not allowing me to get this just right, but I don't know exactly what.</p>
  
  <p>I've created a <a href="http://jsfiddle.net/65FDe/4/" rel="nofollow">jsfiddle with an example that shows the problem</a>. Yet in case you don't want to click on it, this is my JS code:</p>
  
  <pre><code>var rects = [{x1: 708, y1: 246, x2: 738, y2: 277},
               {x1: 442, y1: 239, x2: 474, y2: 271},
               {x1: 676, y1: 242, x2: 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) {
      $('&lt;div class="child"/&gt;')
      .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(rects, _.partial(add_rect, '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').attr('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();
  });
  
  $('#remove-rect').click(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;
          } else if (click_count == 2) {
              current_rect.x2 = x;
              current_rect.y2 = y;
              stop_listening_for_rects();
          }
      }
  };
  
  $container.on('click', '.child', click_event);
  
  $('img').click(click_event);
  // console.log($('.child'));
  </code></pre>