How to Animate Graphics on an HTML5 Canvas? (A Simple Example)

Use requestAnimationFrame() to implement HTML5 Canvas animation: first obtain the canvas and 2D context, and then loop to clear, update properties, and redraw; you can add collision detection, user interaction, and timing control.

To animate graphics on an HTML5 <canvas></canvas> , you repeatedly clear the canvas, update object properties (like position or color), and redraw—typically using requestAnimationFrame() for smooth, efficient frame timing.

Set up the canvas and context

Start by getting a reference to the canvas element and its 2D rendering context. This is your drawing surface and toolset.

• Use document.getElementById() or querySelector() to grab the canvas
• Call getContext('2d') to enable drawing commands
• Optionally set canvas width/height explicitly (avoid CSS scaling—it blurs graphics)

Draw a simple moving shape

For example, animate a red circle moving across the screen:

• Define variables like x , y , and dx (horizontal speed)
• In each frame: clear the canvas with clearRect() , update x = dx , then draw the circle with arc() and fill()
• Bounce it by reversing dx when x hits the left or right edge

Use requestAnimationFrame for smooth animation

Instead of setTimeout or setInterval , use requestAnimationFrame(callback) . It syncs with the browser's refresh rate (~60fps) and pauses when the tab is inactive.

• Call it at the end of your draw function to schedule the next frame
• Pass the same function recursively: function animate() { /* draw logic */ requestAnimationFrame(animate); }
• Start it once with animate() — no loops needed

Add interactivity or timing control

You can make animation respond to user input or run for a set duration:

• Listen for keydown to change speed or direction
• Use performance.now() to track elapsed time for easing, delays, or state changes
• Stop animation by skipping the next requestAnimationFrame call — no need to “cancel” it

The above is the detailed content of How to Animate Graphics on an HTML5 Canvas? (A Simple Example). For more information, please follow other related articles on the PHP Chinese website!