An element and API that enables drawing surfaces.

This specification is an experimental breakup of the HTML specification. You can see the full list on the index page and take part in the discussion in the repository.

The canvas element

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, select elements with a multiple attribute or a display size greater than 1, sorting interface th elements, and elements that would not be interactive content except for having the tabindex attribute specified.

Tag omission in text/html:

Neither tag is omissible.

Content attributes:

Global attributes

width — Horizontal dimension

height — Vertical dimension

Allowed ARIA role attribute values:

Any role value.

Allowed ARIA State and Property Attributes:

Global aria-* attributes

Any aria-* attributes applicable to the allowed roles.

DOM interface:

typedef (CanvasRenderingContext2D or WebGLRenderingContext) RenderingContext;

interface HTMLCanvasElement : HTMLElement {
  attribute unsigned long width;
  attribute unsigned long height;

  RenderingContext? getContext(DOMString contextId, any... arguments);
  boolean probablySupportsContext(DOMString contextId, any... arguments);

  void setContext(RenderingContext context);
  CanvasProxy transferControlToProxy();

  DOMString toDataURL(optional DOMString type, any... arguments);
  void toBlob(FileCallback? _callback, optional DOMString type, any... arguments);
};

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 Web Components.

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' 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, 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.) [[!DOMEVENTS]]

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.

The intrinsic 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. [[!CSSIMAGES]]

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

A canvas bitmap can also have a hit region list, as described in the CanvasRenderingContext2D section below.

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 direct-2d, direct-webgl, indirect, or proxied 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 fully transparent black with an intrinsic width equal to the numeric value of the element's width attribute and an intrinsic 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 a canvas element represents embedded content, it provides a paint source whose width is the element's intrinsic width, whose height is the element's intrinsic 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, if the canvas context mode is direct-2d, the user agent must set bitmap dimensions to the numeric values of the width and height content attributes.

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

context = canvas . getContext(contextId [, ... ] )

Returns an object that exposes an API for drawing on the canvas. The first argument specifies the desired API, either "2d" or "webgl". Subsequent arguments are handled by that API.

This specification defines the "2d" context below. There is also a specification that defines a "webgl" context. [[!WEBGL]]

Returns null if the given context ID is not supported, if the canvas has already been initialised with the other context type (e.g. trying to get a "2d" context after getting a "webgl" context).

Throws an InvalidStateError exception if the setContext() or transferControlToProxy() methods have been used.

supported = canvas . probablySupportsContext(contextId [, ... ] )

Returns false if calling getContext() with the same arguments would definitely return null, and true otherwise.

This return value is not a guarantee that getContext() will or will not return an object, as conditions (e.g. availability of system resources) can vary over time.

Throws an InvalidStateError exception if the setContext() or transferControlToProxy() methods have been used.

canvas . setContext(context)

Sets the canvas' rendering context to the given object.

Throws an InvalidStateError exception if the getContext() or transferControlToProxy() methods have been used.

There are two ways for a canvas element to acquire a rendering context: the canvas element can provide one via the getContext() method, and one can be assigned to it via the setContext() method. In addition, the whole issue of a rendering context can be taken out of the canvas element's hands and passed to a CanvasProxy object, which itself can then be assigned a rendering context using its setContext() method.

These three methods are mutually exclusive; calling any of the three makes the other two start throwing InvalidStateError exceptions when called.

Each rendering context has a context bitmap mode, which is one of fixed, unbound, or bound. Initially, rendering contexts must be in the unbound mode.

The getContext(contextId, arguments...) method of the canvas element, when invoked, must run the steps in the cell of the following table whose column header describes the canvas element's canvas context mode and whose row header describes the method's first argument.

* Vendors may define experimental contexts using the syntax vendorname-context, for example, moz-3d.

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

The probablySupportsContext(contextId, arguments...) method of the canvas element, when invoked, must return false if calling getContext() on the same object and with the same arguments would definitely return null at this time, and true otherwise.

The setContext(context) method of the canvas element, when invoked, must run the following steps:

1. If the canvas element's canvas context mode is neither none nor indirect, throw an InvalidStateError exception and abort these steps.

2. If context's context bitmap mode is fixed, then throw an InvalidStateError exception and abort these steps.

3. If context's context bitmap mode is bound, then run context's unbinding steps and set its context's context bitmap mode to unbound.

4. Run context's binding steps to bind it to this canvas element.

5. Set the canvas element's context mode to indirect and the context's context bitmap mode to bound.

url = canvas . toDataURL( [ type, ... ] )

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 other arguments are specific to the type, and control the way that the image is generated, as given in the table below.

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, ... ] )

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 other arguments are specific to the type, and control the way that the image is generated, as given in the table below.

The toDataURL() method must run the following steps:

1. If the canvas element's bitmap's origin-clean flag is set to false, throw a SecurityError exception and abort these steps.

2. If the canvas element's bitmap has no pixels (i.e. either its horizontal dimension or its vertical dimension is zero) then return the string "data:," and abort these steps. (This is the shortest data: URL; it represents the empty string in a text/plain resource.)

3. Let file be a serialisation of the canvas element's bitmap as a file, using the method's arguments (if any) as the arguments.

4. Return a data: URL representing file. [[!RFC2397]]

The toBlob() method must run the following steps:

1. If the canvas element's bitmap's origin-clean flag is set to false, throw a SecurityError exception and abort these steps.

2. Let callback be the first argument.

3. Let arguments be the second and subsequent arguments to the method, if any.

4. If the canvas element's bitmap has no pixels (i.e. either its horizontal dimension or its vertical dimension is zero) then let result be null.

   Otherwise, let result be a Blob object representing a serialisation of the canvas element's bitmap as a file, using arguments. [[!FILEAPI]]

5. Return, but continue running these steps in parallel.

6. If callback is null, abort these steps.

7. Queue a task to invoke the FileCallback callback with result as its argument. The task source for this task is the canvas blob serialisation task source.

[Exposed=(Window,Worker)]
interface CanvasProxy {
  void setContext(RenderingContext context);
};
// CanvasProxy implements Transferable;

<!DOCTYPE HTML>
<title>Clock</title>
<canvas></canvas> 
<script>
  var canvas = document.getElementsByTagName('canvas')[0];
  var proxy = canvas.transferControlToProxy();
  var worker = new Worker('clock.js');
  worker.postMessage(proxy, [proxy]);
</script>

onmessage = function (event) {
  var context = new CanvasRenderingContext2D();
  event.data.setContext(context); // event.data is the CanvasProxy object
  setInterval(function () {
    context.clearRect(0, 0, context.width, context.height);
    context.fillText(new Date(), 0, 100);
    context.commit();
  }, 1000);
};