Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Frame by frame animation in HTML5 with canvas
Frame by frame animation in HTML5 canvas creates smooth animations by displaying a sequence of images in rapid succession, similar to traditional flipbook animation.
Basic Frame Animation Structure
The core concept involves cycling through numbered image files and drawing them onto the canvas at regular intervals using setInterval().
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Frame Animation</title>
</head>
<body>
<canvas id="animationCanvas" width="400" height="300" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('animationCanvas');
var context = canvas.getContext('2d');
var myImageNum = 1;
var lastImage = 5;
var img = new Image();
// Handle image loading and drawing
img.onload = function() {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, 0, 0);
};
// Animation timer - 15 FPS (1000ms / 15 frames)
var timer = setInterval(function() {
if (myImageNum > lastImage) {
clearInterval(timer);
console.log("Animation completed");
} else {
img.src = "images/left_hnd_" + (myImageNum++) + ".png";
}
}, 1000/15);
</script>
</body>
</html>
How It Works
-
Image Counter:
myImageNumtracks the current frame number -
Image Loading: The
img.onloadevent clears the canvas and draws the new frame -
Timer Loop:
setInterval()changes the image source every 67ms (15 FPS) - Animation End: Loop stops when all frames are displayed
Enhanced Version with Controls
<!DOCTYPE html>
<html>
<head>
<title>Advanced Frame Animation</title>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border: 1px solid #000;"></canvas>
<br>
<button onclick="startAnimation()">Start</button>
<button onclick="stopAnimation()">Stop</button>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var currentFrame = 1;
var totalFrames = 5;
var animationTimer = null;
var img = new Image();
img.onload = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 50, 50); // Center the image
};
function startAnimation() {
if (animationTimer) clearInterval(animationTimer);
currentFrame = 1;
animationTimer = setInterval(function() {
if (currentFrame > totalFrames) {
currentFrame = 1; // Loop animation
}
img.src = "images/frame_" + currentFrame + ".png";
currentFrame++;
}, 100); // 10 FPS
}
function stopAnimation() {
if (animationTimer) {
clearInterval(animationTimer);
animationTimer = null;
}
}
</script>
</body>
</html>
Key Parameters
| Parameter | Purpose | Example Value |
|---|---|---|
setInterval delay |
Frame rate control | 67ms (15 FPS) |
myImageNum |
Current frame counter | 1, 2, 3... |
lastImage |
Total frame count | 5 |
Performance Tips
- Preload Images: Load all frames before starting animation for smoother playback
- Optimize Frame Rate: 15-30 FPS is sufficient for most animations
-
Use requestAnimationFrame: For better performance than
setInterval - Image Format: PNG for transparency, JPEG for photographs
Conclusion
Frame by frame animation in HTML5 canvas requires cycling through image sequences using timers. The img.onload event ensures smooth transitions, while setInterval controls the animation speed for creating engaging visual effects.
Updated on: 2026-03-15T23:18:59+05:30
835 Views
Advertisements