Start, stop and cancel animation in HTML5

How to start, stop and cancel animation in HTML5 canvas?

In last post, we learnt how to create a simple HTML5 canvas animation that keeps running.

In this post, we shall learn how to control this animation using HTML5 button elements.

Output

Controlling HTML5 animation

In this example, we shall render an image instead of a rectangle. Here is the HTML code snippets for this animation.

HTML Code

<body>
    <h2>TechFunda.com</h2>
    <canvas id="Canvas1" width="400" height="300" style="border:1px solid green;">
        Canvas is not supported in your browser
    </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>

In above code snippet, we have three buttons for Start, Stop and Cancel animation respectively. On click on these buttons, we call StartAnimation(), StopAnimation and ResetCanvas() function respectively.

JavaScript Code

<script type="text/javascript">
        var canvas;
        var context;
        var img;
        var x = 50;
        var y = 60;
        var timer;
        var imgW = 50;
        var imgH = 10;

        function StartAnimation() {

            img = new Image();
            canvas = document.getElementById("Canvas1");
            context = canvas.getContext("2d");

            img.addEventListener("load", function () {
                timer = setInterval(AnimateNow, 10);
            }, false);
            img.src = '../button1.gif';
        }

        function AnimateNow() {
            x++;
            y++;
            imgW++;
            imgH++;

            context.drawImage(img, x, y, imgW, imgH);

            if (y == canvas.height) {
                ResetCanvas();
                StopAnimation();
                StartAnimation();
            }
        }

        function StopAnimation() {
            clearInterval(timer);

            x = 50;
            y = 60;
            imgW = 50;
            imgH = 10;
        }

        function ResetCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
    </script>

In above code snippet, we have couple of page level variables that holds canvas, context, image, x axis, y axis, timer and image width and height.

StartAnimation() function

In this function, first we instantiate the JavaScript Image object and hold it in img variable. List previous post, here also we have hold context and canvas int respective variables. The initial value for x and y coordinates are set to 50 and 60. The initial value for image is set to 50 and 10 (width and height) respectively.

When this function is called, we add a event listener on the load event of the image that calls a function in which setInterval function is being called.

At last we are setting the src (path) of the image to load in the canvas.

AnimateNow() function

In this function, we increase the height, width, x axis and y axis values and draw the image to respective x and y axis and image height and width.

When the value of y axis is equal to height of the canvas, we call ResetCanvas(), StopAnimation() and StartAnimation() function thatn will clear the canvas, stop the animation and re-start the animation.

StopAnimation() function

This function simply calls clearInterval function with the timer handle that stops the execution of setInterval function (timer function). After that reset the value of x, y, imgH and imgW variables.

ResetCanvas() function

In this function, we are calling clearRect function that will clear the rectangle starting from top-left (0, 0) to bottom right (canvas.width, canvas.height)

Views: 15702 | Post Order: 113