Like HowStuffWorks on Facebook!

How HTML5 Works


The Canvas

One of the most important new features to HTML5 is the canvas. The canvas feature lets you identify a section of a Web page, draw content within it and add interactive functionality. All of this is possible with through a combination of HTML and JavaScript code. Let's look at the three parts you'll need to set up a canvas in HTML5:

Part 1: Use the <canvas> tag to target a rectangular portion of your computer screen for a new canvas window. You can specify the height and width of the canvas, measured from its upper-left corner. The identity attribute (id) for the canvas is important because you'll need it to match its corresponding JavaScript code. The following is an example of using the canvas tag in HTML5 code:

<canvas id="sampleCanvas"

width="400"

height="300>

If you see this text, your browser

does not have HTML5 canvas support.

</canvas>

Part 2: Create the JavaScript that draws content into the canvas. Later, we'll find out how to add and manage the JavaScript code associated with an HTML5 Web page. Here, let's just look at some sample JavaScript you can use for canvas objects. The following code draws a rectangle within the canvas above:

function drawRectangle() {

var targetCanvas = document.getElementById("sampleCanvas");

var rectContext = sampleCanvas.getContext("2d");

rectContext.fillStyle = "blue";

rectContext.fillRect(50, 25, 150, 100);

}

This function draws a solid blue rectangle within your canvas. The two "var" lines create variables you can use. The first (targetCanvas) identifies the canvas element you're targeting using its ID from the HTML. The second (rectContext) sets up a two-dimensional context for drawing. Think of the context as a clear layer of glass laid on top of the canvas, and you'll call functions to draw on that glass.

The "fillStyle" line identifies the color blue by name, which HTML recognizes and associates with one of its named colors. You can also use any color, pattern or gradient as you would when writing style code in HTML or CSS. The "fillRect" line draws the rectangle starting at an offset from the upper left, the first two numbers being the x and y offsets as if the upper left of the canvas was at coordinates (0,0). The second two numbers indicate the width and height of the rectangle, respectively.

Part 3: Call the JavaScript function from the HTML code. This ties the two pieces together. You could call the function as soon as the Web page loads, which makes sense if you're using canvas to draw interactive page contents that need to appear as soon as the page loads. Another option is to create a button, menu or other element in the HTML that triggers the drawing event. The following is an example of a button you could use to run the example script above:

<button type="button"

onclick="drawRectangle()">

Click here to see the drawing.

</button>

Dive Into HTML5 has an easy-to-follow guide to creating canvas elements for your Web pages. In addition, a reliable HTML5 reference should provide extensive resources for drawing sophisticated graphics, both still and moving. If you want to make extensive use of the canvas in HTML5, you'll need to be comfortable programming in JavaScript. Next, let's explore how CSS3 creates the look and feel of an HTML5 Web page.