Matrix animation using html5 canvas

index.html

<canvas id="c"></canvas>

<!-- definitely not my work!!!!!
just tested this out from http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript -->

matrix-animation-using-html5-canvas.markdown

Matrix animation using html5 canvas

This is not my work!

I'm starting out by experimenting with animations, and found this example on http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript

A Pen by Clayton on CodePen.

License.

script.js

var c = document.getElementById('c');
var cxt = c.getContext("2d");

c.width = window.innerWidth;
c.height = window.innerHeight;



var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
chinese = chinese.split("");

var font_size =10;
var columns = c.width/font_size; 

var drops = [];

for(var x=0;x<columns;x++){
  drops[x]=1;
}

function draw(){
  cxt.fillStyle="rgba(0,0,0,0.05)";
  cxt.fillRect(0,0,c.width,c.height);
  
  cxt.fillStyle = "#0F0";
  cxt.font = font_size+'px arial';
  
  
  for(var i=0;i<drops.length;i++){
    var text = chinese[Math.floor(Math.random()*chinese.length)];
    cxt.fillText(text,i*font_size,drops[i]*font_size);
    
    if(drops[i]*font_size>c.height && Math.random() >0.975)
      drops[i]=0;
    
    //increment y coordinate
    drops[i]++;
}
  
}
setInterval(draw,33);

style.css

*{margin:0;padding:0;}
canvas{display:block;}
body{background:black;}