JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="q" style="width: 100%; height: 100%;">Sorry Browser Won't Support</canvas>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
$(document).ready(function () {
var s = window.screen;
var width = $('#q').width();
var height = $('#q').height();
var yPositions = Array(300).join(0).split('');
var ctx = q.getContext('2d');
var draw = function () {
ctx.fillStyle = 'rgba(0,0,0,.1)';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = '#fff';
ctx.font = '10px Georgia';
yPositions.map(function (y, index) {
text = Math.floor(Math.random() * (2));
x = (index * 10) + 10;
q.getContext('2d').fillText(text, x, y);
if (y > 100 + Math.random() * 1e4) {
yPositions[index] = 0;
} else {
yPositions[index] = y + 10;
}
});
};
RunMatrix();
function RunMatrix() {
if (typeof Game_Interval != "undefined") clearInterval(Game_Interval);
Game_Interval = setInterval(draw, 50);
}
function StopMatrix() {
clearInterval(Game_Interval);
}
//setInterval(draw, 33);
});