Creating Animation using the HTML 5 Canvas Tag

Tutorial: Page (1) of 1 - 10/19/09

Creating Animation using the HTML 5 Canvas Tag Baked into HTML 5 is a new tag element called CANVAS By Matthew David

There is a battle Royale happening in the Web-O-Sphere between technologies that enable you to create cool, interactive animations online. The current King of the Hill is Adobe's Flash, with Microsoft's SilverLight coming in guns blazing. The black horse contender is the emerging HTML 5 standard. Baked into HTML 5 is a new tag element called CANVAS. Not sure what CANVAS is? Do you own a Mac? Most of the Widgets you run on your Dashboard are built with HTML 5's CANVAS element. In this article you will learn how to easily animate drawing using the new CANVAS tag built into HTML 5.

The CANVAS element gives you the capability to build and create Flash-like applications without having to use Flash. It is in the early stages of development, but some of the things you can already accomplish are very impressive. If you are running Google's Chrome, FireFox or Safari then you will want to check out http://www.chromeexperiments.com/ a site the pushes the capabilities of what can be done in your browser. In particular, look at the CANVAS experiments. Is it me, or do they look very Flash-like?

Creating CANVAS animation
There are two parts you need to create a visual element using CANVAS. The first is the CANVAS tag itself used in your HTML. In many ways, the CANVAS tag is very much the same as any other element used in HTML. Here is an example:

The tag uses the new HTML5 element CANVAS as the opening and closing tag. Width and height attributes specify the size of the CANVAS space on the screen. It is the ID that is important. Here the ID is named "myCanvas." Using JavaScript, you can now program the illustration that will appear in the CANVAS tag. The following example creates a black, outlined square that appears in your Web page using JavaScript and Canvas:
<html>
<head>
    <title>Basic Canvas Drawing</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('myCanvas');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
</head>
<body onload="draw();">
    <canvas id="myCanvas" width="150" height="150"></canvas>
</body>
</html>

So you now have a basic rectangle on the page. Big deal, right? Using JavaScript you can now begin to programmatically paint your object. The following shows two semi-transparent intersecting squares.

<html>
<head>
<script type="application/x-javascript">
    function draw() {
      var canvas = document.getElementById("myCanvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(0,0,500)";
        ctx.fillRect (10, 10, 150, 150);
        ctx.fillStyle = "rgba(0, 300, 0, 0.5)";
        ctx.fillRect (75, 75, 150, 150);
      }
    }
</script>
</head>
<body onload="draw();">
   <canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>

Adding Animation to your Canvas
Animation requires additional work. To make your life easier there is a great JavaSript library called CAKE (Canvas Animation Kit Experiment) that you can download at http://code.google.com/p/cakejs/. Using the CAKE library you can easily create CANVAS based animation. The following code will create a pulsing blue circle:

To accomplish the animation you are using the SCALE method. The effect is a very similar to Adobe's Flash, but with the benefit of running correctly on Web browsers found on mobile devices such as the iPhone, MyTouch and Palm Pre.
The next step you need to take is to create more complex solutions using CANVAS. There are a host of great web sites to help you. A good place to start is Mozilla's own Canvas Tutorial site (https://developer.mozilla.org/en/Canvas_tutorial). You will find in-depth coverage for what you can and cannot do with CANVAS. You may well be amazed at what you can do.

Page: 1

Matthew has written four Flash books, contributed to a dozen Web books, and has published over 400 articles. He is passionate about exposing Internet's potential for all of us. Matthew works directly with many companies as a business strategist coaching IT architects and business leaders to work tightly with each other towards common goals.

Related Sites: Digital Producer , Audio Video Producer , Corporate Media News , Digital Media Designer , Oceania , Flash
Related Newsletter: DMN Newsletter , Pixels Newsletter , Digital Media Net , DMNForums , Tutorial Finder

To Comment on This Article, Click HERE

Most Recent Reader Comments:

Creating Animation using the HTML 5 Canvas Tag by DMN Editorial at Oct. 19, 2009 6:02 pm gmt

Click Here To Read All Posts
Must be Registered to Respond (Free Registration!!!, CLICK HERE)