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.

Add New Comment

31 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

karthick

karthick

How to prevent the rest of pages from going down?

usman

usman

can we use this as background of a page?

Agsar Prasad

Agsar Prasad

You should as “position:absolute” to canvas tag to prevent the rest of pages from going down

Hendrik

Hendrik

The snowflakes don’t make it to the end of my website – but I haven changed the canvas dimensions… How can I fix this? Thanks ;)

Hendrik

Hendrik

got it – just add “min-height:” to CSS code… Once again thanks for this great work!

harry harding

harry harding

how do i use this for xsplit?

balu

balu

How should i add this as background??
On adding this my content is gone

duplich

duplich

Is it possible to add this canvas element on top of other elements with position fixed and still be able to click the elements underneath?

lukcy

lukcy

yes..position:absolute to canvas element prevent page elements from going down..but its not applied to the whole page..

Ahmed

Ahmed

i can change any thing in my asp website after i activate this script ???

5x 10x 15x 20x

31 Comments

Description