Snow Effect using HTML5 Canvas and Javascript

View code Play Walkthrough

Description

A simple particle system modelled towards simulating a snowfall effect. Inspired by an anonymous submission on our website.

The background comes from CSS which means that the code can be used with different colors or image based backgrounds in games, websites, and more.

The perfect goodie for Christmas time.

Subscribe

Get updates about new walkthroughs, behind-the-scenes experiments, tips, tricks and more.

Add New Comment

19 Comments

(close)
Hangs

Hangs

Hi… that’s my tutorial.thank’s for using it =)

Aaron Bien

Aaron Bien

hi there,

really nice tutorial!

I think I can use this code to create a sparkling background. Can you show me how to make the flakes bigger and turn down their opacity?

Thanks

Mustafa

Mustafa

Blur effect:
-webkit-filter: blur(1px);

Brent

Brent

Very cool. Thanks. Also, if you turn the background to #111 and the opacity to 1., it makes it into outer space. Very cool.

white

white

hey there
i have to say, it’s so naturally and so beautiful.

thanks for sharing it

Ricardo

Ricardo

This and other tutorials on the site are absolutely mind blowing. Keeps me visit for more brilliant tutorials.

Liam

Liam

How can you change the shape of the snow? for example instead of dots snowflakes

Thanks in advance.

Archie

Archie

How can I use an animated GIF instead of the snowflakes?

Thanks

Jeroen Visser

Jeroen Visser

This might be the single nicest animation I’ve seen. Really nice annotated source. Was a thrill to watch, thanks a lot!

Patsy

Patsy

Thank you so much for your code and demonstration.

Andrey

Andrey

Nice coding. But I think, must be
var mp = 1000; //max particles

And this will be real russian snow..

NAcho

NAcho

Liam, you can use the Unicode chars for the snow (cannot remember the exact numbers but look an Unicode table and browse the u24xx range). BTW, if you are going to use those snowflake chars, remember to increase the font size for a better effect (to 24px or even more).

Gen

Gen

i love this snow effect! can this be integrated in tumblr? where should i place the entire code? thanks much! and advance happy new year!

Nishan

Nishan

Can’t I use it as my background????

Harminder

Harminder

how can i use it as my background page

Harminder

Harminder

i have made some alteration in the code but browsers blinks a lot — please suggest——-

window.onload = function () {
//canvas init
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
var mybody = $(‘body’);
//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
var dataURL;
canvas.width = W;
canvas.height = H;

//snowflake particles
var mp = 25; //max particles
var particles = [];
for (var i = 0; i < mp; i++) {
particles.push({
x: Math.random() * W, //x-coordinate
y: Math.random() * H, //y-coordinate
r: Math.random() * 4 + 1, //radius
d: Math.random() * mp //density
})
}

//Lets draw the flakes
function draw() {
ctx.clearRect(0, 0, W, H);

ctx.fillStyle = “rgba(255, 255, 255, 0.8)”;
ctx.beginPath();
for (var i = 0; i < mp; i++) {
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
}

ctx.fill();
update();
mybody.css(‘background-image’, ‘url(‘ + dataURL + ‘)’);

}

//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update() {

angle += 0.01;
for (var i = 0; i < mp; i++) {
var p = particles[i];

//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
p.x += Math.sin(angle) * 2;

//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if (p.x > W + 5 || p.x < -5 || p.y > H) {

if (i % 3 > 0) //66.67% of the flakes
{

particles[i] = { x: Math.random() * W, y: -10, r: p.r, d: p.d };

//mydiv.css(‘background-image’, ‘url(‘ + dataURL + ‘)’);
}
else {
//If the flake is exitting from the right
if (Math.sin(angle) > 0) {
//Enter from the left
particles[i] = { x: -5, y: Math.random() * H, r: p.r, d: p.d };

}
else {
//Enter from the right
particles[i] = { x: W + 5, y: Math.random() * H, r: p.r, d: p.d };

}
}
dataURL = canvas.toDataURL(“image/png”);
}
}
}

//animation loop
setInterval(draw, 33);

}

Boles

Boles

How do I set this is a background, It just keeps moving the rest of my page down?

janik

janik

thanks! hoping that will fugure it out

19 Comments

Description

5x 10x 15x 20x