JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="600" height="300" id="cvs"></canvas>

JavaScript

//load the tween library
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'application/javascript';
script.src = "https://rawgit.com/sole/tween.js/master/src/Tween.js";
//
script.onload = function(){
    initCanvas();
    render();
    doTween();
};

head.appendChild(script);

var ctx;
var w;
var h;
var time;

var circle = Math.PI * 2;
var radius = 5;
var color = '#00ccff';
var tweenX = 0;
var tweenY = 200;

function doTween(){
    //NOTE THAT Y GOES FROM ZERO TO MATH.PI
    var from = {x:10, y: 0};
    var to = {x:w-10, y: Math.PI};
    var tw = new TWEEN.Tween(from);
    tw.to(to, 3000);
    tw.onUpdate(function(){
        tweenX = this.x;
        //THIS IS THE IMPORTANT BIT
        tweenY = h - (Math.sin(this.y) * h);
       // console.log("tweenY: " + tweenY);
    });
    tw.start();
};

function render(){
    TWEEN.update();
    //clear
    ctx.fillStyle = '#ffcc00';
	ctx.fillRect(0, 0, w, h);
    //draw circle
    ctx.beginPath();
	ctx.arc(tweenX,tweenY,radius,0,circle,false);
	ctx.fillStyle = color;
	ctx.fill();
	ctx.closePath();
    
    requestAnimationFrame(render);
}

function initCanvas(){
    var canvas = document.getElementById("cvs");
    w = canvas.width;
    h = canvas.height;
    ctx = canvas.getContext("2d");
    ctx.fillStyle = '#ffcc00';
	ctx.fillRect(0, 0, w, h);
}