HTML <canvas> Element

HTML <canvas> Element

The <canvas> element provides a bitmap drawing surface that can be used to create graphics, charts, animations, games, image effects, and other visual content through JavaScript or graphics APIs such as Canvas 2D, WebGL, and WebGPU.

Syntax

<canvas width="400" height="200">
  Fallback content
</canvas>

The opening and closing tags are both required. The <canvas> element does not draw anything by itself; scripting or another graphics API is normally used to create the visual content.

Attributes

The <canvas> element supports the global HTML attributes and the following element-specific attributes:

The width and height values must be valid non-negative integers.

Example

The following example creates a canvas drawing surface and uses JavaScript to draw a filled rectangle:

<canvas id="myCanvas" width="300" height="150">
  Your browser does not support the canvas element.
</canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillRect(40, 30, 220, 90);
</script>

The HTML creates the drawing surface, while JavaScript obtains a two-dimensional drawing context and draws the rectangle.

Try It Yourself

Change the rectangle's position or dimensions in the JavaScript to see how drawing commands affect the <canvas>.

Fallback Content

Content placed between the opening and closing <canvas> tags can provide an alternative for situations where the canvas content cannot be used. This may include descriptive text, links, images, or other appropriate HTML content.

Fallback content is especially important when the information shown on the canvas is meaningful rather than purely decorative.

Usage Notes

The width and height attributes define the size of the canvas bitmap itself. If they are omitted, the default size is 300 pixels wide by 150 pixels high.

Changing the displayed size with CSS does not change the canvas bitmap dimensions. Scaling a canvas with CSS can stretch or distort the rendered graphics, so the HTML width and height attributes should normally be used to establish the drawing dimensions.

Changing the width or height of a canvas after a drawing context has been created clears the canvas and resets the rendering context.

The Canvas 2D API is commonly used for two-dimensional graphics, while WebGL and WebGPU can use the same <canvas> element for more advanced accelerated graphics.

Accessibility

A canvas is essentially a bitmap, so objects drawn on it do not automatically provide semantic information to assistive technologies. Important information shown graphically should also be available in an accessible form.

Provide suitable fallback or alternative content when a canvas communicates meaningful information. Interactive controls drawn directly on a canvas also require additional accessibility planning because they do not automatically behave like native HTML controls.

When ordinary semantic HTML can provide the same information or interaction, it is often the better choice.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <canvas> Element .

Individual canvas APIs and graphics features can have different browser support, so compatibility should also be checked for the specific API being used.

Related Elements

<img> - Embeds an image as document content.

<svg> - Creates scalable vector graphics using elements that remain part of the document structure.

<script> - Can contain or reference JavaScript used to draw and manipulate canvas graphics.

Specifications

HTML Living Standard: The <canvas> Element