HTMLCanvasElement.getContext()

Metoda HTMLCanvasElement.getContext() zwraca kontekst pola roboczego <canvas>, lub null jeśli  identyfikator kontekstu nie jest wspierany.

Składnia

var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);

Parametry

contextType

Jest nim DOMString zawierający identyfikator kontekstu pola roboczego powiązanego z <canvas>. Możliwe wartości to:

• "2d",  tworzy obiekt CanvasRenderingContext2D reprezentujący dwuwymiarowy kontekst renderowania.
• "webgl" (lub "experimental-webgl"), tworzy obiekt 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).
• "webgl2" tworzy obiekt 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).
• "bitmaprenderer" tworzy ImageBitmapRenderingContext, który zapewnia możliwość zastąpenia treści <canvas>  na podaną ImageBitmap.

Nota: Identyfikator "experimental-webgl" jest używany przy nowych wdrożeniach WebGL. Wdrożenia te nie uzyskały zgodności z pakietem tesowym lub strowniki graficzne platformy nie są jeszcze stabilne. Grupa Khronos certyfikuje wdrożenia WebGL zgodnie z regułami zgodności.

contextAttributes

Można użyć kilku własności kontekstu przy tworzeniu kontekstu renderowania, dla przykładu: 

const gl = canvas.getContext('webgl', {
  antialias: false,
  depth: false
});

Własności kontekstu 2d:

• alpha: Boolean wskazujacy czy canvas zawiera kanał alpha. Jeśli ustawione na false, przeglądarka wie, że tło zawsze jest nieprzeźroczyste, co może przyspieszyć rysowanie przeźroczystych treści i obrazków.  
• (Gecko only) willReadFrequently: Boolean wskazujący czy wiele operacji read-back 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 getImageData(). Opcja ta jest dostepna tylko jeśli flaga gfx.canvas.willReadFrequently.enable jest ustawiona na true (która, domyślnie, dotyczy tylko B2G/Firefox OS).
• (Blink only) storage: String wskazujacy jaka pamięć jest używana (domyślnie jest to "stała" ).

Własności kontekstu WebGL:

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

Wartości zwrotne

RenderingContext jest też

• CanvasRenderingContext2D dla "2d",
• WebGLRenderingContext dla "webgl" i "experimental-webgl",
• WebGL2RenderingContext dla "webgl2" lub
• ImageBitmapRenderingContext dla "bitmaprenderer".

Jeśli contextType nie może dopasować możliwych kontekstów rysowania, null zostanie zwrócony.

Przykłady

Wykorzystując element <canvas>:

<canvas id="canvas" width="300" height="300"></canvas>

Kontekst 2d uzyskać można za pomocą kodu: 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
console.log(ctx); // CanvasRenderingContext2D { ... }

Tworzy to kontekst renderowania 2D, po którym można rysować.

Specyfikacja

Zgodność przeglądarek

Zobacz też

• Interfejs definiujacy element, HTMLCanvasElement.
• OffscreenCanvas.getContext()
• Dostępne konteksty renderowania: CanvasRenderingContext2D, WebGLRenderingContext, WebGL2RenderingContext i ImageBitmapRenderingContext.