JSFiddle - React, Tailwind, and code Playground

by Rahul Sharma

HTML

<canvas id="background" width="512" height="360">
</canvas>

JavaScript

var colors = ['#008800', '#00FF00', '#55FF55', '#BBFFBB'];
var words = [
    "昨天", "小时", "钟表", "漂亮", "常见", "說這",
    "안녕하", "그래서", "안녕하", "십니까", "洗手在",
    "笑好玩儿", "么希奇的", "환영합니다", "好吃的食物"];
    
function Bit (distance){
    // size and speed are inversely proportional to distance
    this.speed = 160 / distance;
    this.fontSize = parseInt(Math.max(8, Math.min(4*this.speed, 20)));
    
    // font and color will be decided accordingly
    this.font = this.fontSize.toString() +'pt Calibri';
    this.color = colors[(this.fontSize-8)/4];
    
    // x and y positions are randomized
    this.xpos = Math.random() * canvas.width;
    this.ypos = Math.random() * 2 * canvas.height - canvas.height;
    this.text = Math.floor(Math.random() * words.length);

		// this draw the text for current frame
    this.draw = function(){
    		// Formatting the text to display
        context.fillStyle = this.color;
        context.font = this.font;
        
        var text = words[this.text];
        var textWidth = context.measureText("W.").width;
				
        // we need to draw the characters of the text
        // one by one from top to bottom
        for(var i=0; i<text.length; i++){
            var charaterWidth = context.measureText(text[i]).width;
            context.fillText( text[i], 
                this.xpos - charaterWidth/2, 
                this.ypos + i*textWidth);
        }
    };
    
    // this will update the text for next frame
    this.tick = function(){
        if(this.ypos > canvas.height){
        		// if text crosses the bottom of the screen then reset 
            this.ypos = - canvas.height;
            this.xpos = Math.random() * canvas.width;
            this.text = Math.floor(Math.random() * words.length);
        }
        else
            this.ypos += this.speed;
        
        // we will give 2% change to change the text
        var chance = Math.random();
        if( chance < .01) // change to next word
            this.text = (this.text + 1) %...