Comments by Deborah Cooks (Top 1 by date)

File an issue about the selected text
WHATWG
HTML
Living Standard — Last Updated 2 May 2022
← 4.12 Scripting — Table of Contents — 4.13 Custom elements →
4.12.5 The canvas element
4.12.5.1 The 2D rendering context
4.12.5.1.1 Implementation notes
4.12.5.1.2 The canvas state
4.12.5.1.3 Line styles
4.12.5.1.4 Text styles
4.12.5.1.5 Building paths
4.12.5.1.6 Path2D objects
4.12.5.1.7 Transformations
4.12.5.1.8 Image sources for 2D rendering contexts
4.12.5.1.9 Fill and stroke styles
4.12.5.1.10 Drawing rectangles to the bitmap
4.12.5.1.11 Drawing text to the bitmap
4.12.5.1.12 Drawing paths to the canvas
4.12.5.1.13 Drawing focus rings and scrolling paths into view
4.12.5.1.14 Drawing images
4.12.5.1.15 Pixel manipulation
4.12.5.1.16 Compositing
4.12.5.1.17 Image smoothing
4.12.5.1.18 Shadows
4.12.5.1.19 Filters
4.12.5.1.20 Working with externally-defined SVG filters
4.12.5.1.21 Drawing model
4.12.5.1.22 Best practices
4.12.5.1.23 Examples
4.12.5.2 The ImageBitmap rendering context
4.12.5.2.1 Introduction
4.12.5.2.2 The ImageBitmapRenderingContext interface
4.12.5.3 The OffscreenCanvas interface
4.12.5.3.1 The offscreen 2D rendering context
4.12.5.4 Color spaces and color space conversion
4.12.5.5 Serializing bitmaps to a file
4.12.5.6 Security with canvas elements
4.12.5.7 Premultiplied alpha and the 2D rendering context
4.12.5 The canvas element
✔MDN✔MDN
Categories:
Flow content.
Phrasing content.
Embedded content.
Palpable content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
Transparent, but with no interactive content descendants except for a elements, img elements with usemap attributes, button elements, input elements whose type attribute are in the Checkbox or Radio Button states, input elements that are buttons, and select elements with a multiple attribute or a display size greater than 1.
Tag omission in text/html:
Neither tag is omissible.
Content attributes:
Global attributes
width — Horizontal dimension
height — Vertical dimension
Accessibility considerations:
For authors.
For implementers.
DOM interface:
typedef (CanvasRenderingContext2D or ImageBitmapRenderingContext or WebGLRenderingContext or WebGL2RenderingContext or GPUCanvasContext) RenderingContext;

[Exposed=Window]
interface HTMLCanvasElement : HTMLElement {
[HTMLConstructor] constructor();

[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;

RenderingContext? getContext(DOMString contextId, optional any options = null);

USVString toDataURL(optional DOMString type = "image/png", optional any quality);
undefined toBlob(BlobCallback _callback, optional DOMString type = "image/png", optional any quality);
OffscreenCanvas transferControlToOffscreen();
};

callback BlobCallback = undefined (Blob? blob);
The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.

Authors should not use the canvas element in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to render a page heading: if the desired presentation of the heading is graphically intense, it should be marked up using appropriate elements (typically h1) and then styled using CSS and supporting technologies such as shadow trees.

When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the canvas's bitmap. This content may be placed as content of the canvas element. The contents of the canvas element, if any, are the element's fallback content.

In interactive visual media, if scripting is enabled for the canvas element, and if support for canvas elements has been enabled, then the canvas element represents embedded content consisting of a dynamically cr