HTML5 Animation Using Canvas Element

Jun 27, 2012
Santiago Valle

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 = '2';
 context_textMM.shadowOffsetY = '2';
 context_textMM.shadowBlur = '2';
//text and font	
 context_textMM.font = "40pt Calibri";
 context_textMM.fillStyle = "#fff"; // text color
 context_textMM.fillText("CMS success", 30, 40);
 context_textMM.font = "11pt Calibri";
 context_textMM.fillText("Miramax 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 de 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);        }