JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c"></canvas>

CSS

canvas {
    border: 1px solid;
}

JavaScript

var cvs = document.getElementById('c');
var ctx = cvs.getContext('2d');
var fps = 1000 / 60;

cvs.width = 640;
cvs.height = 480;

var world = {
    gravity: 0.9,
    friction: 0.5
};

var ball = {
    vx: 0,
    vy: 0,
    x: cvs.width / 2,
    y: 20
};

function drawBall(x, y) {
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
}
    
function updateBall() {
    ball.vy += world.gravity * world.friction;
    ball.y += ball.vy;

    if (ball.y > cvs.height - 20) {
        ball.y = cvs.height - 20;
        ball.vy *= -1;
    }

    drawBall(ball.x, ball.y);
}
    
setInterval(updateBall, fps);