HTML canvas tag

Example

Draw a red rectangle in real-time, and show it inside the <canvas> element:

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

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

Your browser does not support the canvas tag.

Definition and Usage

The <canvas> tag is used to draw graphics, in real-time, via scripting (usually JavaScript).

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

Any text inside the <canvas> element will be displayed in browsers with JavaScript disabled and in browsers that do not support <canvas>.

Attributes

Attribute	Value	Description
height	pixels	Specifies the height of the canvas. Default value is 150
width	pixels	Specifies the width of the canvas Default value is 300

Global Attributes

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

Event Attributes

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

More Examples

Example

Another <canvas> example:

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Your browser does not support the canvas tag.

Default CSS Settings

Most browsers will display the <canvas> element with the following default values:

Example

canvas {
height: 150px;
width: 300px;
}