HTML <canvas> Tag
Draw a red square, on the fly, and show it inside the <canvas> element:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
Try it Yourself »
Definition and Usage
The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.
The numbers in the table specify the first browser version that fully supports the element.
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: Learn more about the <canvas> element in our HTML Canvas Tutorial.
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.
= New in HTML5.
|height||pixels||Specifies the height of the canvas|
|width||pixels||Specifies the width of the canvas|
The <canvas> tag also supports the Global Attributes in HTML.
The <canvas> tag also supports the Event Attributes in HTML.
Default CSS Settings
Thank You For Helping Us!
Your message has been sent to W3Schools.