The HTML 5 **`<canvas>` tag** is an HTML element that creates a blank drawing area where graphics can be rendered on web pages. The `<canvas>` element supports both 2D and 3D graphics. This depends on the context it is used. It supports 2D graphics through the 2D context and 3D graphics through the #key# WebGL: Web Graphics Library #key# context.

The `<canvas>` element isn't restricted to still graphics. It also supports animations. This means it can be used to build games, interactive web applications, visualize data, manipulate photos and perform real-time video processing.

The `<canvas>` element is used extensively for graphics on the web. Web applications like Figma, Draw.io, and Canva also use the `<canvas>` element.



# 
## Code
To create a new `canvas`, add a `<canvas>` element to an HTML document. This creates a 300x150 px blank `canvas`.

codemirror

To see the `canvas` in action, use the JavaScript `canvas` API to draw an orange rectangle.

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "orange";
ctx.fillRect(10, 10, 100, 100);

What is the <canvas> tag in HTML?

The HTML 5  tag is an HTML element that creates a blank drawing area where graphics can be rendered on web pages. The  element supports both 2D and 3D graphics. This depends on the context it is used. It supports 2D graphics through the 2D context and 3D graphics through the WebGLWeb Graphics Library context. The  element isn t restricted to still graphics. It also supports animations. This means it can be used to build games, interactive web applications, visualize data, manipulate photos and perform real-time video processing. The  element is used extensively for graphics on the web. Web applications like Figma, Draw.io, and Canva also use the  element. 