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:
*to see the live output of the animation click here.
What do you need to do?
- Add HTML
- Add CSS
- 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!