The <canvas> Element

Technical Summary

Definition / Categories

Bitmap dimensions and CSS display size

The width and height attributes take valid non-negative integers and set the bitmap dimensions. CSS width and height control the element's display size in layout. These pairs of values have different jobs.

<canvas id="plot" width="320" height="180">
  Chart summary: January 12, February 18, March 14.
</canvas>

<style>
  #plot { width: 640px; height: 360px; }
</style>

This example displays a 320×180 bitmap at 640×360 in CSS. Changing the display size with CSS alone does not proportionally increase the bitmap's coordinate space or stored pixels.

For a canvas with a 2D context, setting width or height runs the bitmap-dimension steps: the rendering context is reset and the bitmap is resized. This also happens when the same value is assigned again. It differs from changing CSS dimensions. WebGL and WebGPU specifications define their own behavior for relevant dimension changes.

Context mode and getContext()

A canvas begins without a rendering context. Acquiring one through getContext() establishes its context mode. The HTML Standard lists modes including 2d, bitmaprenderer, webgl, webgl2, and webgpu.

const canvas = document.querySelector("#plot");
const context = canvas.getContext("2d");

if (context) {
  context.fillStyle = "#4c78c2";
  context.fillRect(16, 16, 120, 64);
}

Requesting a different context type from a canvas already initialized with another type can return null. An unsupported context request can also return null. The drawing state and methods of a 2D context belong to the Canvas 2D API; this Topic covers its boundary with the HTML element.

Fallback content and accessibility

In non-visual media, or when scripting or canvas support is unavailable for the element, its descendants are represented as fallback content. When the canvas is presented as a bitmap, fallback descendants are not ordinarily drawn as visible text over that bitmap.

Focusable descendants in canvas fallback content can remain focusable while the canvas is displayed as an image. For an interactive canvas, the HTML Standard describes a correspondence between interactive regions and focusable areas in the fallback content. Information conveyed by a diagram or dataset may also need an equivalent in ordinary HTML outside the canvas.

HTML-AAM defines platform mappings for canvas and treats descendant mapping separately. A normative mapping and the content exposed in a browser's Accessibility Tree are separate evidence. No browser or assistive-technology observation has been made for this Topic.

Image input and origin-clean

When an image, video, or other source is drawn into a canvas, source bitmap origin-clean state can propagate to the destination bitmap. This boundary prevents scripts from reading information from another origin without the required CORS authorization.

For a bitmap that is not origin-clean, pixel readback or export operations such as getImageData(), toDataURL(), or toBlob() can throw a SecurityError. Do not generalize that a drawn image is always readable or always unreadable without checking its CORS response, loading conditions, and bitmap history.

The canvas processing model defines this security boundary. Image fetching and CORS details, and the full behavior of each Canvas 2D drawing operation, require their own related specifications and implementation evidence.

Fact / Evidence

Evidence

1. HTML Living Standard: The canvas element — categories, content model, fallback, bitmap dimensions, context mode, context acquisition, and origin-clean behavior
2. HTML Accessibility API Mappings: canvas — computed role, platform mappings, and descendant boundary
3. Web Platform Tests: canvas element tests — selected reset test results are recorded in the registry below; the linked directory is broader discovery context
4. HTML Standard: embedded content rendering — rendering-model reference

Implementation Evidence

SPEC claims are separate from browser, WPT, and accessibility observations. Partial rows record only the environments and test cases listed in their conditions; they do not establish cross-browser behavior or complete conformance.

Coverage / Open Issues

• Reviewed in specificationCategories, content model, default bitmap dimensions, and context-mode entry points
• Reviewed in specificationFallback descendants, 2D bitmap resizing and context reset, and key origin-clean boundaries
• Partly observedBasic behavior was measured in one Chrome 154 environment; comparisons with Firefox / Safari and an independent WebGL support check remain unmeasured
• Partly runThree reset-related WPTs passed; the full canvas suite, other browsers, and other feature areas remain unrun
• Partly observedThe Chrome AX Tree exposed canvas names and a fallback link; platform APIs, actual focus movement, and assistive technology remain unobserved
• Separate scopeAll Canvas 2D operations and full WebGL / WebGPU API conformance and performance

Coverage is limited to the selected scope listed above. Specification review and partial measurements do not establish identical behavior across browsers, a full WPT pass, or accessibility verified with platform APIs and assistive technology.

Related surface

For a beginner-friendly introduction to creating a context and setting dimensions, see canvas in Yugien. The image input boundary is covered by img; image candidate selection by picture; and parent-specific image or media candidates by source. These Topics are related but belong to different specification areas from canvas bitmap and context processing.