HTML5 Canvas animation

In HTML5 To draw image animation effects in HTML canvas, you need to draw each frame of the image and then transition from one frame to the next in a very short time to create the animation effect.

Online examples

To draw an image animation effect in HTML5To draw animations on a canvas, you need to draw and redraw the frames of the animation on the canvas. You need to do this very quickly to make many images look like an animation.
To achieve the best performance for animations, requestAnimationFrame uses a callback function on the window object. You can call this function and pass another function to be called when the browser is ready to draw the next frame of the animation as an argument.
When the browser is preparing to render the next frame, by signaling the application, the browser can enable hardware acceleration for animations and coordinate frame redraws with other redrawing activities in the browser. Compared to timing the drawing of animation frames with the setTimeout() function in JavaScript, the overall experience should be much better.
Here is a code example:

function animate() {
　　　　reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start =　+new Date();
　　　callback(start);
　　　finish =　+new Date();
　　　self.timeout =　1000/60　-　(finish　-　start);
　　}, self.timeout);
　});
　　　　reqAnimFrame(animate);
　　　　draw();
}

The animate() function first gets a reference to the requestAnimationFrame() function. Note that this function may have different names in different browsers. Set the variable reqAnimFrame to all these possible functions that are not null.
Secondly, reqAnimFrame() calls the function, passing the animate() function as a parameter. Therefore, when the browser is ready to draw the next frame, it calls the function with animate().
Thirdly, the animate() function calls the draw() function. draw() is not shown in the above example. It should do is, first clear the canvas (or the number of canvases that need to be cleared), and then draw the next frame of the animation.
In the above example, another thing not shown is that animate() should call a function once to start the animation. If not, requestAnimationFrame() will never call the function, and the animation loop will never start.
This is an example of an animation where a single rectangle moves on the canvas:

The code for the canvas animation is as follows:

<canvas id="ex1" width="500" height="170" style="border:　1px solid #cccccc;">
HTML5　Canvas not supported
</canvas>
<script>
var x = 0;
var y =　15;
var speed =　5;
function animate() {
reqAnimFrame = (window.webkitRequestAnimationFrame ||
　window.mozRequestAnimationFrame ||
　window.oRequestAnimationFrame ||
　window.msRequestAnimationFrame ||
　function(callback) {
　　var self = this, start, finish;
　　return window.setTimeout(function() {
　　　start =　+new Date();
　　　callback(start);
　　　finish =　+new Date();
　　　self.timeout =　1000/60　-　(finish　-　start);
　　}, self.timeout);
　});
reqAnimFrame(animate);
x　+= speed;
if(x <= 0 || x >=　475{
speed =　-speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, y,　500,　170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y,　25,　25);
}
animate();
</script>