Simple Animation using the Canvas Element
Using the Canvas element in HTML5 you can create complex graphics and animations. Here we will show how to draw an image on a canvas and create a loop to bounce the image around an area of 150x150 pixels.
<body onload="drawCanvas();">
<div>
<canvas id="myCanvas" width="150" height="150">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
As you can see in our HTML we declare a single Canvas element and give it an ID of myCanvas which allows us to reference it later on in our script. If the current browser doesn't support the Canvas element then the inner content will be displayed instead.
In the Body tag we use the onload event to run our javascript.
var surface;
var happy;
var x = 50;
var y = 0;
var dirX = 1;
var dirY = 1;
function drawCanvas() {
// Get our Canvas element
surface = document.getElementById("myCanvas");
if (surface.getContext) {
// If Canvas is supported, load the image
happy = new Image();
happy.onload = loadingComplete;
happy.src = "images/happy.png";
}
}
function loadingComplete(e) {
// When the image has loaded begin the loop
setInterval(loop, 25);
}
function loop() {
// Each loop we move the image by altering its x/y position
// Grab the context
var surfaceContext = surface.getContext('2d');
// Clear the canvas to White
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
// Draw the image
surfaceContext.drawImage(happy, x, y);
x += dirX;
y += dirY;
if (x <= 0 || x > 150 - 23) {
dirX = -dirX;
}
if (y <= 0 || y > 150 - 23) {
dirY = -dirY;
}
}
Here is the finished example:
