1. Technology

HTML 5 Canvas Tutorial

How to Use the HTML 5 Tag CANVAS

By

The <canvas> tag in HTML 5 is a really useful tool that allows web designers to draw graphics using a script like JavaScript to build the image. This can be used to create things like:

  • online games
  • clocks
  • stock tickers
  • graphs
  • rotating photo gallery
  • and more...

What You Need to Use the <canvas> Tag

First, you need a basic understanding of HTML and JavaScript.

You also need a browser that supports canvas. Browsers that I know support canvas include:

Other browsers and versions may support the canvas tag as well, but those are reliable.

Begin with the <canvas> Tag

When using the canvas tag, the first thing you need to do is add the tag to your HTML 5 document:

<canvas id="basic-canvas" width="200" height="300"></canvas>

This will create a blank space on your page, as we haven’t placed any information on the canvas.

My example has three attributes: id, height, and width. The ID gives this canvas the unique name of basic-canvas. The height and width specify how much space the canvas should take up. You can also specify the height and width with CSS.

What About Browsers that Don’t Render Canvas?

The best way to handle this is to place alternative content inside the canvas tag.

<canvas id="basic-canvas-with-alt" width="200" height="300">
  <img src="http://0.tqn.com/d/webdesign/1/0/v/M/1/shasta_dinner.jpg" alt="Shasta looks hungry" />
</canvas>

You can place an image tag (as I did in my example) or text or whatever HTML content you need to display if the canvas tag isn’t supported. This works exactly like the <object> tag in HTML. If the browser supports the canvas tag, the contents inside will be ignored. And if the browser does not support the canvas tag, the contents will be displayed.

I will also show you a way you can use your script to test for browsers that don’t support canvas and display alternate content using the script itself.

Draw a Square on Your Canvas

As I’ve said, the canvas tag uses JavaScript to draw directly on the web page. So in order to get anything to show up on your canvas, you need to add a script to your document:

<script type="text/javascript">
  function drawSquare () {
    var canvas = document.getElementById('draw-square');
    if (canvas.getContext) {
      var context = canvas.getContext('2d');
      
      context.fillStyle = "rgb(150,29,28)";
      context.fillRect (2,2,96,96);
    } else {
      // put code for browsers that don't support canvas here
    }
  } </script>

The first thing this script does is find the element with the id draw-square:

var canvas = document.getElementById('draw-square');

Then it checks to see if the browser supports the context method on this element. This is an easy way to make sure that your canvas will only display on browsers that support the tag.

if (canvas.getContext) { ... }

The context is the rendering context that is used to manipulate content that is displayed. You should use a 2-dimensional (2d) rendering context. But in the future, 3-dimensional context may be supported.

Once I have the context, I need to build my square with the two lines:

context.fillStyle = "rgb(150,29,28)";
context.fillRect (2,2,96,96);

I created a square that is red (rgb(150,29,28)) and is positioned 2 pixels down and 2 pixels over and 96 pixels wide and high (fillRect (2,2,96,96)).

Then, in the else section of my script, I can put any JavaScript I want to display if the canvas element isn’t supported.

In your HTML, you should include a canvas tag that is at least as large as the square you're drawing plus any space around it. So my canvas has to be at least 98x98 pixels. I made it 100x100:

<canvas id="draw-square" width="100" height="100"></canvas>

The last thing you need to do is load the script when the body of your page loads.

<body onload="drawSquare();">

Here are some examples of using canvas. These examples are very simple, and represent what we learned in this article.

©2014 About.com. All rights reserved.