HTMLCanvasElement

Das HTMLCanvasElement interface bietet Eigenschaften und Methoden zum Manipulieren des Layouts und der Darstellung des <canvas>-Elements. Das HTMLCanvasElement interface erbt außerdem Eigenschaften und Methoden des HTMLElement (en-US) interface.

Eigenschaften

Erbt Eigenschaften von seinem Elternelement, HTMLElement (en-US).

HTMLCanvasElement.height (en-US): Ein positiver integer, der das height HTML-Attribut des <canvas> Elements in CSS-Pixeln repräsentiert. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert 150 verwendet.
HTMLCanvasElement.mozOpaque (en-US): Ein Boolean, der das moz-opaque HTML-Attribut des <canvas> Elements repräsentiert. Es sagt dem canvas, ob auf Transparenz verzichtet werden soll. Falls true, kann das Zeichnen auf dem canvas beschleunigt werden.
HTMLCanvasElement.width (en-US): Ein positiver integer, der das width HTML-Attribut des <canvas> Elements in CSS-Pixeln anzeigt. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert 300 verwendet.

Methoden

Erbt Eigenschaften von seinem Elternelement, HTMLElement (en-US).

HTMLCanvasElement.captureStream() (en-US): Gibt ein CanvasCaptureMediaStream (en-US) zurück, dieses ist ein Echtzeit-Video der Oberfläche des canvas.
HTMLCanvasElement.getContext() (en-US): Gibt einen context des canvas zurück oder null, falls die context-ID nicht unterstützt wird. Ein context ermöglicht es, auf dem canvas zu zeichnen. Der Aufruf dieser Methode mit "2d" gibt ein CanvasRenderingContext2D Objekt zurück, während er mit "experimental-webgl" oder "webgl" ein WebGLRenderingContext Objekt zurückgibt. Dieser context ist nur bei Browsern möglich, die WebGL unterstützen.
HTMLCanvasElement.toDataURL(): Returns a data-URL containing a representation of the image in the format specified by the type parameter (defaults to png). The returned image is in a resolution of 96dpi.
HTMLCanvasElement.toBlob() (en-US): Creates a Blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
HTMLCanvasElement.transferControlToOffscreen() (en-US): Transfers control to an OffscreenCanvas (en-US) object, either on the main thread or on a worker.
HTMLCanvasElement.mozGetAsFile() (en-US): Returns a File object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is image/png.

Spezifikationen

Spezifikation	Status	Kommentar
Media Capture from DOM Elements Die Definition von 'HTMLCanvasElement' in dieser Spezifikation.	Arbeitsentwurf	Adds the method `captureStream()`.
HTML Living Standard Die Definition von 'HTMLCanvasElement' in dieser Spezifikation.	Lebender Standard	The method `getContext()` now returns a `RenderingContext` rather than an opaque `object`. The methods `probablySupportsContext()`, `setContext()` and `transferControlToProxy()`have been added.
HTML 5.1 Die Definition von 'HTMLCanvasElement' in dieser Spezifikation.	Empfehlung
HTML5 Die Definition von 'HTMLCanvasElement' in dieser Spezifikation.	Empfehlung	Initial definition.

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support (`2D` context)	4.0	3.6 (1.9.2)	9.0	9.0 [1]	3.1
`toBlob()`	Nicht unterstützt (bug 67587)	19 (19) [2]	?	?	Nicht unterstützt (bug 71270)
`probablySupportsContext()`, `setContext()`, `transferControlToProxy()`	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`mozGetAsFile()`	Nicht unterstützt	4.0 (2)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`captureStream()`	Nicht unterstützt	41 (41)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`transferControlToOffscreen()`	Nicht unterstützt	44 (44) [3]	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support (`2D` context)	2.1	(Ja)	(Ja)	?	10.0 [1]	3.2
`webgl` context	?	?	(Ja) as `experimental-webgl`	?	?	?
`toBlob()`	Nicht unterstützt (bug 67587)	Nicht unterstützt (bug 67587)	18.0 (18) [2]	?	?	Nicht unterstützt (bug 71270)
`probablySupportsContext()`, `setContext()`, `transferControlToProxy()`	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`mozGetAsFile()`	Nicht unterstützt	Nicht unterstützt	4.0 (2)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`captureStream()`	Nicht unterstützt	Nicht unterstützt	41.0 (41)	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`transferControlToOffscreen()`	Nicht unterstützt	Nicht unterstützt	44.0 (44) [3]	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt

[1] Opera Mini 5.0 and later has partial support.

[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.

[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

Siehe auch

HTML element implementing this interface: <canvas>.