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.05)";

canvas.width = canvas.height = 600;

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

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

canvas.onmousemove = function (e) {
    if (!painting) return;
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;
    
    ctx.strokeStyle = mouseDown ? strokeStyleDown : strokeStyleUp;
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(mouseX, mouseY);
    ctx.stroke();
    
    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();