Article Categories

Selected Reading

Perform basic HTML5 Canvas animation

Javascript Web Development Front End Scripts

HTML5 canvas provides the necessary methods to draw and manipulate graphics dynamically. Combined with JavaScript, we can create smooth animations by continuously redrawing the canvas content at regular intervals.

How Canvas Animation Works

Canvas animation involves three key steps:

Clear the canvas - Remove previous frame content
Draw new content - Render the updated animation frame
Repeat - Use timers to create continuous motion

Basic Rotating Image Animation

Here's a complete example that rotates an image around the canvas center:

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         var pattern = new Image();
         
         function animate(){
            pattern.src = '/html5/images/pattern.jpg';
            setInterval(drawShape, 100);
         }
         
         function drawShape(){
            // Get the canvas element
            var canvas = document.getElementById('mycanvas');
           
            // Check canvas support
            if (canvas.getContext){
               var ctx = canvas.getContext('2d');
               
               // Clear the canvas
               ctx.clearRect(0, 0, canvas.width, canvas.height);
               
               // Set drawing styles
               ctx.fillStyle = 'rgba(0,0,0,0.4)';
               ctx.strokeStyle = 'rgba(0,153,255,0.4)';
               
               // Save current state
               ctx.save();
               
               // Move to center of canvas
               ctx.translate(200, 200);
               
               // Calculate rotation based on current time
               var time = new Date();
               var rotation = ((2 * Math.PI) / 6) * time.getSeconds() + 
                             ((2 * Math.PI) / 6000) * time.getMilliseconds();
               ctx.rotate(rotation);
               
               // Move away from center for orbital effect
               ctx.translate(0, 50);
               
               // Draw the rotating image
               if (pattern.complete) {
                  ctx.drawImage(pattern, -25, -25, 50, 50);
               }
               
               // Restore canvas state
               ctx.restore();
            } else {
               alert('Canvas not supported in this browser.');
            }
         }
      </script>
   </head>
   <body onload="animate();">
      <canvas id="mycanvas" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
   </body>
</html>

Improved Animation with requestAnimationFrame

For smoother animations, use requestAnimationFrame() instead of setInterval():

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         function animateSmooth(){
            var canvas = document.getElementById('smoothcanvas');
            var ctx = canvas.getContext('2d');
            var angle = 0;
            
            function draw(){
               // Clear canvas
               ctx.clearRect(0, 0, canvas.width, canvas.height);
               
               // Save state
               ctx.save();
               
               // Move to center and rotate
               ctx.translate(200, 200);
               ctx.rotate(angle);
               
               // Draw animated rectangle
               ctx.fillStyle = 'rgba(255, 0, 0, 0.7)';
               ctx.fillRect(-25, -75, 50, 150);
               
               // Restore state
               ctx.restore();
               
               // Update angle for next frame
               angle += 0.05;
               
               // Request next animation frame
               requestAnimationFrame(draw);
            }
            
            // Start animation
            draw();
         }
      </script>
   </head>
   <body onload="animateSmooth();">
      <canvas id="smoothcanvas" width="400" height="400" style="border: 1px solid #000;"></canvas>
   </body>
</html>

Key Animation Concepts

Method	Frame Rate	Performance	Browser Support
`setInterval()`	Fixed (e.g., 10 FPS)	Can cause stuttering	Universal
`requestAnimationFrame()`	60 FPS (adaptive)	Smooth, optimized	Modern browsers

Common Animation Techniques

Translation - Use ctx.translate(x, y) to move objects
Rotation - Use ctx.rotate(angle) for spinning effects
Scaling - Use ctx.scale(x, y) to resize elements
State Management - Always use ctx.save() and ctx.restore()

Conclusion

HTML5 Canvas animation combines drawing methods with JavaScript timers to create dynamic visual effects. Use requestAnimationFrame() for optimal performance and always clear the canvas between frames for smooth animations.

Arjun Thakur

Updated on: 2026-03-15T23:18:59+05:30

362 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next