Canvas Element - Line

Canvas Element - Line

var lines = [];

function Line(x, y, toX, toY, width, color) {
  this.x = x;
  this.y = y;
  this.toX = toX;
  this.toY = toY;
  this.width = width;
  this.color = color;
  this.alpha = 1;
  this.angleRadians = Math.PI + Math.atan2(this.toY - this.y, this.toX - this.x);
  this.angleDeg = this.angleRadians * 180 / Math.PI;

  this.speed = 2;
  this.active = true;
  this.life = 150;
  this.startlife = this.life;

  lines.push(this);

  this.live = function () {
    if (this.life > 0) {
      this.life--;
    } else {
      this.active = false;
    }

    this.distance = getDistance({
      x: this.toX,
      y: this.toY
    }, {
      x: this.x,
      y: this.y
    });
    this.alpha = this.life / this.startlife;

    this.toX += this.speed * Math.cos(this.angleDeg * Math.PI / 180);
    this.toY += this.speed * Math.sin(this.angleDeg * Math.PI / 180);
  };

  this.draw = function () {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(this.toX, this.toY);
    ctx.strokeStyle = this.color;
    ctx.lineWidth = this.width;

    // fade out
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.stroke();
    ctx.restore();
  };
};

/*
  Draw Lines 
  */

  for (var i in lines) {
    if (lines[i].active) {
      lines[i].live();
      lines[i].draw();
    }
  }