JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<canvas id="funfun" width="400" height="300"></canvas>

CSS

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
body { padding: 5px; }    
canvas { border: solid 2px #777; }

JavaScript

var Tween = {
    "pos": {
        "x": 50,
        "y": 150
    },
    "ctx": null,
    "move": function() {
        Tween.pos.x += 2.5;
        if (Tween.pos.x < 350) {            
            Tween.ctx.clearRect(0, 0, 400, 300);
            Tween.ctx.fillStyle = "#F00";
            Tween.ctx.beginPath()
            Tween.ctx.arc(Tween.pos.x, 150, 50, 0, Math.PI * 2);
            Tween.ctx.fill();

            setTimeout(function() {
                Tween.move();
            }, 25);
        }
    }
};
window.onload = function() {
    Tween.ctx = document.getElementById('funfun').getContext('2d');
    Tween.move();
    
}