Source :animating balloon

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8“>
<meta http-equiv=”X-UA-Compatiblecontent=”IE=edge,chrome=1“>
<meta name=”viewportcontent=”width=device-width, initial-scale=1“>
<meta name=”apple-mobile-web-app-capablecontent=”yes“>
<meta property=”og:imagecontent=”http://www.pearsonhighered.com/resources/images/pearson-logo-blue.png“>
<link rel=”icontype=”image/x-iconhref=”/bc/bc_0global/img/favicon.ico“>
<link rel=”shortcut icontype=”image/x-iconhref=”/bc/bc_0global/img/favicon.ico“>
<title>Canvas Example – Organized Code – Animation Image Movement</title>
<style type=”text/css“>
#gameCanvas {
border: thin solid #000;
}
</style>
<link rel=”stylesheethref=”../../dmp.css“>
</head>
<body>
<canvas id=”gameCanvaswidth=”1136height=”640“>
Your browser does not support canvas.
</canvas>
<script>
var myCanvas = document.getElementById(“gameCanvas”);
var myContext = myCanvas.getContext(“2d”);
var balloon = new Image();
balloon.src = “images/water-balloon.png”;
var y = 0;
main();
function main()
{
// 1. Take care of checking image loading
balloon.onload = function () {
// 2. Invoke startGame() when images are ready
startGame();
};
}
function startGame()
{
updateGame();
window.requestAnimationFrame(drawGame);
}
function updateGame()
{
// 1. Update values of variables,
// such as x and y coordinates of a sprite
y += 2;
// 2. Invoke itself again after 33 milliseconds,
// like this:
window.setTimeout(updateGame, 33);
}
function drawGame()
{
// 1. Erase the context before drawing, like this:
myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
// 2. Draw images and shapes on the context
myContext.drawImage(balloon, 300, y);
// 3. Invoke itself again to redraw context
// next time the browser is ready, like this:
window.requestAnimationFrame(drawGame);
}
</script>
<footer id=”dmp3-content-footer“></footer>
<script src=”../../dmp.js“></script>
</body>
</html>