JSFiddle - React, Tailwind, and code Playground

JavaScript

const objects = [
		{x: 100, y: 30, vx: 1, vy: 0, color: 'purple'},
		{x: 100, y: 100, vx: 0, vy: 0.5, color: 'red'},
	];
	const canvas = document.createElement('canvas');
	canvas.style.border = '1px solid red'; // możesz usunąć tę linijkę
	canvas.width = 500;
	canvas.height = 500;
	document.body.append(canvas);

	const ctx = canvas.getContext('2d');
	ctx.fillStyle = 'purple';
	ctx.fillRect(100, 100, 40, 40);



	let x = 100;
	setInterval(() => {  
	  objects.forEach(obj => {
	  	obj.x += obj.vx;
	  	obj.y += obj.vy;
	  	obj.vy += 0.03;
	  });

	  ctx.clearRect(0, 0, canvas.width, canvas.height);	  
	  objects.forEach(obj => {
		  ctx.fillStyle = obj.color;
		  ctx.fillRect(obj.x, obj.y, 40, 40);
	  });
	}, 16);