JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script src="/A2EB891D63C8/avg_ls_dom.js" type="text/javascript"></script><script type="text/javascript">
function DrawCircle(Color){
    var cxt=c.getContext("2d");
    cxt.fillStyle=Color;
    cxt.beginPath();
    cxt.arc(x,c.height/2,30,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
}
function Update(){
    DrawCircle("#FFFFFF");
    if(x>c.width) direction="left";
    if(x<0)  direction="right";
    if(direction=="right") x++;
    if(direction=="left") x--;
    DrawCircle("#FF0000");
}

var c=document.getElementById("myCanvas");
var x=c.width/2;
var direction="right";
setInterval(Update,30);
</script>

</body>
</html>