JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<input type="file">

CSS

body {
    margin: 0;
}

canvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

input {
    position: fixed;
    top: 0;
    left: 0;
}
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var balls = [];
var size = {x: (309/2), y: (348/2)};
var amount = 80;
var speed = 1;

function r() {
    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    
    for(var i=0; i < balls.length-1; i++) {
        var ball = balls[i];
        
        if(ball.position.x > canvas.width-1-size.x) ball.position.x = canvas.width-1-size.x - 2;
        if(ball.position.y > canvas.height-1-size.y) ball.position.y = canvas.height-1-size.y - 2;
        
        if(ball.position.x < 0) ball.position.x = 1;
        if(ball.position.y < 0) ball.position.y = 1;
    }
    
}

window.addEventListener('resize', r);
r();

function randomOneOrMinusOne(addition) {
    if(!addition) addition = 0;
    if (Math.round(Math.random())) return 1+addition;
    else return -1-addition;
}

var ballObj = function() {
    this.position = {x: 0, y: 0};
    var hue = Math.floor(Math.random()*(259-1+1)+1);
    this.speed = speed;
    this.velocity = {x: (randomOneOrMinusOne(Math.random())), y: (randomOneOrMinusOne(Math.random()))};

    this.drawUpdate = function() {
        ctx.drawImage(image, this.position.x, this.position.y, size.x, size.y);
        //ctx.beginPath();
        //ctx.arc(this.position.x, this.position.y, size, 0, 2 * Math.PI, true);
        //ctx.fillStyle = 'hsl(' + hue + ', 50%, 50%)';
        //ctx.fill();
        //ctx.closePath();
        
        this.position.x += this.velocity.x * this.speed;
        this.position.y += this.velocity.y * this.speed;

        if(this.position.x < 1 || this.position.x > canvas.width-1 - size.x) this.velocity.x = -this.velocity.x;
        if(this.position.y < 1 || this.position.y > canvas.height-1 - size.y) this.velocity.y = -this.velocity.y;

        if(this.velocity.y === 0)...