HTML5 Animating Sequence of Images example

Write code here

J | B | A

<!DOCTYPE html />
<html>
<head>
    <title>Drawing images with sequence</title>
    <meta charset="UTF-8" />
    
    <script type="text/javascript">
        var canvas;
        var context;
        var photo;
        var timer;
        var count = 0;

function StartAnimation() {
            img = new Image();
            canvas = document.getElementById("Canvas1");
            context = canvas.getContext("2d");
            AnimateNow();
            img.src = 'images/image1.JPG';
        }

function AnimateNow() {
            count++;
            img.src = 'images/image' + count + '.JPG';
            context.drawImage(img, 50, 60, 120, 151);
            
            timer = setTimeout(AnimateNow, 100);
            
            if (count == 8) {
                StopAnimation();
            }
        }

function StopAnimation() {
            count = 0;
            clearTimeout(timer);
        }

function ResetCanvas() {
            count = 0;
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</head>
<body>
    
    <canvas id="Canvas1" width="600" height="400" style="border:5px solid green;">
        <p>Canvas is not supported in your browser</p>
    </canvas>
    <br />
    <input type="button" onclick="StartAnimation()" value="Start Animation" />
    <input type="button" onclick="StopAnimation()" value="Stop Animation" />
    <input type="button" onclick="ResetCanvas()" value="Reset" />
</body>
</html>

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

HTML5 > Animating Sequence Of Images

Write code here

Output