HTML 5 <canvas> Tag

​x
 
<!DOCTYPE html>
<html>
<head>
<script type="application/x-javascript">
function displayCanvas()
    {
      var canvas = document.getElementById("myCanvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
​
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (0, 0, 150, 75);
​
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (40, 30, 125, 75);
​
        ctx.fillStyle = "rgb(0,0,150)";
        ctx.strokeRect (20, 20, 50, 100); 
      }
    }
</script>
</head>
<body onload="displayCanvas();">
<canvas id="myCanvas" width="300" height="200">Your browser does not support the canvas tag. At the time of writing, Firefox, Opera, and Chrome support this tag.</p> 
<p>Here's an <a href="/pix/html_5/tags/html_canvas_tag.gif">image of what it's supposed to look like</a>.</canvas>
</body>
</html>

The HTML <canvas> tag is used for creating graphics on the fly. It can be used for rendering graphs, game graphics, or other visual images.

To draw on the canvas, the <canvas> tag is used in conjunction with the getContext(contextId) method.

Any content between the <canvas></canvas> tags is "fallback content"- meaning, it will be displayed only if the canvas cannot be displayed.

The <canvas> tag was introduced in HTML 5.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

AttributeDescription
widthSpecifies the canvas width in pixels. The default value is 300.

Possible values:

[Non-negative integer] (for example, 300)
heightSpecifies the canvas height in pixels. The default value is 150.

Possible values:

[Non-negative integer] (for example, 150)

Global Attributes

The following attributes are standard across all HTML 5 tags (although the tabindex attribute does not apply to dialog elements).

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

For a full list of event handlers, see HTML 5 event handler content attributes.