var numberOfConnectedLine = 10
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);
canvas.addEventListener("mousemove", function (evt) {
canvas.addEventListener("mousedown", function (evt) {
c.reset(new point(evt.pageX,evt.pageY));
lineColor='rgb(' + getRandom(255) + ',' + getRandom(255) + ',' + getRandom(255) + ')';
canvas.addEventListener("mouseup", function (evt) {
return Math.floor(Math.random() * n);
this.draw = function () {
ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
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);
this.setNextPoint = function (point) {
points[current] = point.clone();
this.getPoints = function () {
this.reset=function(point){
for (var i = 0; i < points.length; i++) {
points[i] = point.clone();
var points = c.getPoints();
ctx.strokeStyle = lineColor;
for (var i = 0; i < points.length; i++) {
ctx.moveTo(mouse.x, mouse.y);
setInterval(drawLines, sampleRate);