JSFiddle - React, Tailwind, and code Playground
by vvv vvvv
HTML
<canvas id="fly">
<p>It looks like your browser doesn't support canvas :(</p>
</canvas>
CSS
#fly {
background-color: #000;
color: #fff;
}
JavaScript
(function() {
var canvas = document.getElementById('fly'),
viewport = [window.innerWidth, window.innerHeight];
canvas.width = viewport[0];
canvas.height = viewport[1];
function random() {
var nb = [];
do {
nb[0] = Math.round( Math.random()*1000 );
nb[1] = Math.round( Math.random()*1000 );
} while(nb[0] > viewport[0] || nb[1] > viewport[1] || nb[0]+nb[1] <= 1);
return nb;
}
function draw() {
var fly = random();
var canvas = document.getElementById('fly'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(fly[0], fly[1],
10, 10);
}
setInterval(function() {
canvas.width = canvas.width;
draw();
}, 500);
})();