码农教程 - 一技在手,衣食无忧! tools

HTML <canvas> Tag

❮ Previous Complete HTML Reference Next ❯

Example

Draw a red rectangle on the fly, and show it inside the <canvas> element:

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> tag is transparent, and is only a container for graphics, you must use a script to actually draw the graphics.

Any text inside the <canvas> element will be displayed in browsers with JavaScript disabled and in browsers that do not support <canvas>.

Tips and Notes

Tip: Learn more about the <canvas> element in our HTML Canvas Tutorial.

Tip: For a complete reference of all the properties and methods, please visit our HTML Canvas Reference.

Browser Support

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

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

Attributes

Attribute Value Description
height pixels Specifies the height of the canvas. Default value is 150
width pixels Specifies the width of the canvas Default value is 300

Global Attributes

The <canvas> tag also supports the Global Attributes in HTML.

Event Attributes

The <canvas> tag also supports the Event Attributes in HTML.

More Examples

Example

Another <canvas> example:

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
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 »

Default CSS Settings

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

Example

canvas {
  height: 150px;
  width: 300px;
}
Try it Yourself »

❮ Previous Complete HTML Reference Next ❯