Latest web development tutorials

HTML <canvas> tag

Examples

By <canvas> element to display a red rectangle:

<Canvas id = "myCanvas"> </ canvas> <Script type = "text / javascript"> var canvas = document.getElementById ( 'myCanvas'); var ctx = canvas.getContext ( '2d'); ctx.fillStyle = '# FF0000'; ctx.fillRect (0,0,80,100 ); </ script>

try it"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

IE 9, Firefox, Opera, Chrome and Safari support <canvas> tag.

Note: IE 8 or earlier versions of IE browser does not support <canvas> tag.


Tag definitions and instructions

<Canvas> tag to draw graphics (such as charts and other images) through scripting (usually JavaScript).

<Canvas> tag is a graphical container, you must use a script to draw graphics.


Differences between HTML 4.01 and HTML5

<Canvas> tag is new in HTML5 tags.


Tips and Notes

NOTE: <canvas> element will be displayed in any text does not support the <canvas> browser.

Tip: If youwant to know all the canvas object properties and methods, see the HTML canvas Reference Manual .


Attributes

New: HTML5 new property.

属性 描述
height New pixels 规定画布的高度。
width New pixels 规定画布的宽度。

Global Properties

<canvas> tag supports HTML global properties .


Event Properties

<canvas> tag supports HTML event properties .