<canvas>
HTML <canvas> Tag
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>Run Example»
Click the "Run Instance" button to view the online instance
Browser support
IE 9, Firefox, Opera, Chrome and Safari support the <canvas> tag.
Note: IE 8 or earlier versions of IE browsers do not support the <canvas> tag.
Tag definition and usage instructions
<canvas> tag uses scripts (usually JavaScript) to draw graphics (such as charts and other images).
<canvas> tags are just graphics containers, you have to use a script to draw the graphics.
Differences between HTML 4.01 and HTML5
The<canvas> tag is a new tag in HTML5.
Tips and Notes
Note: Any text within the <canvas> element will be displayed in browsers that do not support <canvas> .
Tip: For information on all properties and methods of the canvas object, please refer to the HTML Canvas Reference Manual.
Attribute
New: New attribute in HTML5.
| Properties | Value | Description |
|---|---|---|
| heightNew | pixels | Specifies the height of the canvas. |
| widthNew | pixels | Specifies the width of the canvas. |
Global attributes
<canvas> tag supports global attributes of HTML.
Event attributes
<canvas> tag supports HTML event attributes.
