JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<canvas id='myCanvas'></canvas>

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radius = 0.5;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var position = [0.3, 0.1];
var velocity = [0.002, 0.004];

setInterval(function() {
    //canvas.width = canvas.width;
    
    velocity[0] += (Math.random() - 0.5) / 2000;
    velocity[1] += (Math.random() - 0.5) / 2000;
    
    if (position[0] > 1) {
        velocity[0] *= -1;
    } else if (position[0] < 0) {
        velocity[0] *= -1;
    }
    
    if (position[1] > 1) {
        velocity[1] *= -1;
    } else if (position[1] < 0) {
        velocity[1] *= -1;
    }
    position = [position[0] + velocity[0], position[1] + velocity[1]];
    context.beginPath();
    context.arc(position[0] * canvas.width, position[1] * canvas.height, radius, 0, 2 * Math.PI, false);
    context.lineWidth = 1;
    context.strokeStyle = '#444';
    context.stroke();
}, 10);