totn HTML

HTML: <canvas> tag

This HTML tutorial explains how to use the HTML element called the <canvas> tag with syntax and examples.

Description

The HTML <canvas> tag is an HTML5 element that is used as a container to draw graphics such as 2D objects and bitmap images in an HTML document. The actual graphics within this container are drawn using <script> tags. This tag is also commonly referred to as the <canvas> element.

Syntax

In HTML, the syntax for the <canvas> tag is: (example draws a blue bevelled box using <script> tags and displays it within the <canvas> tag)

<body>

  <canvas id="totn_canvas" width="125" height="125"></canvas>

  <script>
    var canvas = document.getElementById("totn_canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#4B6692";
    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  </script>

</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <canvas> tag:

Attribute Description HTML Compatibility
height Height of the canvas in pixels HTML5
width Width of the canvas in pixels HTML5

Note

  • The HTML <canvas> element is found within the <body> tag.
  • The <canvas> tag acts as a container for the graphics. All graphics are drawn outside of the <canvas> tag using a <script> tag with either the canvas scripting API or the WebGL API.

Browser Compatibility

The <canvas> tag has basic support with the following browsers:

  • Chrome 1.0+
  • Firefox (Gecko) 1.5+
  • Firefox for Android 4+
  • Internet Explorer (IE) 9+
  • Edge
  • Edge Mobile
  • Opera 9+
  • Safari (WebKit) 2+
  • Safari Mobile

Example

We will discuss the <canvas> tag below, exploring examples of how to use the <canvas> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <canvas> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Graphics Example</h1>

<canvas id="totn_canvas" width="125" height="125"></canvas>
    
<script>
  var canvas = document.getElementById("totn_canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#4B6692";
  ctx.fillRect(25, 25, 100, 100);
  ctx.clearRect(45, 45, 60, 60);
  ctx.strokeRect(50, 50, 50, 50);
</script>

</body>

</html>

In this HTML5 Document example, we have used the <canvas> tag to create a container that is 125px by 125px in size with an id of totn_canvas. A <script> tag is used to draw the graphics inside this container. In this example, we have drawn a blue square that has a bevelled interior.

HTML 4.01 Transitional Document

You can not use the <canvas> tag in HTML 4.01 Transitional.

XHTML 1.0 Transitional Document

You can not use the <canvas> tag in XHTML 1.0 Transitional.

XHTML 1.0 Strict Document

You can not use the <canvas> tag in XHTML 1.0 Strict.

XHTML 1.1 Document

You can not use the <canvas> tag in XHTML 1.1.

Share on: