HTML <canvas> tag

The canvas element is used in scripting to draw visuals on the fly (usually JavaScript). The <canvas> tag is translucent and merely serves as a container for graphics you must use a script to render the visuals.

Any text included within the <canvas> element will be shown in browsers that do not support <canvas> or have JavaScript disabled.

This tag is used as a container in an HTML page to render graphics such as 2D objects and bitmap pictures. <script> tags are used to draw the actual images within this container.

Syntax

<canvas id="__name__"> Contents here... </canvas>

Example

<!DOCTYPE html>
<html>
<body>

<canvas id="webtutor" width="250" height="150" style="border:1px solid red"></canvas>

<script>
    var c = document.getElementById("webtutor");
    var cx = c.getContext("2d");
    cx.beginPath();
    cx.arc(125, 100, 75, 0, 2 * Math.PI);
    cx.stroke();
</script>

</body>
</html>

Preview

Attributes

Attribute	Value	Description
height	pixels	The canvas's height is specified.
width	pixels	The width of the canvas is specified.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
<canvas>	4.0	2.0	3.1	9.0	9.0

HTML <canvas> tag

Syntax

Example

Attributes

Supported Browsers

Links

Tutorials

Connect with us