Description

The HTML element <canvas> is used to define a region that can be used to draw graphics on the fly via Javascript.

The graphics can include shapes, graphs, and animations.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents It can contain Inline elements and text.
Tags Both the opening and closing tags are required.
Versions HTML5

Syntax

Here is the basic syntax of the <canvas> element.

<canvas>...</canvas>

Examples

The element with some text inside it, which is displayed on browsers with Javascript disabled or doesn't support the <canvas> element.

<canvas id="myCanvas">
    Oops!! Your browser doesn't support the canvas element.
</canvas>

The example with an id on the <canvas> element, which is used to draw some graphics via Javascript.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Element - canvas</h1>
    <canvas id="myCanvas">
        Oops!! Your browser doesn't support the canvas element.
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        var context = c.getContext("2d");
        context .fillStyle = "red";
        context .fillRect(20, 20, 80, 50);
    </script>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <canvas> tag.

Attribute Type Details
Element-Specific Attributes The tag <canvas> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <canvas> supports the HTML Global Attributes.
Event Attributes The tag <canvas> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <canvas> element.

Attribute Value Description
width pixels Sets the canvas width in pixels.
height pixels Sets the canvas height in pixels.

Browser Compatibility

The tag <canvas> is supported in all modern browsers.

  • Google Chrome 4+
  • Internet Explorer or Edge 9+
  • Firefox 2+
  • Apple Safari 3.1+
  • Opera 9+

Related Links