<canvas>
HTML <canvas> Tag
The <canvas> tag is one of the HTML5 elements. It defines an area on the web page, where we can create different objects, images, animations, photo compositions via scripts (usually JavaScript). You should use a script to draw graphics because the <canvas> tag is just a container for graphics.
When working with canvas, it is important to distinguish between such concepts as the canvas element and the context of an element, that are often confused. This element is what’s built into HTML (the DOM node). A canvas context is an object with its properties and method for rendering. Context can be 2D and 3D. The canvas element can have only one context. （在使用画布时，区分经常混淆的画布元素和元素上下文等概念非常重要。此元素是内置在HTML （ DOM节点）中的元素。画布上下文是具有其属性和渲染方法的对象。上下文可以是2D和3D。canvas元素只能有一个上下文。）
An alternate content must be provided inside the <canvas> tag so that both the older browsers not supporting canvas and browsers with disabled JavaScript can render that content.
The exact size of a <canvas> element depends on the browser.
You can use CSS to change the displayed size of the canvas but it is better to specify the dimensions by setting the width and height attributes on <canvas>, either directly in HTML or by JavaScript.
Syntax
Syntax （语法）
The <canvas> tag comes in pairs. The content is written between the opening (<canvas>) and closing (</canvas>) tags.
Example of the HTML <canvas> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
<script>
var c=document.getElementById('canvasExample');
var ctx=c.getContext('2d');
ctx.fillStyle='#1c87c9';
ctx.fillRect(10,50,80,80);
</script>
</body>
</html>
Result
Example of the HTML <canvas> tag used for a text:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
</body>
</html>
Example of the HTML <canvas> tag used for drawing a line:
<!DOCTYPE html>
<html>
<body>
<canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
Your browser does not support the HTML5 canvas tag.
（您的浏览器不支持HTML5标签。）
</canvas>
<script>
var c = document.getElementById("canvasExample");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.strokeStyle='#1c87c9';
ctx.stroke();
</script>
</body>
</html>
Attributes
Attributes （属性）
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Defines the element height in pixels. |
| width | pixels | Defines the element width in pixels. |
The <canvas> tag supports Global Attributes and the Event Attributes.