var y,v;
var W,H;
var RADIUS = 20;
var dt = 0.1;
var g = -9.8;
// przygotowanie do rysowania
var canvas = document.getElementById('mycanvas');
W=240; H=180;
canvas.width = W;
canvas.height = H;
var ctx = canvas.getContext('2d');
// inicjalizacja
function init()
{
y=H/2;
v=0;
}
// pętla obliczeniowa i rysująca
loop=function()
{
y = y + v * dt;
v = v + g * dt;
if(y<RADIUS) v = -v;
//rysowanie punktu
ctx.clearRect(0,0,W,H);
ctx.strokeStyle = "rgb(0,0,0)";
ctx.beginPath();
ctx.arc(W/2,H-y,RADIUS,0,2*Math.PI); // kolko
ctx.stroke(); // rysuj
//kontynuuj petle
requestAnimationFrame(loop);
};
// start
init();
loop();
<body>
<canvas id="mycanvas" width="200" height="200" onclick="q()"></canvas>
canvas { border: 1px solid rgb(0,0,0); }