HTML Canvas Tag

HTML Canvas Tag is used to draw graphics with the help of scripts, commonly using JavaScript scripts.

Syntax of HTML Canvas Tag

The Syntax of HTML Canvas Tag is shown below. The text of the Canvas Element is written between the starting Canvas tag and ending Canvas tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="Canvas">
Your browser does not support html canvas tag.
</canvas>
</body>
</html>

The text written inside the canvas starting and ending tags will be displayed if the browser doesn't support the canvas tag or javascript is disabled in it.

Usage of HTML Canvas Tag

HTML Canvas Tag is nothing but just a container that can contain graphics, Javscript language is used to draw the actual graphics inside the canvas tag.

Example of HTML Canvas Tag

Simple example of HTML Canvas Tag is shown below.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="Canvas">
Your browser does not support html canvas tag.
</canvas>

<script>
var canvas = document.getElementById("Canvas");
var a = canvas.getContext("2d");
a.fillStyle = "#009F5E";
a.fillRect(0, 0, 50, 50);
</script>
</body>
</html>

Output

The output of code above is shown below.

Your browser does not support html canvas tag.

Browser Support for HTML Canvas Tag

HTML Canvas Tag is not supported by old versions of major Browsers, Chrome 4.0, Internet Explorer 9.0, Fire Fox 2.0, Safari 3.1, and Opera 9.0 and higher versions support the canvas tag.

Global Attributes Support in HTML Canvas Tag

The HTML Canvas Tag supports all Global Attributes.

Event Attributes Support in HTML Canvas Tag

The HTML Canvas Tag supports all Event Attributes.

HTML Canvas Tag Video

Watch our video on HTML Canvas Tag and subscribe our Youtube Channel.

HTML Comment Tag HTML Doctype Tag HTML anchor Tag HTML abbr Tag HTML acronym Tag HTML address Tag HTML applet Tag HTML area Tag HTML article Tag HTML aside Tag HTML audio Tag HTML b Tag HTML base Tag HTML basefont Tag HTML bdi Tag HTML bdo Tag HTML big Tag HTML blockquote Tag HTML body Tag HTML br Tag HTML Button Tag HTML Canvas Tag HTML Caption Tag HTML Center Tag HTML Cite Tag HTML Code Tag HTML Col Tag HTML colgroup Tag HTML data Tag HTML datalist Tag HTML dd Tag HTML del Tag HTML details Tag HTML dfn Tag HTML dialog Tag HTML dir Tag HTML div Tag HTML dl Tag HTML dt Tag HTML em Tag HTML embed Tag HTML fieldset Tag HTML figcaption Tag HTML figure Tag HTML font Tag HTML footer Tag HTML form Tag HTML frame Tag HTML frameset Tag HTML Heading Tags HTML head Tag HTML header Tag HTML hr Tag HTML html Tag HTML i Tag HTML iframe Tag