JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<canvas width="500" height="500" id="canvas"></canvas>

JavaScript

(function () {
  var startPoint = { x: 100, y: 150 },
      endPoint = { x: 200, y: 150 },
      ball = { x: startPoint.x, y: startPoint.y },
      canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');
  
  window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
  
  function draw() {
    
    var dx = endPoint.x - startPoint.x, 
        dy = endPoint.y - startPoint.y,
        a = (function () { if (dy !== 0) { return dx/dy; } else { return 0; }})(),
        b = startPoint.y - a*startPoint.x,
        y = function (x) { return a*x + b; };
        
    ball.x = ball.x + 1;
    ball.y = y(ball.x) + Math.sin(ball.x*0.1)*10;
    
    context.fillStyle = '#EEEEEE';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.strokeStyle = '#000000';
    context.strokeRect(1, 1, canvas.width-2, canvas.height-2);
    
    context.fillStyle = "#000000"; 
    context.beginPath();
    context.arc(ball.x, ball.y, 5, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
    
    window.requestAnimFrame(draw);
  }
  
  window.requestAnimFrame(draw);
  
})();