HTML5 Animation Using Canvas Element
Jun 27, 2012
With the recent mobile movement, it is important to make sure that you site is compatible with all operating systems; this usually means a move from Flash to HTML5. Unlike Flash, HTML5 can give you an animated experience that is compatible with all devices. Here, I will show you how to create a simple animation using HTML5 canvas element. To make the animation more dynamic, we will use different layers with several canvas objects.
Step 1: Edit images
The first thing we need to do is edit our images in Photoshop so they will have a png transparency. For this example, we used:
- miramax_logo.png
- videos.png
Step 2: Create the HTML for HTML5 Canvas Objects
Since HTML5 canvas element doesn’t support layers we need to find an alternative way to create them. The simplest way is to use a canvas element for each image animation.
<div id="animation">
<canvas id="canvas_logoMM" width="900" height="300"> </canvas>
<canvas id="canvas_Movie" width="900" height="300"> </canvas>
<canvas id="canvas_textMM" width="900" height="300"> </canvas>
</div>Step 3: Add JavaScript and CSS files
In our JavaScript file we are going to put all the logic that we need. In the CSS file, we will put all the styles.
<!DOCTYPE HTML>
<head>
<link type=“text/css” href=“style.css” rel=“stylesheet” />
<script type=“text/javascript” src=“miramax_canvas.js”> </script>
</head>
<body onLoad=“anim();”>
<section>
<div id=“animation”>
<canvas id=“canvas_logoMM” width=“900” height=“300”> </canvas>
<canvas id=“canvas_Movie” width=“900” height=“300”> </canvas>
<canvas id=“canvas_textMM” width=“900” height=“300”> </canvas>
</div>
</section>
</body>
</html>
Step 4: Create JavaScript functionality
function anim() {
var width = 900;
var height = 300;
var x = 0;
var intLogoY = 100;
var intCarX = 300;
var intCarAlpha = 0;
var imgLogoMM = new Image();
var imgMovieMove = new Image();
var layer_logo = document.getElementById(‘canvas_logoMM’);
var context_logoMM = layer_logo.getContext(‘2d’);
var layer_movie = document.getElementById(‘canvas_Movie’);
var context_Movie = layer_movie.getContext(‘2d’);
function init() {
imgLogoMM.src = “images/miramax_logo.png”;
imgMovieMove.src = “images/movies.png”;
}
function drawTextMM() {
var context_textMM = document.getElementById(‘canvas_textMM’).getContext(‘2d’);
//text shadow
context_textMM.shadowColor = ‘#222D3C'’
context_textMM.shadowOffsetX = '‘'’
context_textMM.shadowOffsetY = '‘'’
context_textMM.shadowBlur = '‘'’
//text and font
context_textMM.font = "“0pt Calibri"”
context_textMM.fillStyle = "“#fff";”// text color
context_textMM.fillText("C“S success",”30, 40);
context_textMM.font = “1“pt Calibri”;” context_textMM.fillText(“M“ramax challenged Oshyn to design an intuitive user experience “,“30, 70);
context_textMM.fillText(“along with a customized Content Management System… and Oshyn delivered”, 30, 90);
}
function drawLogoMM() {
context_logoMM.shadowOffsetX = 5;
context_logoMM.shadowOffsetY = 5;
context_logoMM.shadowBlur = 20;
context_logoMM.shadowColor = “#000”;
setInterval(moveTheLogo,100);
}
function drawMovie() {
context_Movie.shadowOffsetX = 5;
context_Movie.shadowOffsetY = 5;
context_Movie.shadowBlur = 20;
context_Movie.shadowColor = “#000”;
setInterval(moveTheMovie,100);
}
function drawLayers() {
setTimeout(drawLogoMM,300);
setTimeout(drawMovie,200);
setTimeout(drawTextMM,500);
}
function moveTheLogo() {
if (intLogoY > 0) {
intLogoY -= 15;
context_logoMM.clearRect(0,0,width,height);
context_logoMM.drawImage(imgLogoMM,600,intLogoY);
}
}
function moveTheMovie() {
if (intCarX > 0 ) {
intCarX -= 60;
context_Movie.clearRect(0,0,width,height);
context_Movie.drawImage(imgMovieMove,intCarX,0);
}
}
init();
drawLayers();
}
Breakdown of the code:
// Create an object to store images:
var imgLogoMM = new Image();
var imgMovieMove = new Image();
// Define the method that we need, in this case 2d drawing API method:
var layer_logo = document.getElementById(‘canvas_logoMM’);
var context_logoMM = layer_logo.getContext(‘2d’);
// Function to load the image files:
function init() {
imgLogoMM.src = “images/miramax_logo.png”;
imgMovieMove.src = “images/movies.png”;
}
// Function to draw a text with different font styles in a certain position of the canvas object:
function drawTextMM()
// This function uses intervals to move the image (miramax_logo.png) from the bottom to the top position of the canvas object:
function drawLogoMM()
moveTheLogo()
// This function uses intervals to move the image( movies.png) from the right to the left position of the canvas object:
function drawMovie()
moveTheMovie()
// This method is used to sequence the animation:
function drawLayers() {
setTimeout(drawLogoMM,300);
setTimeout(drawMovie,200);
setTimeout(drawTextMM,500);
}
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.