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>