JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

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

CSS

canvas{border:1px solid #000;}

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 600;
canvas.height = 200;

// Ball stuffs
var x = 0;
    y =  0,
    angle = 0;

function drawBall(){
     x+= 0.5;    // this is the speed at which the ball moves to the right
     y+= Math.sin(angle);
     angle+=0.008; // To get exactly what you want play with this line

     ctx.clearRect(0,0,600,400);
     ctx.beginPath();
     ctx.arc(x,y,5,0,360);
     ctx.fill();

    if(y>=canvas.height){
      angle = -angle; // if the ball hits the bottom of the canvas reverse the angle.
    }
    setTimeout(drawBall, 10);
}

drawBall();