title: Resize and move rectangles drawn on canvas
body: <p>I am allowing the user to draw rectangles on an image. At the same time , the user should be able to resize or move any of the rectangles at any point of time. 
  With some help, i have been able to draw the rectangles but i am unable to come up with resizing and moving part of it. 
  The rectangles that are being drawn do not overlap one another and the same has to be validated while resizing and moving too. 
  I am using javascript and jquery. 
  This is a <a href="http://jsfiddle.net/5koLdpt2/4/" rel="noreferrer">demo</a> of what i have done so far : </p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  var canvasOffset = $("#canvas").offset();
  var offsetX = canvasOffset.left;
  var offsetY = canvasOffset.top;
  
  var startX;
  var startY;
  var isDown = false;
  
  ctx.strokeStyle = "lightgray";
  ctx.lineWidth = 3;
  
  
  function handleMouseDown(e) {
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);
  
  // Put your mousedown stuff here
  startX = mouseX;
  startY = mouseY;
  isDown = true;
  }
  
  function handleMouseUp(e) {
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);
  $("#uplog").html("Up: " + mouseX + " / " + mouseY);
  
  // Put your mouseup stuff here
  isDown = false;
  }
  
  function handleMouseMove(e) {
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);
  
  // Put your mousemove stuff here
  if (!isDown) {
      return;
  }
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
          drawRectangle(mouseX, mouseY);
  
  
  }
  
  function drawRectangle(mouseX, mouseY) {
  var width = mouseX - startX;
  var height = mouseY - startY;
  ctx.beginPath();
  ctx.rect(startX, startY, width, height);
  ctx.stroke();
  }
  
  
  $("#canvas").mousedown(function (e) {
  handleMouseDown(e);
  });
  $("#canvas").mousemove(function (e) {
  handleMouseMove(e);
  });
  $("#canvas").mouseup(function (e) {
  handleMouseUp(e);
  });
  </code></pre>
  
  <p>as i am running short of time and i am not able to figure out how this can be done. </p>