JS Canvas Snow Animation

To finish snowfall tutorials series I need to show you one way to create snow animation on the web page. In the last January I posted the CSS snowfall tutorial, where to create the snow effect you need to use png files (click here to see the tutorial), yesterday I posted the tutorial using only pure CSS to create the snow effect (click here to see the tutorial), and today I am gonna show you how to create the animation on the canvas.

Which way to create the snow effect animation is the best? Well, that is up to you. Check them out!

JS Canvas Snowfall:

What do you need to do?

1. Add HTML
2. Add CSS
3. Add JavaScript

Step1.

Add HTML

<canvas id="snowfall"></canvas>

Step2.

Add CSS

body {
  background-image: linear-gradient( to top, #fff 5%, #0396FF 100%);
  height: 100vh;
  overflow:hidden;
}

canvas {
  filter: blur(1px);
  opacity:0.7;
  height: 100vh;
}

Step3.

Add JavaScript

var canvas = document.getElementById("snowfall");
var contex = canvas.getContext('2d'),
    
cnsWidth = window.innerWidth,
cnsHeight = window.innerHeight,
numberFlakes = 250,
flakes = [];

function Flake(x, y) {
  var topSize = 4.5, topMotion = 2.5;
  
this.x = x;
this.y = y;
this.spacing = spaceBetween(0, 0.8);
this.distance = spaceBetween(0, Math.PI);
this.weight = spaceBetween(2, topSize);
this.scale = (this.weight / topSize);
this.motion = (this.weight / topSize) * topMotion; 
  
this.update = function() {
this.x += Math.cos(this.distance) * this.spacing;   
this.y += this.motion;
  }  
}

function init() {
  var i = numberFlakes;
        
while (i--) {
    x = spaceBetween(0, cnsWidth, true);
    y = spaceBetween(0, cnsHeight, true);
        
flake = new Flake(x, y);
    flakes.push(flake);
  }
  
scaleCanvas();
  loop();  
}

function scaleCanvas() {
  canvas.width = cnsWidth;
  canvas.height = cnsHeight;
}

function loop() {
  var i = flakes.length;
  
contex.save();
contex.setTransform(1, 0, 0, 1, 0, 0);
contex.clearRect(0, 0, cnsWidth, cnsHeight);
contex.restore();
  
while (i--) {    
    flakeFront = flakes[i];
    flakeFront.update();    
    contex.beginPath();
    contex.arc(flakeFront.x, flakeFront.y, flakeFront.weight, 0, 2 * Math.PI, false);
    contex.fillStyle = "#FFFFFF"; + flakeFront.scale + ')';
    contex.fill();
    
    if (flakeFront.y >= cnsHeight) {
      flakeFront.y = -flakeFront.weight;
    }  
  }  
  requestAnimationFrame(loop);
}

function spaceBetween(min, max, round) {
  var number = Math.random() * (max - min + 1) + min;

  if (round) {
    return Math.floor(number);
  } else {
    return number;
  }
}

init();

To see the live output of the animation go to lenastanley.com.

Enjoy coding!