🔞 ADULT: Multipage/canvas.html - Complete Album!

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 created image, the element's bitmap.

In non-interactive, static, visual media, if the canvas element has been previously associated with a rendering context (e.g. if the page was viewed in an interactive visual medium and is now being printed, or if some script that ran during the page layout process painted on the element), then the canvas element represents embedded content with the element's current bitmap and size. Otherwise, the element represents its fallback content instead.

In non-visual media, and in visual media if scripting is disabled for the canvas element or if support for canvas elements has been disabled, the canvas element represents its fallback content instead.

When a canvas element represents embedded content, the user can still focus descendants of the canvas element (in the fallback content). When an element is focused, it is the target of keyboard interaction events (even though the element itself is not visible). This allows authors to make an interactive canvas keyboard-accessible: authors should have a one-to-one mapping of interactive regions to focusable areas in the fallback content. (Focus has no effect on mouse interaction events.) [UIEVENTS]

An element whose nearest canvas element ancestor is being rendered and represents embedded content is an element that is being used as relevant canvas fallback content.

The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

When setting the value of the width or height attribute, if the context mode of the canvas element is set to placeholder, the user agent must throw an "InvalidStateError" DOMException and leave the attribute's value unchanged.

The natural dimensions of the canvas element when it represents embedded content are equal to the dimensions of the element's bitmap.

The user agent must use a square pixel density consisting of one pixel of image data per coordinate space unit for the bitmaps of a canvas and its rendering contexts.

A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.

The bitmaps of canvas elements, the bitmaps of ImageBitmap objects, as well as some of the bitmaps of rendering contexts, such as those described in the sections on the CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, and ImageBitmapRenderingContext objects below, have an origin-clean flag, which can be set to true or false. Initially, when the canvas element or ImageBitmap object is created, its bitmap's origin-clean flag must be set to true.

A canvas element can have a rendering context bound to it. Initially, it does not have a bound rendering context. To keep track of whether it has a rendering context or not, and what kind of rendering context it is, a canvas also has a canvas context mode, which is initially none but can be changed to either placeholder, 2d, bitmaprenderer, webgl, webgl2, or webgpu by algorithms defined in this specification.

When its canvas context mode is none, a canvas element has no rendering context, and its bitmap must be transparent black with a natural width equal to the numeric value of the element's width attribute and a natural height equal to the numeric value of the element's height attribute, those values being interpreted in CSS pixels, and being updated as the attributes are set, changed, or removed.

When its canvas context mode is placeholder, a canvas element has no rendering context. It serves as a placeholder for an OffscreenCanvas object, and the content of the canvas element is updated by the OffscreenCanvas object's rendering context.

When a canvas element represents embedded content, it provides a paint source whose width is the element's natural width, whose height is the element's natural height, and whose appearance is the element's bitmap.

Whenever the width and height content attributes are set, removed, changed, or redundantly set to the value they already have, then the user agent must perform the action from the row of the following table that corresponds to the canvas element's context mode.

Context Mode	Action
2d	Follow the steps to set bitmap dimensions to the numeric values of the `width` and `height` content attributes.
webgl or webgl2	Follow the behavior defined in the WebGL specifications. [WEBGL]
webgpu	Follow the behavior defined in WebGPU. [WEBGPU]
bitmaprenderer	If the context's bitmap mode is set to blank, run the steps to set an `ImageBitmapRenderingContext`'s output bitmap, passing the `canvas` element's rendering context.
placeholder	Do nothing.
none	Do nothing.

HTMLCanvasElement/height

Support in all current engines.

Firefox1.5+Safari3+Chrome1+

Opera9+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

HTMLCanvasElement/width

Support in all current engines.

Firefox1.5+Safari3+Chrome1+

Opera9+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

The width and height IDL attributes must reflect the respective content attributes of the same name, with the same defaults.

context = canvas.getContext(contextId [, options ]) HTMLCanvasElement/getContext Support in all current engines. Firefox1.5+Safari2+Chrome1+ Opera9+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Returns an object that exposes an API for drawing on the canvas. contextId specifies the desired API: "2d", "bitmaprenderer", "webgl", "webgl2", or "webgpu". options is handled by that API.

This specification defines the "2d" and "bitmaprenderer" contexts below. The WebGL specifications define the "webgl" and "webgl2" contexts. WebGPU defines the "webgpu" context. [WEBGL] [WEBGPU]

Returns null if contextId is not supported, or if the canvas has already been initialized with another context type (e.g., trying to get a "2d" context after getting a "webgl" context).

The getContext(contextId, options) method of the canvas element, when invoked, must run these steps:

If options is not an object, then set options to null.
Set options to the result of converting options to a JavaScript value.

Run the steps in the cell of the following table whose column header matches this canvas element's canvas context mode and whose row header matches contextId:

	none	2d	bitmaprenderer	webgl or webgl2	webgpu	placeholder
