var ffffff = 16777215;
var color     = '#' + Math.floor(Math.random() * ffffff).toString(16);
var canvas    = document.getElementById('canvasGraph')
var ctx       = canvas.getContext('2d');
var mouseX, mouseY;


//Set canvas size on load
canvas.width  = $(window).innerWidth();
canvas.height = $(window).innerHeight() * 10;

//get mouse coords
$(window).on('mousemove', function(e){
  mouseX = e.pageX;
  mouseY = e.pageY;

  clearCanvas();
  randomizeColor();

  for(var i=0;i<100;i++){
    var line = new Line(mouseX - 20, mouseY - 50);
  }
});







function Line(x,y){
  this.x = Math.floor(Math.random() * 600);
  this.y = Math.floor(Math.random() * 400);
  
  if(x === undefined && y === undefined){
    this.x2 = Math.floor(Math.random() * 600);
    this.y2 = Math.floor(Math.random() * 400);
  }else{
    this.x2 = x;
    this.y2 = y;
  }
  
  randomizeColor();
  ctx.beginPath()
  ctx.strokeStyle = color;
  ctx.lineWidth = .5;
  ctx.moveTo(this.x, this.y);
  ctx.lineTo(this.x2, this.y2);
  ctx.stroke();
}





function randomizeColor(){
  color = '#' + Math.floor(Math.random() * ffffff).toString(16);
  $('#console').html('<p>' + color +  mouseX + mouseY + '</p>');
};


function clearCanvas(){
  ctx.clearRect(0,0,canvas.width, canvas.height);
}