JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>
</head>
<body>
<div style="margin:0 auto; width: 602px;"><canvas id="canvas" width="600" height="600" style="border:1px solid;"></canvas></div>
</body>
</html>

JavaScript

var g = 9.80665;
var dt = 60 / 1000;

function Engine(ctx) {
    this.width = 800;
    this.height = 600;

    this.ctx = ctx;
    this.renderObjects = [];

    this.refresh = function () {
        this.ctx.clearRect(0, 0, this.width, this.height);
        for (var i = 0; i < this.renderObjects.length; i++) {
            this.renderObjects[i].draw(this.ctx);
        }
    }

    this.addObject = function (obj) {
        this.renderObjects.push(obj);
    }
}

function RenderObject(x, y) {
    this.x = x;
    this.y0 = y;
    this.y = this.y0;
    this.vy0 = 0;
    this.vy = this.vy0;
    this.timestamp = Date.now();
    this.ppm = 30;

    this.width = 64;
    this.height = 64;

    this.img = new Image();
    this.img.src = "/img/ball.png";

    this._recalcPosition = function () {
        var dt = (Date.now() - this.timestamp) / 1000;
        this.y = (this.y0/this.ppm+ this.vy0*dt + g*dt*dt/2)*this.ppm;
        this.vy = this.vy0 + g*dt;
        if(this.vy>0 && this.y>=300){
            this.y0 = this.y;
            this.vy0 = this.vy*-1;
            this.timestamp = Date.now();;
        }
        
    }

    this.draw = function (ctx) {
        this._recalcPosition();
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.fillRect (this.x, this.y, this.width, this.height);
        //ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
    }
}
        
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var engine = new Engine(ctx);

var raf = window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
var myRedrawFunc = function () {
    engine.refresh();
    raf(myRedrawFunc);
}
raf(myRedrawFunc);

engine.addObject(new RenderObject(100, 100));