Blog Hero Image

HTML5 Animation Using Canvas Element

Jun 27, 2012
Santiago Valle
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 = '‘'’
 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);
       }

Latest insights