<canvas id="myCanvas"></canvas>
body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

canvas {
     border: 3px solid black;
 }
View Compiled
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;

const step = 5;
let x = 0;

let loop = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  
  ctx.beginPath();
  ctx.arc(x, 200, 50, 0, 2 * Math.PI);
  ctx.stroke(); 
  x = x + step;
  x === canvas.width + 50 && (x = -50)
  requestAnimationFrame(loop)
};

requestAnimationFrame(loop)



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.