HTML 5 <canvas> tag

Definition and Usage

The <canvas> tag defines graphic, such as graphs or other images.

Differences Between HTML 4.01 and HTML 5

The <canvas> tag is new in HTML 5

Tips and Notes

Tip: You can write text between the start and end tags, to show older browser that they do not support this tag.

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

Note: Some browsers already supports the <canvas> tag, like Firefox and Opera.

Example

<script type="text/javascript">
function drawCanvas()

	{
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';

	ctx.fillRect(0,0,80,100);

	}
</script>
...
<canvas id="myCanvas">your browser does 
not support the canvas tag </canvas>

Try it yourself

Attributes

Standard Attributes

For a full description, go to Standard Attributes in HTML 5.

Event Attributes

For a full description, go to Event Attributes in HTML 5.

W3Schools' Online Certification Program The perfect solution for professionals who need to balance work, family, and career building. More than 3500 certificates already issued!

The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The ASP Certificate documents your knowledge of ASP, SQL, and ADO.

The PHP Certificate documents your knowledge of PHP and SQL (MySQL).