gistfile1.txt

var output = document.getElementById('output');
var points;
var drawing = false;

function handleMouseDown() {
  points = [];
  output.innerHTML = '';
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
}

function handleMouseUp() {
  setTimeout(function () {
    drawing = false;
  }, 0);
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
}

function handleMouseMove(e) {
  drawing = true;
  points.push([e.clientX, e.clientY]);
  var d = [];
  for (var i=0, l=points.length; i<l; i++) {
    var p1 = points[i];
    var p2 = points[i+1];
    if (p2) {
      d.push('M' + p1[0] + ' ' + p1[1] + ' ' + p2[0] + ' ' + p2[1]);
    }
  }
  output.innerHTML = '<path d="' + d.join(',') + '" stroke-width="1" stroke="black"/>';
}

document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('selectstart', function (e) {
  e.preventDefault();
  return false;
});


output.addEventListener('click', function () {
  if (!drawing) {
    alert('edit me!');
  }
});