Canvas Animation in HTML5

How to create the animation Frames using canvas HTML5

Canvas Animations

Animation sare used in interactive and application devolopment, To create the animations in the canvas canvas, We need the requestanimateframe of the window object which enables the browser to create the animation

Animating rectangle frame

 <h1 style="color:green;">Moves the rectangle animated frame towards right</h1>
    <canvas id="myCanvas" width="600" height="300"></canvas>
    <script>
        window.requestAnimFrame = (function (callback) {
            return window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   window.mozRequestAnimationFrame ||
                   window.oRequestAnimationFrame ||
                   window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();

        function drawRectangle(myRectangle, context) {
            context.beginPath();
            context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
            context.fillStyle = 'blue';
            context.fill();
            context.lineWidth = myRectangle.borderWidth;
            context.strokeStyle = 'red';
            context.stroke();
        }
        function animate(myRectangle, canvas, context, startTime) {
            var time = (new Date()).getTime() - startTime;
            var linearSpeed = 100;
            var newX = linearSpeed * time / 1000;
            if (newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
                myRectangle.x = newX;
            }
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawRectangle(myRectangle, context);
            requestAnimFrame(function () {
                animate(myRectangle, canvas, context, startTime);
            });
        }
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        var myRectangle = {
            x: 20,
            y: 50,
            width: 200,
            height: 100,
            borderWidth: 10
        };

        drawRectangle(myRectangle, context);
        setTimeout(function () {
            var startTime = (new Date()).getTime();
            animate(myRectangle, canvas, context, startTime);
        }, 1000);
    </script>

In the above code snippet we have defined the canvas animation with the frame moving rightwards
We have canvas element with width ="600", height ="300", id as "mycanvas".
In the nextline we are having the script tag to define the animation
window.requestAnimFram(function (callback) - We are assigning the window.requestAnimframe to define the function (call back)

return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
- This defines the animation in different browsers
In the nextline we are calling the function (call back) to window.setTimeout(callback, 1000 / 60); with the values as 1000/60
In the nextline we are having function drawRectangle(myRectangle, context) as function draw rectangle which includes with myrectangle and context to define the rectangle size, shape and color with the given values
We are having the myrectangle values as x="20", y="50", width="200", height="100"
In the next step we are declaring another function as function animate(myRectangle, canvas, context, startTime) which defines the function with myrectangle, canvas, context, starttime
In the nextline we are having var time = (new Date()).getTime() - startTime; which is used to start the animation by checking the date, time.
var linearSpeed = 100; - It defines the animation speed with 100.
var newX = linearSpeed * time / 1000; - It defines the animation starting value from the x position with the time, speed.
In the next line we are giving the if condition as if (newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) - It defines as if the newX value is less than the canvas width(600)-myrectangleborderwidth(10/2=5). It enters in to the myrectanglex=newx
context.clearRect(0, 0, canvas.width, canvas.height); - It defines the set the value of the rectangle in the canvas
drawRectangle(myRectangle, context); - It Calls the function of drawrectangle with myrectangle, context
requestAnimFrame(function () {
animate(myRectangle, canvas, context, startTime);
}); - It calls the all the functions to animate the rectangle
var canvas = document.getElementById('myCanvas'); - in this line we are giving the id as "mycanvas"
var context = canvas.getContext('2d'); - It defines the context to the canvas
drawRectangle(myRectangle, context); - It calls the function drawrectangle
setTimeout(function () - It is the function as setTimeout(), In this function we have declared
var startTime = (new Date()).getTime(); - Start time with the new date to get date
animate(myRectangle, canvas, context, startTime);
}, 1000); -It calls the function to animate the function of the rectangle with the given values