Tutorial: Page (1) of 1 - 06/13/09 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Rich Illustration Control with the new HTML5 CANVAS Tag for your iPhone

HTML5 supports a new 2D and 3D illustration control called the CANVAS tag By Matthew David

HTML5 supports a new 2D and 3D illustration control called the CANVAS tag. The iPhone already supports illustration using the new CANVAS tag. In this article you will learn how you can create illustrations that will run in Mobile Safari.

The basics of working with the CANVAS Tag
HTML 5 is finally addressing a problem that has plagued Web designers since day one: how to create illustrations on the Web. Up to this point the only method of adequately adding illustration, or vector based imagery, to the Web was through third party plugins such as Adobe's Flash. The CANVAS tag now gives you the opportunity to create your own illustrations natively supported in HTML 5 compliant browsers, such as Apple's Mobile Safari found in the iPhone and iPod Touch.

There are some caveats when working with the CANVAS tag in Mobile Safari. The biggest is the space on the screen. With Mobile Safari open you have a screen space of 320 x 396 pixels. In addition to this, Mobile Safari is slower to render complex designs. With that said, you cannot render any CANVAS element in Microsoft's Internet Explorer 8.
Creating CANVAS images is not too hard. You have some basic instructions you need to add to the screen. The first is to define the size of the CANVAS area, very much in the same way that you would define the width and height of an image in HTML. The following code creates the space where your CANVAS drawn element will appear:



<html>
<body>
   <canvas id="myCanvas" width="320" height="396"></canvas>
 </body>
</html>

You will see that there is an ID with the name "myCanvas" added to the element. The illustration placed in the CANBVAS tag will be designed using JavaScript. The following script creates a basic cube:


<script type="application/x-javascript">
function draw() {
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgba(0, 0, 200, 1)";
 ctx.fillRect (0, 0, 150, 250);
}
  </script>


What is happening here is that you are creating a function called "draw" that is evoking a variable called "canvas" that associates the illustration you are creating with the HTML CANVAS tag with the ID of "myCanvas." A second function, "ctx", is describing the illustration as two dimensional (2d); the image is 0 pixels in from the left hand side and top borders of the browser window with a physical size of 150 pixels in width and height (ctx.fillRect (0, 0, 150, 150);). A fillStyle method defines the color in RGBA as a dark blue. When previewed in Mobile Safari your image looks like this:

This may not be too exciting, but it is the foundation of what you can do with the CANVAS tag. Bezier curves and gradients can also be applied.

Adding JavaScript to your 2D Canvas illustration
As you can see, the CANVAS tag relies heavily on JavaScript to create the actual image. With this knowledge, you can create complex and fun animations using JavaScript to do the heavy lifting. The following example creates a set of random ribbon like lines to be drawn on the screen creating a "screen saver" like effect in Mobile Safari:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Color</title>
 </head>
 <body>
  <canvas width="320" height="396"></canvas>
   <script>
    var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 
   var lastX = context.canvas.width * Math.random();
   var lastY = context.canvas.height * Math.random();
   var hue = 0;
   function line() {
     context.save();
     context.translate(context.canvas.width/2, context.canvas.height/2);
     context.scale(0.9, 0.9);
     context.translate(-context.canvas.width/2, -context.canvas.height/2);
     context.beginPath();
     context.lineWidth = 5 + Math.random() * 50;
     context.moveTo(lastX, lastY);
     lastX = context.canvas.width * Math.random();
     lastY = context.canvas.height * Math.random();
     context.bezierCurveTo(context.canvas.width * Math.random(),
                           context.canvas.height * Math.random(),
                           context.canvas.width * Math.random(),
                           context.canvas.height * Math.random(),
                           lastX, lastY);
 
     hue = hue + 100 * Math.random();
     context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
     context.shadowColor = 'white';
     context.shadowBlur = 25;
     context.stroke();
     context.restore();
   }
   setInterval(line, 100);
 
   function blank() {
     context.fillStyle = 'rgba(0,0,0,0.1)';
     context.fillRect(0, 0, context.canvas.width, context.canvas.height);
   }
   setInterval(blank, 100);
 
  </script>
 
 </body>
</html>

The result should look like this:

Adding 3D
The CANVAS tag also supports perspective 3D, a simplified version of 3D. This, too, is supported in Mobile Safari but the rendering is very slow. The following is an example of a 2D image implemented on a 3D CANVAS object:

As you can see from these simple examples, you can duplicate the visual effects traditionally associated with solutions such as Adobe's Flash easily in HTML using the new CANVAS tag. As a designer, this gives you much greater depth and control in creating a Web site experiences.


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 Keywords:HTML5, Cavas tag, illustration, Mobile Safari

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved