JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id='canvas'></canvas>
JavaScript
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var x = 0,
y = 0,
xSpeed = 0,
ySpeed = 0,
elasticity = .8,
gravity = .2;
function draw() {
if (y > 145 && ySpeed > 0) {
ySpeed *= -1*elasticity;
}
window.requestAnimationFrame(draw);
ySpeed += gravity;
x += xSpeed;
y += ySpeed;
ctx.clearRect(0, 0, 250, 250);
ctx.fillRect(x, y, 10, 10);
}
function initCanvas(canvas) {
var canvas = document.getElementById(canvas);
ctx = canvas.getContext('2d');
window.requestAnimationFrame(draw);
}
initCanvas('canvas');