HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML <canvas> Tag


Example

Draw a red square, on the fly, and show it inside the <canvas> element:

<canvas id="myCanvas"></canvas>

<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

Try it Yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The <canvas> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> tag.


Definition and Usage

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

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


Differences Between HTML 4.01 and HTML5

The <canvas> tag is new in HTML5.


Tips and Notes

Note: Any text inside the <canvas> element will be displayed in browsers that does not support <canvas>.

Tip:For a complete reference of all the properties and methods that can be used with the canvas object, go to our HTML Canvas Reference.


Attributes

New : New in HTML5.

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

Global Attributes

The <canvas> tag also supports the Global Attributes in HTML.


Event Attributes

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



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE