HTML5 Canvas Animation example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
	</head>
<body>
	 <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);
            };
        })();

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>
</body>
</html>

Note: We DO NOT save your trial code in our database.

HTML5 > Canvas Animation

Write code here

Output