Canvas Marching Ants Animation

A “marching ants” border is a dashed outline whose dash phase moves over time. On Canvas, combine setLineDash(), lineDashOffset, and requestAnimationFrame().

The demo below uses vanilla JavaScript and pauses automatically when the user prefers reduced motion.

Working marching ants demo Top ↑

Core animation code Top ↑

ctx.setLineDash([8, 6]);
let offset = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineDashOffset = offset--;
  ctx.strokeRect(40, 35, 400, 145);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Why requestAnimationFrame() is better than setTimeout() here Top ↑

requestAnimationFrame() synchronizes visual updates with the browser's rendering cycle and is normally the better choice for Canvas animation. Keep a pause control for long-running animation and consider prefers-reduced-motion when the motion is not essential.

Common mistakes Top ↑

• Creating a new timer on every control change.
• Forgetting to clear and redraw the frame.
• Using stroke() after strokeRect(); strokeRect() paints immediately.
• Running decorative motion when the user requests reduced motion.
• Using zero-length dash and gap controls that make the effect confusing.

Frequently asked questions Top ↑

What creates the marching ants effect? Top ↑

A repeating dash pattern plus a lineDashOffset value that changes over successive animation frames.

Can the direction be reversed? Top ↑

Yes. Increment the offset instead of decrementing it, or vice versa.

Do I need jQuery for this animation? Top ↑

No. Canvas and requestAnimationFrame() are native browser APIs.

Can I change the dash pattern while it runs? Top ↑

Yes. Update setLineDash() values before drawing each frame.

Should the animation always autoplay? Top ↑

Not necessarily. Provide a pause control and respect reduced-motion preferences for nonessential animation.

Related Canvas tutorials Top ↑

lineDashOffset | setLineDash() | strokeRect() | JavaScript events | Canvas tutorial

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: