Canvas

canvas.css

canvas {
    position: absolute;
    left: 0;
    top: 0;
}​

canvas.html

<img src="http://placekitten.com/400/600" width="400" height="600"/>
<canvas id="canvas" width="400" height="600"></canvas>​

canvas.js

var x, y, startx, starty;
var canvasWidth = 400;
var canvasHeight = 600;
var canvas = document.getElementById('canvas');
var $canvas = $(canvas);
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "rgb(255,255,255)";
ctx.lineWidth = 4;

var draw = function(e) {
  var trueWidth = x-startx;
  var trueHeight = y-starty;
  var absH = Math.abs(trueHeight);
  var absW = Math.abs(trueWidth);
  var negH = (trueHeight < 0) ? -1 : 1;
  var negW = (trueWidth  < 0) ? -1 : 1;
  var height = (absW > absH) ? absW * negH : absH * negH;
  var width =  (absW > absH) ? absW * negW : absH * negW;
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  ctx.strokeRect(startx, starty, width, height);

}
    
var requestAnimFrame;
requestAnimFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
    return window.setTimeout(callback, 1000 / 60);
  };
})();

var mousemove = function(e) {
    getCoords(e);
    requestAnimFrame(draw);
}

var getCoords = function(e) {
    x = e.pageX;
    y = e.pageY;
}

$canvas.on('mousedown', function(e) {
    startx = x = e.pageX;
    starty = y = e.pageY;
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    canvas.addEventListener('mousemove', mousemove, false);
});
$canvas.on('mouseup', function() {
    canvas.removeEventListener('mousemove', mousemove, false);
});
​