lines

<p>keep mouse down and move!</p>

<canvas id="myCanvas"></canvas>

body{

  cursor: crosshair;

}

p{

  position: fixed;

  top: 0;

}

var numberOfConnectedLine = 10

var sampleRate = 60;//ms

var lineColor = "#090";

var canvas = document.getElementById('myCanvas');

canvas.width = window.innerWidth - 50;

canvas.height = window.innerHeight - 50;

var ctx = canvas.getContext('2d');

var c = new circleQueue(numberOfConnectedLine);

var mouse = new point(0, 0);

var mouseMoved = false;

var mouseDown = false;

canvas.addEventListener("mousemove", function (evt) {

    if (mouseDown) {

        mouse.x = evt.pageX;

        mouse.y = evt.pageY;

        mouseMoved = true;

    }

});

canvas.addEventListener("mousedown", function (evt) {

    mouseDown = true;

    c.reset(new point(evt.pageX,evt.pageY));

    lineColor='rgb(' + getRandom(255) + ',' + getRandom(255) + ',' + getRandom(255) + ')';

});

canvas.addEventListener("mouseup", function (evt) {

    mouseDown = false;

});

function getRandom(n) {

    return Math.floor(Math.random() * n);

}

function point(x, y) {

    this.x = x;

    this.y = y;

    this.draw = function () {

        ctx.beginPath();

        ctx.fillStyle = "#0a0";

        ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);

        ctx.fill();

    }

    this.clone = function () {

        return new point(this.x, this.y);

    }

}

function circleQueue(n) {

    var points = new Array(n);

    for (var i = 0; i < points.length; i++) {

        points[i] = new point(0, 0);

    }

    var current = 0;

    this.setNextPoint = function (point) {

        points[current] = point.clone();

        current++;

        if (current == n)

            current = 0;

    }

    this.getPoints = function () {

        return points;

    }

    this.reset=function(point){

        points=new Array(n);

        for (var i = 0; i < points.length; i++) {

            points[i] = point.clone();

        }

    }

}

function drawLines() {

    if (!mouseMoved)return;

    var points = c.getPoints();

    ctx.strokeStyle = lineColor;

    var x0 = mouse.x;

    var y0 = mouse.y;

    for (var i = 0; i < points.length; i++) {

        var p = points[i];

        p.draw();

        ctx.beginPath();

        ctx.moveTo(mouse.x, mouse.y);

        ctx.lineTo(p.x, p.y);

        ctx.stroke();

    }

    c.setNextPoint(mouse);

    mouseMoved = false;

}

setInterval(drawLines, sampleRate);

/*

idea from http://codepen.io/matths/pen/hcdGu

*/