JSFiddle - React, Tailwind, and code Playground

by XGundam05

HTML

<canvas id="canvas" width="400" height="300"></canvas>

JavaScript

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

function Matrix(canvas){
    this.intervalId = 0;
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.width = canvas.width;
    this.height = canvas.height;
    this.yPositions = [];
    this.ySpeeds = [];
    this.yTimes = [];
    this.lastChars = [];
    
    for(var i = 0; i < this.width / 10; i++){
        this.yPositions[i] = Math.random() * (this.height / 10);
        this.ySpeeds[i] = (Math.random() + 0.3) * 0.5;
        this.yTimes[i] = 0;
        this.lastChars[i] = ' ';
    }
    
    this.ctx.font = '10pt Consolas';
}

Matrix.prototype.Clear = function(){
    var fill = this.ctx.fillStyle;
    this.ctx.fillStyle = '#000000';
    this.ctx.fillRect(0, 0, this.width, this.height);
    this.ctx.fillStyle = fill;
    
    for(var i = 0; i < 20; i++){
        this.Draw();
    }
};

Matrix.prototype.Draw = function(){
    requestAnimationFrame(this.Draw.bind(this));
    
    this.ctx.fillStyle = '#00FF00';
    for(var i = 0; i < this.lastChars.length; i++){
        this.ctx.fillText(this.lastChars[i], i * 10...