"`2d`"	Let `context` be the result of running the 2D context creation algorithm given this and `options`. Set this's context mode to 2d. Return `context`.	Return the same object as was returned the last time the method was invoked with this same first argument.	Return null.	Return null.	Return null.	Throw an "`InvalidStateError`" `DOMException`.
"`bitmaprenderer`"	Let `context` be the result of running the `ImageBitmapRenderingContext` creation algorithm given this and `options`. Set this's context mode to bitmaprenderer. Return `context`.	Return null.	Return the same object as was returned the last time the method was invoked with this same first argument.	Return null.	Return null.	Throw an "`InvalidStateError`" `DOMException`.
"`webgl`" or "`webgl2`", if the user agent supports the WebGL feature in its current configuration	Let `context` be the result of following the instructions given in the WebGL specifications' Context Creation sections. [WEBGL] If `context` is null, then return null; otherwise set this's context mode to webgl or webgl2. Return `context`.	Return null.	Return null.	Return the same object as was returned the last time the method was invoked with this same first argument.	Return null.	Throw an "`InvalidStateError`" `DOMException`.
"`webgpu`", if the user agent supports the WebGPU feature in its current configuration	Let `context` be the result of following the instructions given in WebGPU's Canvas Rendering section. [WEBGPU] If `context` is null, then return null; otherwise set this's context mode to webgpu. Return `context`.	Return null.	Return null.	Return null.	Return the same object as was returned the last time the method was invoked with this same first argument.	Throw an "`InvalidStateError`" `DOMException`.
An unsupported value*	Return null.	Return null.	Return null.	Return null.	Return null.	Throw an "`InvalidStateError`" `DOMException`.

* For example, the "webgl" or "webgl2" value in the case of a user agent having exhausted the graphics hardware's abilities and having no software fallback implementation.

url = canvas.toDataURL([ type [, quality ] ]) HTMLCanvasElement/toDataURL Support in all current engines. Firefox2+Safari4+Chrome2+ Opera9+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

Returns a data: URL for the image in the canvas.

The first argument, if provided, controls the type of the image to be returned (e.g. PNG or JPEG). The default is "image/png"; that type is also used if the given type isn't supported. The second argument applies if the type is an image format that supports variable quality (such as "image/jpeg"), and is a number in the range 0.0 to 1.0 inclusive indicating the desired quality level for the resulting image.

When trying to use types other than "image/png", authors can check if the image was really returned in the requested format by checking to see if the returned string starts with one of the exact strings "data:image/png," or "data:image/png;". If it does, the image is PNG, and thus the requested type was not supported. (The one exception to this is if the canvas has either no height or no width, in which case the result might simply be "data:,".)

canvas.toBlob(callback [, type [, quality ] ]) HTMLCanvasElement/toBlob Support in all current engines. Firefox18+Safari11+Chrome50+ Opera?Edge79+ Edge (Legacy)NoInternet Explorer🔰 10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Creates a Blob object representing a file containing the image in the canvas, and invokes a callback with a handle to that object.

The second argument, if provided, controls the type of the image to be returned (e.g. PNG or JPEG). The default is "image/png"; that type is also used if the given type isn't supported. The third argument applies if the type is an image format that supports variable quality (such as "image/jpeg"), and is a number in the range 0.0 to 1.0 inclusive indicating the desired quality level for the resulting image.

canvas.transferControlToOffscreen() HTMLCanvasElement/transferControlToOffscreen Support in all current engines. Firefox105+Safari16.4+Chrome69+ Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Returns a newly created OffscreenCanvas object that uses the canvas element as a placeholder. Once the canvas element has become a placeholder for an OffscreenCanvas object, its natural size can no longer be changed, and it cannot have a rendering context. The content of the placeholder canvas is updated on the OffscreenCanvas's relevant agent's event loop's update the rendering steps.

The toDataURL(type, quality) method, when invoked, must run these steps:

If this canvas element's bitmap's origin-clean flag is set to false, then throw a "SecurityError" DOMException.
If this canvas element's bitmap has no pixels (i.e. either its horizontal dimension or its vertical dimension is zero), then return the string "data:,". (This is the shortest data: URL; it represents the empty string in a text/plain resource.)
Let file be a serialization of this canvas element's bitmap as a file, passing type and quality if given.
If file is null, then return "data:,".
Return a data: URL representing file. [RFC2397]

The toBlob(callback, type, quality) method, when invoked, must run these steps:

If this canvas element's bitmap's origin-clean flag is set to false, then throw a "SecurityError" DOMException.
Let result be null.
If this canvas element's bitmap has pixels (i.e., neither its horizontal dimension nor its vertical dimension is zero), then set result to a copy of this canvas element's bitmap.
Run these steps in parallel:
1. If result is non-null, then set result to a serialization of result as a file with type and quality if given.
2. Queue an element task on the canvas blob serialization task source given the canvas element to run these steps:

🔞 ADULT: Multipage/canvas.html - Complete Album!

4.12.5 The canvas element

4.12.5 The `canvas` element