Resize function canvas loaded on shrinked browser and expanded

Question

I'm a javascript beginner but I managed to make a simple function that creates an animated canvas.

  var w = c.width = window.innerWidth,
  h = c.height = window.innerHeight,
  ctx = c.getContext('2d'),

  spawnProb = 1,
  numberOfMoves = [8, 16], //[min, max]
  distance = [50, 200],
  attenuator = 900,
  timeBetweenMoves = [6, 10],
  size = [.5, 3],

  lines = [],
  frame = (Math.random() * 360) | 0;

function rand(ar) {
  return Math.random() * (ar[1] - ar[0]) + ar[0];
}

function Line() {
  this.x = Math.random() * w;
  this.y = Math.random() * h;
  this.vx = this.vy = 0;
  this.last = {};
  this.target = {};
  this.totalMoves = rand(numberOfMoves);
  this.move = 0;
  this.timeBetweenMoves = rand(timeBetweenMoves);
  this.timeSpentThisMove = this.timeBetweenMoves;
  this.distance = rand(distance);

  this.color = 'hsl(hue, 80%, 50%)'.replace('hue', frame % 360);

  this.size = rand(size);
}
Line.prototype.use = function() {
  ++this.timeSpentThisMove;
  if (this.timeSpentThisMove >= this.timeBetweenMoves) {
    ++this.move;
    this.timeSpentThisMove = 0;

    var rad = Math.random() * 2 * Math.PI;
    this.target.x = this.x + Math.cos(rad) * this.distance;
    this.target.y = this.y + Math.sin(rad) * this.distance;
  }

  this.last.x = this.x;
  this.last.y = this.y;

  this.vx += (this.x - this.target.x) / attenuator;
  this.vy += (this.y - this.target.y) / attenuator;

  this.x += this.vx;
  this.y += this.vy;

  ctx.lineWidth = this.size;
  ctx.strokeStyle = ctx.shadowColor = this.color;
  ctx.beginPath();
  ctx.moveTo(this.last.x, this.last.y);
  ctx.lineTo(this.x, this.y);
  ctx.stroke();
}

function anim() {
  window.requestAnimationFrame(anim);

  ++frame;

  ctx.shadowBlur = 0;
  ctx.fillStyle = 'rgba(0, 0, 0, .04)';
  ctx.fillRect(0, 0, w, h);
  ctx.shadowBlur = 20;

  if (Math.random() < spawnProb) lines.push(new Line);

  for (var i = 0; i < lines.length; ++i) {
    lines[i].use();

    if (lines[i].move >= lines[i].totalMoves) {
      lines.splice(i, 1);
      --i;
    }
  }
}
anim();

This is the result

However, when I shrink the browser down to mobile size and then expand it back to normal it looks like this:

I am trying to implement a resize function and event listener:

   // Event handling
    function addListeners() {
        // window.addEventListener('resize', resize);
    }

    function resize() {
        w = window.innerWidth;
        h = window.innerHeight;
        largeHeader.style.height = h+'px';
        canvas.width = w;
        canvas.height = h;
    }

and call it before anim(); but no luck....

How can I fix this?

Answer 1

You just need to change the canvas to c in the event listener;

http://jsbin.com/zigoto/1/edit?js,output

var c = document.getElementById('c'),
    largeHeader = document.getElementById('h');

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

    spawnProb = 1,
    numberOfMoves = [8, 16], //[min, max]
    distance = [50, 200],
    attenuator = 900,
    timeBetweenMoves = [6, 10],
    size = [0.5, 3],

    lines = [],
    frame = (Math.random() * 360) | 0;

function rand(ar) {
  return Math.random() * (ar[1] - ar[0]) + ar[0];
}

function Line() {
  this.x = Math.random() * w;
  this.y = Math.random() * h;
  this.vx = this.vy = 0;
  this.last = {};
  this.target = {};
  this.totalMoves = rand(numberOfMoves);
  this.move = 0;
  this.timeBetweenMoves = rand(timeBetweenMoves);
  this.timeSpentThisMove = this.timeBetweenMoves;
  this.distance = rand(distance);

  this.color = 'hsl(hue, 80%, 50%)'.replace('hue', frame % 360);

  this.size = rand(size);
}
Line.prototype.use = function() {
  ++this.timeSpentThisMove;
  if (this.timeSpentThisMove >= this.timeBetweenMoves) {
    ++this.move;
    this.timeSpentThisMove = 0;

    var rad = Math.random() * 2 * Math.PI;
    this.target.x = this.x + Math.cos(rad) * this.distance;
    this.target.y = this.y + Math.sin(rad) * this.distance;
  }

  this.last.x = this.x;
  this.last.y = this.y;

  this.vx += (this.x - this.target.x) / attenuator;
  this.vy += (this.y - this.target.y) / attenuator;

  this.x += this.vx;
  this.y += this.vy;

  ctx.lineWidth = this.size;
  ctx.strokeStyle = ctx.shadowColor = this.color;
  ctx.beginPath();
  ctx.moveTo(this.last.x, this.last.y);
  ctx.lineTo(this.x, this.y);
  ctx.stroke();
};

function anim() {
  window.requestAnimationFrame(anim);

  ++frame;

  ctx.shadowBlur = 0;
  ctx.fillStyle = 'rgba(0, 0, 0, .04)';
  ctx.fillRect(0, 0, w, h);
  ctx.shadowBlur = 20;

  if (Math.random() < spawnProb) lines.push(new Line());

  for (var i = 0; i < lines.length; ++i) {
    lines[i].use();

    if (lines[i].move >= lines[i].totalMoves) {
      lines.splice(i, 1);
      --i;
    }
  }
}
anim();

function resize() {
  w = window.innerWidth;
  h = window.innerHeight;
  c.width = w;
  c.height = h;
}

window.addEventListener('resize', resize);

html, body {
  overflow: hidden;
  width: 100%; height: 100%;
}
h1 {
  position: absolute;
  top: 50%; left: 50%;
  color: white;
  transform: translate(-50%, -50%)
}

<canvas id="c"></canvas>
<h1>HACKING</h1>