Untitled

<html>
	<head>
		<title>Снегопад</title>
	</head>

	<body>
		<canvas id="canvas"></canvas>
		<script>
			var element = document.getElementById("canvas");
			var context = element.getContext("2d");

			element.width = document.body.clientWidth;
			element.height = document.body.clientHeight;

			var flakes = [];

			setInterval(() => {
				flakes.push({
					x: Math.random() * canvas.width,
					y: 0
				});
			}, 10);

			setInterval(() => {
				context.fillStyle = "red";
				context.clearRect(0, 0, element.width, element.height);

				for (let i = 0; i < flakes.length; i++) {
					let flake = flakes[i];
					flake.x += Math.random() * (3 - -3) + -3;
					flake.y += Math.random() * 6;

					if (flake.y < element.height) {
						context.fillRect(flake.x, flake.y, 3, 3);
					} else {
						flakes.splice(i, 1);
						console.log("Удалена снежинка");
					}
				}
			}, 20);
		</script>
	</body>
</html>