HTML5 <canvas> Tag

Example How to display a red square, with the canvas element: <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 yourself »

---

Definition and Usage

The <canvas> tag is used to display graphics.

The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

---

Differences Between HTML 4.01 and HTML5

The <canvas> tag is new in HTML5.

---

Tips and Notes

Tip: Any text inside the between <canvas> and </canvas> will be displayed in browsers that does not support the canvas element.

---

Attributes

New : New in HTML5.

Attribute	Value	Description
heightNew	pixels	Specifies the height of the canvas
widthNew	pixels	Specifies the width of the canvas

Standard Attributes

The <canvas> tag also supports the Standard Attributes in HTML5.

---

Event Attributes

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

---