HTML5 Start, stop and cancel animation example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
	</head>
<body>
<h1>Start, stop and cancel HTML animation </h1>
    <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" />

function StartAnimation() {

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

img.addEventListener("load", function () {
                timer = setInterval(AnimateNow, 10);
            }, false);
            img.src = '/HTPictures/Generics/5-635772074334820528.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>
</body>
</html>

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

HTML5 > Start, Stop And Cancel Animation

Write code here

Output