index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rezagholi.de</title>
		<style>
			html, body {
				width: 100%;
				height: 100%;
				margin: 0px;
				border: 0;
				overflow: hidden; /* Disable scrollbars */
				display: block;   /* No floating content on sides */
			}
		</style>
		<meta charset="utf-8">
	</head>
	<body>
		<canvas id='canvas' style = 'position: absolute; left: 0px; top: 0px;' >
		</canvas>
		<script>
			(function() {
				var canvas = document.getElementById("canvas");
				var ctx = canvas.getContext("2d");

				// setting canvas size
				canvas.height = screen.height;
				canvas.width = screen.width;

				// define string sets
				var characters = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑"+"､･ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ"+"0123456789"+"ABCDEFGHIJKLMNOPQRSTUVWXYZ"+"abcdefghijklmnopqrstuvwxyz"+"$+-*/=%\"\#&_().;:?!\\|{}<>[]^~";
				
				// converting the strings into an array of single characters
				characters = characters.split("");

				var font_size = 9;
				// number of columns for the rain	
				var columns = canvas.width/font_size;
				// array of drops - one per column
				var drops = [];
				// x below is the x coordinate
				// 1 = y co-ordinate of the drop(same for every drop initially)
				for(var x = 0; x < columns; x++)
					drops[x] = 1; 
				// set draw interval
				setInterval(draw, 65);
				
				// drawing the characters
				function draw() {
					
					// black translucent canvas background to show trail
					ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
					ctx.fillRect(0, 0, screen.width, screen.height);
					
					// make text green
					ctx.fillStyle = "#0F0";
					ctx.font = font_size + "px arial";
					
					//looping over drops
					for(var i = 0; i < drops.length; i++){
							
					// print random character
					var text = characters[Math.floor(Math.random()*characters.length)];
					//var text = "Rezagholi.de";
					ctx.fillText(text, i*font_size, drops[i]*font_size);
						
					// sending the drop back to the top randomly after it has crossed the screen
					// adding a randomness to the reset to make the drops scattered on the Y axis
					if(drops[i]*font_size > canvas.height && Math.random() > 0.975)
						drops[i] = 0;
						drops[i]++;
					}
				}
			})();
		</script>
	</body>
</html>