HTMLCanvasElement

Interfejs HTMLCanvasElement zapewnia własności i metody pozwalające na manipulację wygladem i prezentacją elementów canvas. Dodatkowo HTMLCanvasElement dziedziczy własności i metody interfejsu HTMLElement.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/pl/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/pl/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/pl/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/pl/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/pl/docs/Web/API/HTMLCanvasElement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="406" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLCanvasElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Własności

Własności dziedziczone są od rodzica, HTMLElement.

HTMLCanvasElement.height: Wyrażany w dodatniej liczbie całkowitej odpowiada za atrybut height elemetu HTML <canvas> i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 150.
HTMLCanvasElement.width: Wyrażany w dodatniej liczbie całkowitej odpowiada za atrybut width elemetu HTML <canvas> i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 300.

Metody

Metody dziedziczone są od rodzica, HTMLElement.

HTMLCanvasElement.captureStream(): Zwraca CanvasCaptureMediaStream, który jest wideo w czasie rzeczywistym z powierzchni elementu <canvas>.
HTMLCanvasElement.getContext(): Zwraca pole robocze elementu <canvas>, lub null jeśli kontekst nie jest wspierany. Pole robocze pozwala na rysowanie na <canvas>. Wywołanie getContext z atrybutem "2d" zwraca obiekt CanvasRenderingContext2D, natomiast wywołanie z "webgl" (lub "experimental-webgl") zwróci obiekt WebGLRenderingContext. Ten kontekst jest dostepny tylko w przeglądarkach obsługujących WebGL.

HTMLCanvasElement.toDataURL(): Zwraca data-URL reprezentujacy obraz w formacie określonym przez parametr type (domyślnie png). Zwracany obraz jest w rozdzielczości 96dpi.
HTMLCanvasElement.toBlob(): Tworzy obiekt Blob reprezentujący obraz zawierający się w <canvas>; ten plik może być buforowany z dysku lub przechowywany w pamięci wedle uznania user agent.
HTMLCanvasElement.transferControlToOffscreen(): Przenosi kontrolę do obiektu OffscreenCanvas, w głównym wątku lub w module roboczym.
HTMLCanvasElement.mozGetAsFile(): Zwraca obiekt File reprezentujący obraz zawarty w <canvas>; plik oparty jest na pamięci, posiada określoną nazwę. Jeśli typ nie został okreslony, domyslnie jest to image/png.

Specyfikacja

Specyfikacja	Status	Komentarz
Media Capture from DOM Elements The definition of 'HTMLCanvasElement' in that specification.	Working Draft	Dodano metodę `captureStream()`.
HTML Living Standard The definition of 'HTMLCanvasElement' in that specification.	Living Standard	Metoda `getContext()` zwraca teraz `RenderingContext` zamiast obiektu nieprzeźroczystego Dodano metodę `transferControlToOffscreen()`
HTML 5.1 The definition of 'HTMLCanvasElement' in that specification.	Recommendation
HTML5 The definition of 'HTMLCanvasElement' in that specification.	Recommendation	Definicja początkowa.

Zgodność przegladarek

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Chrome Full support 4	Edge Full support Yes	Firefox Full support 3.6	IE Full support 9	Opera Full support 9 Notes Full support 9 Notes Notes Opera Mini 5.0 and later has partial support.	Safari Full support 3.1	WebView Android Full support Yes	Chrome Android Full support Yes	Edge Mobile Full support Yes	Firefox Android Full support Yes	Opera Android Full support 10 Notes Full support 10 Notes Notes Opera Mini 5.0 and later has partial support.	Safari iOS Full support 3.2	Samsung Internet Android Full support Yes
`height`	Chrome Full support 4	Edge Full support 12	Firefox Full support 3.6	IE Full support 9	Opera Full support 9	Safari Full support 3.1	WebView Android Full support Yes	Chrome Android Full support Yes	Edge Mobile Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`mozOpaque` Non-standard	Chrome No support No	Edge No support No	Firefox Full support 3.5	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Edge Mobile No support No	Firefox Android Full support 4	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`width`	Chrome Full support 4	Edge Full support 12	Firefox Full support 3.6	IE Full support 9	Opera Full support 9	Safari Full support 3.1	WebView Android Full support Yes	Chrome Android Full support Yes	Edge Mobile Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`captureStream` ExperimentalNon-standard	Chrome Full support 51	Edge ?	Firefox Full support 43	IE No support No	Opera Full support 36	Safari ?	WebView Android Full support 51	Chrome Android Full support 51	Edge Mobile ?	Firefox Android Full support 43	Opera Android Full support 38	Safari iOS ?	Samsung Internet Android Full support 5.0
`getContext`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 3.6	IE Full support 9	Opera Full support 9	Safari Full support 3.1	WebView Android Full support Yes	Chrome Android Full support Yes	Edge Mobile ?	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`mozFetchAsStream` DeprecatedNon-standard	Chrome No support No	Edge No support No	Firefox No support 13 — 43	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Edge Mobile No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`mozGetAsFile` DeprecatedNon-standard	Chrome No support No	Edge No support No	Firefox Full support 4	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Edge Mobile No support No	Firefox Android Full support 4	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`toBlob`	Chrome Full support 50	Edge No support No	Firefox Full support 19	IE Full support 10 Prefixed Full support 10 Prefixed Prefixed Requires the vendor prefix: ms	Opera Full support 37	Safari Full support Yes Notes Full support Yes Notes Notes See WebKit bug 71270.	WebView Android Full support 50	Chrome Android Full support 50	Edge Mobile No support No	Firefox Android Full support 4	Opera Android Full support 37	Safari iOS No support No	Samsung Internet Android Full support 5.0
`toDataURL`	Chrome Full support 4	Edge Full support 12	Firefox Full support 3.6	IE Full support 9	Opera Full support 9	Safari Full support 4	WebView Android Full support Yes	Chrome Android Full support 18	Edge Mobile No support No	Firefox Android Full support 4	Opera Android Full support 19	Safari iOS Full support 3	Samsung Internet Android Full support Yes
`transferControlToOffscreen` ExperimentalNon-standard	Chrome No support No	Edge No support No	Firefox Full support 44 Disabled Full support 44 Disabled Disabled From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Edge Mobile No support No	Firefox Android Full support 44 Disabled Full support 44 Disabled Disabled From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.: Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.: Deprecated. Not for use in new websites.
See implementation notes.: See implementation notes.
User must explicitly enable this feature.: User must explicitly enable this feature.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

Zobacz też

HTML element implementing this interface: <canvas>.