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](https://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?

HTML5's <canvas> tag creates a blank drawing area for 2D/3D graphics, animations, and interactivity.