HTML5 Canvas Introduction

The <canvas> element in HTML5 can be used to draw graphics using client-side scripting, typically JavaScript. You can use the <canvas> element, for instance, to draw graphs or animations.

Using the canvas element is easy, but you do need a basic understanding of HTML and JavaScript.

Support for Canvas

Not all modern browsers support the canvas element, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9.

Begin with the Canvas

The <canvas> element represents a rectangular area on an HTML page. When using the <canvas> element, the first thing you need to do is add the tag to your HTML5 document:

<canvas id="myCanvas" width="300" height="200"></canvas>

With the canvas element, you will always want to specify an id attribute because you will reference it from your JavaScript code.

In addition, specify width and height attributes to define the size of the canvas. You can style the canvas element, and have more than one in your document.

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;" ></canvas>

What do you do if the browser does not support the canvas element? There are a few options. An easy approach is to place alternative content inside the canvas tags. For example:

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;" >
    <span>Sorry, the example could not be displayed.  Your browser does not support the canvas element.</span>
</canvas>

Example

You can place text, an image element, or whatever HTML content you need to display if the canvas tag is not supported. If the browser supports the canvas tag, the contents inside will be ignored. If the browser does not support the canvas tag, the contents will be displayed.

An alternative to this approach is to test the browser for this feature ability using JavaScript. For example, you can create a function that tests the ability to create a canvas element. Then, based on the results, you can take specific actions.

Here is an example regarding how to check for canvas support using JavaScript. In the following example, we use a conditional statement, to test for support.

if (!isCanvasSupported()){ .. not supported so do something ... }
function isCanvasSupported() {
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}

Draw Onto the Canvas

To draw onto the canvas, we will need the assistance of JavaScript.

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FFAA00";
    ctx.fillRect(75, 50, 150, 100);
</script>

Canvas Coordinates

The canvas is a two-dimensional grid. The upper-left corner of the canvas has a coordinate of (0,0).

In the previous example, we use the fillRect property and instructed the browser to start the X coordinate of 75 and the Y coordinate of 50. Then move 150 pixels to the left on X and down 100 pixels on Y, then fill the rectangle with a solid color.