---
title: HTMLCanvasElement.getContext()
slug: Web/API/HTMLCanvasElement/getContext
translation_of: Web/API/HTMLCanvasElement/getContext
---
<div>{{APIRef("Canvas API")}}</div>

<p class="summary">Metoda <strong><code>HTMLCanvasElement.getContext()</code></strong> zwraca kontekst pola roboczego {{HTMLElement("canvas")}}, lub {{jsxref("null")}} jeśli  identyfikator kontekstu nie jest wspierany.</p>

<h2 id="Składnia">Składnia</h2>

<pre class="syntaxbox">var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>);
var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>, <em>contextAttributes</em>);
</pre>

<h3 id="Parametry">Parametry</h3>

<dl>
 <dt><code><em>contextType</em></code></dt>
 <dd>Jest nim {{domxref("DOMString")}} zawierający identyfikator kontekstu pola roboczego powiązanego z {{HTMLElement("canvas")}}. Możliwe wartości to:
 <ul>
  <li><code>"2d"</code>,  tworzy obiekt {{domxref("CanvasRenderingContext2D")}} reprezentujący dwuwymiarowy kontekst renderowania.</li>
  <li><code>"webgl"</code> (lub <code>"experimental-webgl"</code>), tworzy obiekt {{domxref("WebGLRenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 1 WebGL (OpenGL ES 2.0).</li>
  <li><code>"webgl2"</code> tworzy obiekt {{domxref("WebGL2RenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 2 WebGL (OpenGL ES 3.0). {{experimental_inline}}</li>
  <li><code>"bitmaprenderer"</code> tworzy {{domxref("ImageBitmapRenderingContext")}}, który zapewnia możliwość zastąpenia treści {{HTMLElement("canvas")}}  na podaną {{domxref("ImageBitmap")}}.</li>
 </ul>

 <div class="note">
 <p><strong>Nota</strong>: Identyfikator "<code>experimental-webgl</code>" jest używany przy nowych wdrożeniach WebGL. Wdrożenia te nie uzyskały zgodności z pakietem testowym lub sterowniki graficzne platformy nie są jeszcze stabilne. <a href="https://www.khronos.org/">Grupa Khronos </a>certyfikuje wdrożenia WebGL zgodnie z <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">regułami zgodności</a>.</p>
 </div>
 </dd>
 <dt><code><em>contextAttributes</em></code></dt>
 <dd>
 <p>Można użyć kilku własności kontekstu przy tworzeniu kontekstu renderowania, dla przykładu: </p>

 <pre class="brush: js">const gl = canvas.getContext('webgl', {
  antialias: false,
  depth: false
});</pre>
 </dd>
 <dd>Własności kontekstu 2d:
 <ul>
  <li><strong><code>alpha</code></strong>: Boolean wskazujacy czy canvas zawiera kanał alpha. Jeśli ustawione na <code>false</code>, przeglądarka wie, że tło zawsze jest nieprzeźroczyste, co może przyspieszyć rysowanie przeźroczystych treści i obrazków.  </li>
  <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boolean wskazujący czy wiele operacji <code>read-back</code> zostało zaplanowanych. Spowoduje wymuszenie użycia oprogramowania (zamiast przyśpieszenia sprzętowego) 2D canvas i może pomóc w oszczędności pamięci przy częstym wywoływaniu {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Opcja ta jest dostepna tylko jeśli flaga <code>gfx.canvas.willReadFrequently.enable</code> jest ustawiona na <code>true</code> (która, domyślnie, dotyczy tylko B2G/Firefox OS).</li>
  <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String wskazujacy jaka pamięć jest używana (domyślnie jest to "stała" ).</li>
 </ul>
 Własności kontekstu WebGL:

 <ul>
  <li><strong><code>alpha</code></strong>: Boolean wskazujacy czy canvas zawiera bufor alpha.</li>
  <li><strong><code>depth</code></strong>: Boolean wskazujący czy bufor rysunku posiada bufor głębi o wartości co przynajmniej 16 bitów.</li>
  <li><strong><code>stencil</code></strong>: Boolean wskazujący czy bufor rysunku posiada bufor matrycy o wartości przynajmniej 8 bitów. </li>
  <li><strong><code>antialias</code></strong>: Boolean wskazujący czy używany ma być <code>anti-aliasing.</code></li>
  <li><strong><code>premultipliedAlpha</code></strong>: Boolean wskazujący czy projektant strony założył, że  bufor rysunku zawiera kolory ze wstepnie pomnożoną alfą.</li>
  <li><strong><code>preserveDrawingBuffer</code></strong>: Jeśli ustawiona na <code>true</code>, bufory nie zostaną wyczyszczone i zachowają swoje wartości, dopóki nie zostaną wyczyszczone lub nadpisane przez autora.</li>
  <li><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boolean wskazujący czy kontekst będzie tworzony, jeśli wydajność systemu jest niska.</li>
 </ul>
 </dd>
</dl>

<h3 id="Wartości_zwrotne">Wartości zwrotne</h3>

<p>{{domxref("RenderingContext")}} jest też</p>

<ul>
 <li>{{domxref("CanvasRenderingContext2D")}} dla <code>"2d"</code>,</li>
 <li>{{domxref("WebGLRenderingContext")}} dla <code>"webgl"</code> i <code>"experimental-webgl"</code>,</li>
 <li>{{domxref("WebGL2RenderingContext")}} dla <code>"webgl2"</code> lub</li>
 <li>{{domxref("ImageBitmapRenderingContext")}} dla <code>"bitmaprenderer"</code>.</li>
</ul>

<p>Jeśli <em><code>contextType</code></em> nie może dopasować możliwych kontekstów rysowania, <code><em>null</em></code> zostanie zwrócony.</p>

<h2 id="Przykłady">Przykłady</h2>

<p>Wykorzystując element {{HTMLElement("canvas")}}:</p>

<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
</pre>

<p>Kontekst <code>2d</code> uzyskać można za pomocą kodu: </p>

<pre class="brush: js">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
console.log(ctx); // CanvasRenderingContext2D { ... }
</pre>

<p>Tworzy to <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">kontekst renderowania 2D</a>, po którym można rysować.</p>

<h2 id="Specyfikacja">Specyfikacja</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specyfikacja</th>
   <th scope="col">Status</th>
   <th scope="col">Komentarz</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Snapshot {{SpecName('HTML WHATWG')}} zawiera początkową definicje.</td>
  </tr>
 </tbody>
</table>

<h2 id="Zgodność_przeglądarek">Zgodność przeglądarek</h2>



<p>{{Compat("api.HTMLCanvasElement.getContext")}}</p>

<h2 id="Zobacz_też">Zobacz też</h2>

<ul>
 <li>Interfejs definiujacy element, {{domxref("HTMLCanvasElement")}}.</li>
 <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
 <li>Dostępne konteksty renderowania: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, {{domxref("WebGL2RenderingContext")}} i {{domxref("ImageBitmapRenderingContext")}}.</li>
</ul>