# Spot the bug - #191: Canvas Loop

**URL:** <https://forum.kirupa.com/t/spot-the-bug-191-canvas-loop/684015>\
**Category:** web dev\
**Created:** [November 13, 2026, 4:05pm UTC](https://forum.kirupa.com/t/spot-the-bug-191-canvas-loop/684015 "2026-11-13T16:05:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [November 13, 2026, 4:05pm UTC](https://forum.kirupa.com/t/spot-the-bug-191-canvas-loop/684015/1 "2026-11-13T16:05:25Z")

</div>

A quirky animation snippet with a sneaky bug.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Spot the Bug - Tiny Animation</title>
  <style>
    body { display:flex; align-items:center; justify-content:center; height:100vh; background:#111; color:#fff; margin:0; }
    #stage { width:200px; height:200px; position:relative; }
    .orb { width:40px; height:40px; border-radius:50%; background:#4af; position:absolute; top:80px; left:0; }
  </style>
</head>
<body>
  <div id="stage">
    <div class="orb" id="dot"></div>
  </div>
  <script>
    // Simple loop that animates the orb across the stage
    const dot = document.getElementById('dot');
    let t = 0;
    function animate(){
      t += 0.05;
      const x = (Math.sin(t) * 80) + 60; // quirky path
      dot.style.left = x + 'px';
      requestAnimationFrame(animate);
    }
    // Start immediately
    animate();
  </script>
</body>
</html>

```

Reply with what is broken and how you would fix it.
