<canvas>: element płótna

This translation is in progress.

{{HTMLRef}}

Użyj elementu HTML <canvas> wraz z canvas scripting API lub WebGL API, aby móc tworzyć grafiki i animacje.

Kategorie kontentu Treści płynne (flow content), treści frazujące (phrasing content), treści osadzone (embedded content), treści namacalne (palpable content).
Dozwolone treści Przezroczyste, ale bez potomków treści interaktywnych z wyjątkiem elementów {{HTMLElement("a")}}, elementów {{HTMLElement("button")}}, elementów {{HTMLElement("input")}}, których atrybuty {{htmlattrxref("type", "input")} to checkbox, radio lub button.
Pominięcie tagu {{no_tag_omission}}
Dozwoleni rodzice Każdy element, który akceptuje treści frazujące.
Dozwolone role ARIA Wszelkie
Interfejs DOM {{domxref("HTMLCanvasElement")}}

Atrybuty

Niniejsze atrybuty elementu zawierają atrybuty globalne.

{{htmlattrdef("height")}}
Wysokość przestrzeni w pikselach CSS. Domyślnie wartość ta jest równa 150.
{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}
Niech płótno wie, czy przezroczystość będzie współczynnikiem czy nie będzie. Gdy płótno wie, że przezroczystość nie będzie występować, wydajność podczas rysowania zostanie zoptymalizowana. Ta funkcjonalność jest wpierana wyłącznie przez przeglądarki bazowane na Mozilli; zamiast tego użyj uniwersalnego {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}}.
{{htmlattrdef("width")}}
Szerokość przestrzeni w pikselach CSS. Domyślnie wartość ta jest równa 300.

Notki dot. używania

Zawartość alternatywna

Powinnaś/powinieneś (i powinnaś/powinieneś) zadbać o zawartość alternatywną w bloku <canvas>. Treść zostanie wyrenderowana zarówno na starszych przeglądarkach nie wspierających płótna, jak i na przeglądarkach z wyłączoną obsługą JavaScript.

Wymagany tag </canvas>

W przeciwieństwie do elementu {{HTMLElement("img")}}, element {{HTMLElement("canvas")}} wymaga użycia tagu zamykającego (</canvas>).

Określanie rozmiaru płótna używając CSS a HTML

Wyświetlany rozmiar płótna moża być określany poprzez zastosowanie CSS. Niestety w przypadku takiego rozwiazania obraz jest skalowany podczas renderowania (aby dopasować się do stylowanego rozmiaru) co może sprawić, że finalny rendering grafiki będzie zaburzony.

Lepiej określić wymiary płótna poprzez ustalenie atrybutów width i height bezpośrednio w elemencie <canvas>, albo bezpośrednio w HTML albo poprzez JavaScript.

Maximum canvas size

The maximum size of a <canvas> element is very large, but the exact size depends on the browser. The following is some data we've collected from various tests and other sources (e.g. Stack Overflow):

Browser Maximum height Maximum width Maximum area
Chrome 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384)
Firefox 32,767 pixels 32,767 pixels 472,907,776 pixels (i.e., 22,528 x 20,992)
Safari 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384)
IE 8,192 pixels 8,192 pixels ?

Note: Exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work.

Examples

This code snippet adds a canvas element to your HTML document. A fallback text is provided if a browser is unable to render the canvas, or if can't read a canvas. Providing a useful fallback text or sub DOM helps to make the the canvas more accessible.

<canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas displays. 
</canvas> 

Then in the JavaScript code, call {{domxref("HTMLCanvasElement.getContext()")}} to get a drawing context and start drawing onto the canvas:

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
</script>

Opaque canvas

If your canvas does not use transparency, you can tell the browser that your canvas is opaque, this will be used internally to optimize rendering. To do this, set alpha to false when getting the drawing context:

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d', { alpha: false });
</script>

Before the alpha option was standardized, you could use the moz-opaque {{non-standard_inline}} {{deprecated_inline}} attribute on the canvas tag. However, this only works in Mozilla-based rendering engines and should be avoided; check bug 878155 to track when this attribute will be removed.

<canvas id="myCanvas" moz-opaque></canvas>

Accessibility concerns

Alternative content

The <canvas> element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools as semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guides can help to make it more accessible.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'scripting-1.html#the-canvas-element', '<canvas>')}} {{Spec2('HTML5 W3C')}} Initial definition

Browser compatibility

{{Compat("html.elements.canvas")}}

See also