HTML <canvas> Tag

Definition and Usage

<canvas> Labels are typically drawn in real-time using scripts (usually JavaScript).

<canvas> Labels are transparent; they are merely containers for graphics and must be used with scripts to actually draw graphics.

in browsers that disable JavaScript and do not support <canvas> browser, it will display <canvas> Any text inside the element.

Tips

Learn about HTML Canvas in our <canvas> More knowledge about the element.

For a complete reference to all properties and methods, please visit our HTML Canvas Reference Manual.

Instance

Example 1

Draw a red rectangle in real time and display it in the <canvas> element:

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Try it yourself

Example 2

Another <canvas> example:

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Open opacity
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Try it yourself

Attribute

Attribute Value Description
height Pixel value Specifies the height of the canvas. The default value is 150.
width Pixel value Specifies the width of the canvas. The default value is 300.

Global attributes

<canvas> The tag also supports Global attributes in HTML.

Event attributes

<canvas> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <canvas> Element:

canvas {
  height: 150px;
  width: 300px;
}

Try it yourself

The history of <canvas>

This HTML element is designed for client-side vector graphics. It has no behavior itself, but it presents a drawing API to the client JavaScript so that scripts can draw anything they want on a canvas.

The <canvas> tag was introduced by Apple in Safari 1.3 Web browser. The reason for this fundamental extension to HTML is that the drawing capabilities of HTML in Safari are also used by the Dashboard component of Mac OS X desktop, and Apple wants a way to support scriptable graphics in Dashboard.

Firefox 1.5 and Opera 9 followed the lead of Safari. Both browsers support the <canvas> tag.

We can even use the <canvas> tag in IE, and build a compatible canvas based on the VML support in IE using open-source JavaScript code (initiated by Google). See also:http://excanvas.sourceforge.net/.

The standardization efforts of <canvas> are being promoted by an informal association of Web browser manufacturers, and <canvas> has already become an official tag in the HTML 5 draft. See also:http://www.whatwg.org/specs/web-apps/current-work/

Differences between the <canvas> tag and SVG and VML

One important difference between the <canvas> tag and SVG and VML is that <canvas> has a drawing API based on JavaScript, while SVG and VML use an XML document to describe the drawing.

These two methods are functionally equivalent, and either can be simulated by the other. On the surface, they look very different, but each has its strengths and weaknesses. For example, SVG drawings are easy to edit, as long as elements are removed from their description.

To remove elements from the same graphic within one <canvas> tag, it often requires erasing the drawing and redrawing it.

How to use the <canvas> tag for drawing

Most Canvas drawing APIs are not defined on the <canvas> element itself, but defined on the context obtained through the canvas. getContext() methodon an obtained 'drawing environment' object.

The Canvas API also uses the path notation. However, the path is defined by a series of method calls, not described as a string of letters and numbers, such as calling the beginPath() and arc() methods.

Once a path is defined, other methods such as fill() are operations on this path. Various properties of the drawing environment, such as fillStyle, explain how these operations are used.

Note:One of the very compact reasons for the Canvas API is that it provides no support for drawing text. To add text to a <canvas> graphic, you must either draw it yourself and then merge it with a bitmap image, or use CSS positioning above the <canvas> to overlay HTML text.

Browser Support

The numbers in the table indicate the first browser version that fully supports this element.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0