JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas">
</canvas>
CSS
#canvas {
height:300px;
width:300px;
}
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var characters = [];
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function Character(value) {
this.value = value;
this.color = '#426F51';
this.isNew = true;
}
Character.prototype.draw = function() {
ctx.fillStyle = this.color;
if(this.isNew) {
this.x = getRandomInt(1,290);
this.y = getRandomInt(1,290);
} else {
if(this.y < 290) {
this.y++;
} else {
this.y = 0;
this.x = getRandomInt(1,290);
}
}
ctx.fillText(this.value, this.x, this.y);
if(this.isNew) {
characters.push(this);
this.isNew = false;
}
}
getItMoving = function() {
ctx.clearRect(0, 0, 300, 300);
for(var j = 0; j < characters.length; j++) {
characters[j].draw();
}
}
ctx.clearRect(0, 0, 300, 300);
var numberOfCharacters = 1000;
for(i=0; i < numberOfCharacters; i++) {
var character = new Character(getRandomInt(0, 1));
character.draw();
}
setInterval(getItMoving, 5);