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.

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	4	Yes	3.6	9	9¹	3.1
`height`	4	12	3.6	9	9	3.1
`mozOpaque`	No	No	3.5	No	No	No
`width`	4	12	3.6	9	9	3.1
`captureStream`	51	?	43	No	36	?
`getContext`	Yes	12	3.6	9	9	3.1
`mozFetchAsStream`	No	No	13 — 43	No	No	No
`mozGetAsFile`	No	No	4	No	No	No
`toBlob`	50	No	19	10 ms	37	Yes²
`toDataURL`	4	12	3.6	9	9	4
`transferControlToOffscreen`	No	No	44³	No	No	No

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari	Samsung Internet
Basic support	Yes	Yes	Yes	Yes	10¹	3.2	Yes
`height`	Yes	Yes	Yes	4	Yes	Yes	Yes
`mozOpaque`	No	No	No	4	No	No	No
`width`	Yes	Yes	Yes	4	Yes	Yes	Yes
`captureStream`	51	51	?	43	38	?	5.0
`getContext`	Yes	Yes	?	4	Yes	Yes	Yes
`mozFetchAsStream`	No	No	No	No	No	No	No
`mozGetAsFile`	No	No	No	4	No	No	No
`toBlob`	50	50	No	4	37	No	5.0
`toDataURL`	Yes	18	No	4	19	3	Yes
`transferControlToOffscreen`	No	No	No	44³	No	No	No

1. Opera Mini 5.0 and later has partial support.

2. See WebKit bug 71270.

3. From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.

	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	Full support 4	Full support Yes	Full support 3.6	Full support 9	Full support 9 Notes Full support 9 Notes Notes Opera Mini 5.0 and later has partial support.	Full support 3.1	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support 10 Notes Full support 10 Notes Notes Opera Mini 5.0 and later has partial support.	Full support 3.2	Full support Yes
`height`	Full support 4	Full support 12	Full support 3.6	Full support 9	Full support 9	Full support 3.1	Full support Yes	Full support Yes	Full support Yes	Full support 4	Full support Yes	Full support Yes	Full support Yes
`mozOpaque` Non-standard	No support No	No support No	Full support 3.5	No support No	No support No	No support No	No support No	No support No	No support No	Full support 4	No support No	No support No	No support No
`width`	Full support 4	Full support 12	Full support 3.6	Full support 9	Full support 9	Full support 3.1	Full support Yes	Full support Yes	Full support Yes	Full support 4	Full support Yes	Full support Yes	Full support Yes
`captureStream` ExperimentalNon-standard	Full support 51	?	Full support 43	No support No	Full support 36	?	Full support 51	Full support 51	?	Full support 43	Full support 38	?	Full support 5.0
`getContext`	Full support Yes	Full support 12	Full support 3.6	Full support 9	Full support 9	Full support 3.1	Full support Yes	Full support Yes	?	Full support 4	Full support Yes	Full support Yes	Full support Yes
`mozFetchAsStream` DeprecatedNon-standard	No support No	No support No	No support 13 — 43	No support No	No support No	No support No	No support No	No support No	No support No	No support No	No support No	No support No	No support No
`mozGetAsFile` DeprecatedNon-standard	No support No	No support No	Full support 4	No support No	No support No	No support No	No support No	No support No	No support No	Full support 4	No support No	No support No	No support No
`toBlob`	Full support 50	No support No	Full support 19	Full support 10 Prefixed Full support 10 Prefixed Prefixed Requires the vendor prefix: ms	Full support 37	Full support Yes Notes Full support Yes Notes Notes See WebKit bug 71270.	Full support 50	Full support 50	No support No	Full support 4	Full support 37	No support No	Full support 5.0
`toDataURL`	Full support 4	Full support 12	Full support 3.6	Full support 9	Full support 9	Full support 4	Full support Yes	Full support 18	No support No	Full support 4	Full support 19	Full support 3	Full support Yes
`transferControlToOffscreen` ExperimentalNon-standard	No support No	No support No	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.	No support No	No support No	No support No	No support No	No support No	No support No	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.	No support No	No support No	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>.