// Original fiddle: http://jsfiddle.net/R4V97/97/
// Stefan's copy: jsfiddle.net/stefanreich/wskby4q5/

var canvas = document.getElementById("scribble"),
    ctx = canvas.getContext("2d"),
    painting = true,
    lastX = 0,
    lastY = 0,
    mouseDown = false,
    fadeInterval = 100,
    fadeSpeed = 0.025,
    strokeStyleDown = "rgba(255,255,255,1)",
    strokeStyleUp = "rgba(255,255,255,0.025)",
    sendStroke = null;

canvas.onmousedown = function (e) {
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
    mouseDown = true;
};

canvas.onmouseup = function (e) {
    mouseDown = false;
};

function drawStroke(x1, y1, x2, y2, mouseDown) {
  ctx.strokeStyle = mouseDown ? strokeStyleDown : strokeStyleUp;
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

canvas.onmousemove = function (e) {
  if (!painting) return;
  mouseX = e.pageX - this.offsetLeft;
  mouseY = e.pageY - this.offsetTop;
  drawStroke(lastX, lastY, mouseX, mouseY, mouseDown);
  if (sendStroke)
    sendStroke({x1: lastX, y1: lastY, x2: mouseX, y2: mouseY, mouseDown: mouseDown});
  lastX = mouseX;
  lastY = mouseY;
}

function fadeOut() {
  var r = fadeSpeed * (1 + Math.random()*0.3);
  ctx.fillStyle = "rgba(60,30,50,"+r+")";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  setTimeout(fadeOut, fadeInterval);
}

fadeOut();