HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas animation</title>
</head>
<body>
  <h1>Simple animation</h1>
  <canvas id="c" width="400" height="120" style="border:1px solid #ccc"></canvas>
  <script>
    var canvas = document.getElementById('c');
    var ctx = canvas.getContext('2d');
    var x = 0;

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#f97316';
      ctx.fillRect(x, 40, 40, 40);
      x += 2;
      if (x > canvas.width) x = 0;
      requestAnimationFrame(draw);
    }
    draw();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Canvas — Simple Animation