HTML5 Canvas Floating Particles responsive fix?

Question

What I have is an overlaying canvas element with floating particles that bounce around the screen, meant to mimic floating leaves and/or dust particles. The canvas element overlays a scenic background, and when the page is viewed on a mobile device the particles seem too large to be viewed as floating leaves/dust, they look like balls floating around which hinders the imagination of them being leaves/dust.

I'm wanting to resize the particles when the browser screen is smaller than 600px, and I'm not sure how to modify the code to do so.

Here is the JS used:

(function() {
jQuery(function() {
var H, Particle, W, animateParticles, canvas, clearCanvas, colorArray, createParticles, ctx, drawParticles, initParticleSystem, particleCount, particles, updateParticles;
Particle = function() {
  this.color = colorArray[Math.floor((Math.random() * 5) + 1)];
  this.x = Math.random() * W;
  this.y = Math.random() * H;
  this.direction = {
    x: -1 + Math.random() * 2,
    y: -1 + Math.random() * 1
  };
  this.vx = 1 * Math.random() + .05;
  this.vy = 1 * Math.random() + .05;
  this.radius = .9 * Math.random() + 1;
  this.move = function() {
    this.x += this.vx * this.direction.x;
    this.y += this.vy * this.direction.y;
  };
  this.changeDirection = function(axis) {
    this.direction[axis] *= -1;
  };
  this.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
  };
  this.boundaryCheck = function() {
    if (this.x >= W) {
      this.x = W;
      this.changeDirection("x");
    } else if (this.x <= 0) {
      this.x = 0;
      this.changeDirection("x");
    }
    if (this.y >= H) {
      this.y = H;
      this.changeDirection("y");
    } else if (this.y <= 0) {
      this.y = 0;
      this.changeDirection("y");
    }
  };
};
clearCanvas = function() {
  ctx.clearRect(0, 0, W, H);
};
createParticles = function() {
  var i, p;
  i = particleCount - 1;
  while (i >= 0) {
    p = new Particle();
    particles.push(p);
    i--;
  }
};
drawParticles = function() {
  var i, p;
  i = particleCount - 1;
  while (i >= 0) {
    p = particles[i];
    p.draw();
    i--;
  }
};
updateParticles = function() {
  var i, p;
  i = particles.length - 1;
  while (i >= 0) {
    p = particles[i];
    p.move();
    p.boundaryCheck();
    i--;
  }
};
initParticleSystem = function() {
  createParticles();
  drawParticles();
};
animateParticles = function() {
  clearCanvas();
  drawParticles();
  updateParticles();
  requestAnimationFrame(animateParticles);
};
W = void 0;
H = void 0;
canvas = void 0;
ctx = void 0;
particleCount = 100;
particles = [];
colorArray = ["rgba(65,61,11,.5)", "rgba(112,94,12,.6)", "rgba(129,123,114,.4)", "rgba(122,105,17,.5)", "rgba(188,188,188,.2)", "rgba(75,69,16,.5)", "rgba(136,107,13,.5)"];
W = window.innerWidth;
H = jQuery('.fullscreen-cover').height();
canvas = jQuery("#headerballs").get(0);
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
initParticleSystem();
requestAnimationFrame(animateParticles);
});

}).call(this);

Answer 1

Adjust the radius on window resize event.

    function setRadius(value) {
        self.radius = value;
    }

    function resize(event) {
        if ($(window).width() > 600) {
            setRadius(.9 * Math.random() + 10);
        } else {
            setRadius(.9 * Math.random() + 2);
        }
    }

    resize();
    $(window).on('resize', resize);   

Working Demo: http://jsfiddle.net/x5rwgcfv/3/