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(canv,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(canv){     DrawCircle(c,"#FFFFFF");     if(x>c.width) direction="left";     if(x<0)  direction="right";     if(direction=="right") x++;     if(direction=="left") x--;     DrawCircle(c,"#FF0000"); }  var c=document.getElementById("myCanvas"); var x=c.width/2; var direction="right"; setInterval(Update(c),300); </script>  </body> </html>