Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

O metodo HTMLCanvasElement.getContext() retorna um contexto de desenho no canvas, ou null se o contexto identificado não é suportado.

Syntax

canvas.getContext(contextType, contextAttributes);

Parametros

contextType
É um DOMString contendo o contexto identificador definindo o contexto de desenho associado ao canvas.        Os valores possiveis são:
  • "2d", levando a criação de um objeto CanvasRenderingContext2D representando uma  renderização bidimensional.
  • "webgl" (or "experimental-webgl") que criará um objeto WebGLRenderingContext representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam WebGL versão 1 (OpenGL ES 2.0).
  • "webgl2" que criará um objeto WebGL2RenderingContext representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam WebGL versão 2 (OpenGL ES 3.0).
  • "bitmaprenderer" que criará um  ImageBitmapRenderingContext que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de um ImageBitmap.

Note: O identificador "experimental-webgl" é usado em novas implementações do WebGL. Essas implementações ou ainda não passaram nos casos de teste, ou os drivers gráficos na plataforma ainda não estão estáveis. O Khronos Group certifica as implementações do WebGL sob certas regas de conformidade.

contextAttributes

Você pode usar alguns atributos de contexto quando criar o seu contexto de renderização, por exemplo:

canvas.getContext('webgl', 
                 { antialias: false,
                   depth: false });
Atributos de contexto 2d:
  • alpha: Boleano que indica se o canvas contém um canal alfa. Se definido como false, o browser saberá que o resultado será sempre opaco, o que pode acelerar o desenho de conteudo transparente e imagens.
  • (Gecko only) willReadFrequently: Boleano que indica quando uma série de operações read-back estão planejadas. Isso forçará o uso de renderização 2D no canvas via software (ao invés de utilizar GPU) o que pode salvar memoria quando getImageData() for chamado frequentemente. Essa opção está disponivel somente, se a flag gfx.canvas.willReadFrequently.enable está definida como true (o que, por padrão, é o caso do B2G/Firefox OS apenas).
  • (Blink only) storage: String que indica qual storage é usado ("persistent" por padrão).
Atributos de contexto WebGL:
  • alpha: Boleano que indica se o canvas contém um buffer alfa.
  • depth: Boleano que indica que o buffer do desenho tem um buffer de profundidade de pelo menos 16 bits.
  • stencil: Boleano que indica que o buffer do desenho tem um buffer de stencil de pelo menos 8 bits.
  • antialias: Boleano que indica se deve realizar o anti-aliasing ou não.
  • premultipliedAlpha: Boleano que indica se o compositor da página vai assumir que o buffer do desenho contendo cores com alfa pré-multiplicado.
  • preserveDrawingBuffer: Se o valor é true os buffers não serão limpos e preservarão seus valores até serem limpos ou subrescritos pelo autor.
  • failIfMajorPerformanceCaveat: Boleano que indica se um contexto será criado se a performance do sistema for baixa.

Return value

Um RenderingContext que pode ser:

Se o contextType não bater com um possivel contexto de desenho,null é retornado.

Examples

Dado este elemento <canvas>:

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

Você pega um contexto 2d do canvas com o código a seguir:

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

Agora você tem contexto de renderização 2d para o canvas e você pode desenhar nele.

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'HTMLCanvasElement.getContext' in that specification.
Padrão em tempo real Nenhuma mudança desde o ultimo snapshot, HTML5
HTML 5.1
The definition of 'HTMLCanvasElement.getContext' in that specification.
Recomendação  
HTML5
The definition of 'HTMLCanvasElement.getContext' in that specification.
Recomendação Snapshot do HTML Living Standard contendo a definição inicial.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (2d context) 4 (Yes) 3.6 (1.9.2) 9 9 3.1
webgl context 9[1]
33
(Yes) 3.6 (1.9.2)[1]
24 (24)
11.0[2] 9.0[3] 5.1[2]
webgl2 context  56 ? 25 (25)[4] Não suportado Não suportado Não suportado
2d alpha context attribute 32 ? 30 (30) Não suportado (Yes) Não suportado

failIfMajorPerformanceCaveat attribute

(Yes) ? 41 (41) (Yes) (Yes) ?
bitmaprenderer context Não suportado ? 46 (46) Não suportado Não suportado Não suportado
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (2d context) (Yes) (Yes) (Yes) 1.0 (1.9.2) (Yes) (Yes) (Yes)
webgl context ? ? (Yes) (Yes)[2] ? ? ?
webgl2 context  Não suportado Não suportado ? Não suportado Não suportado Não suportado Não suportado
2d alpha context attribute Não suportado Não suportado ? 30.0 (30) Não suportado Não suportado Não suportado
failIfMajorPerformanceCaveat attribute ? ? ? 41.0 (41) ? ? ?
bitmaprenderer context Não suportado Não suportado ? 46.0 (46) Não suportado Não suportado Não suportado

[1] Chrome 9 e Gecko 1.9.2 inicialmente implementaram isso como um experimental-webgl. Desde o Chrome 33 e Gecko 24 é implementado como definido pelo padrão: webgl.

[2] Internet Explorer 11, WebKit 5.1 e Firefox Mobile implementaram isso como um experimental-webgl.

[3] Opera 9 implementou isso como um experimental-webgl, ativado nas preferencias do usuario, na versão 15.0 a preferencia de usuario foi removida.

[4] Gecko 25 implementou isso como um "experimental-webgl2" ativado na preferencia do usuario webgl.enable-prototype-webgl2. Apartir do Gecko 42, a string "webgl2"é usada na mesma configuração e "experimental-webgl2" não é mais aceito.

See also

Etiquetas do documento e colaboradores

 Colaboradores desta página: Bigous, raffaeldantass
 Última atualização por: Bigous,