❮ Previous Next ❯

HTML <canvas> tag

The <canvas> tag is used to draw graphics, creating animations etc. of arbitrary size coding with JavaScript usually. Different browsers may show different default styles for the <button> element. You can also create custom buttons using CSS. see example.

Type: Block Element

Example of <canvas> tag

<canvas
id="circle"
width="200"
height="200"
style="border:1px solid red;">
</canvas>
<script>
var c = document.getElementById("circle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>

Result

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<canvas> 4.0 or higher 9.0 or higher 2.0 or higher 3.1 or higher 9.0 or higher

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas
id="rectangle"
width="300"
height="240"
style="border:1px solid blue;">
This sentence will be displayed when your browser does not support the canvas element.
</canvas>
<script>
var c = document.getElementById("rectangle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 40, 120, 80);
ctx.fillStyle = "red";
ctx.fill();

ctx.beginPath();
ctx.rect(70, 60, 120, 80);
ctx.fillStyle = "blue";
ctx.fill();

ctx.beginPath();
ctx.rect(120, 80, 120, 80);
ctx.fillStyle = "green";
ctx.fill();
</script>
</body>
</html>
Run The code »

Output on the browser

This sentence will be displayed when your browser does not support the canvas element.

Attributes of <canvas> tag

Attribute Value Note
height pixels It defines the height of the canvas.
width pixels It defines the width of the canvas.
Note that the HTML <canvas> element's attributes (height and width) are always associated with each other.

More reference

If your browser does not support HTML <canvas> element, the text within the <canvas> tag and </canvas> tag will be displayed. Although this tag is used in drawing graphics, the act is performed by JavaScript. We have to use HTML <script> element to import JS language within the document.

Default CSS property of <canvas> element

canvas
{
  height: 150px;
  width: 300px;
}
❮ Previous Next ❯