HTMLCanvasElement.getContext()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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). Experimental
  • "bitmaprenderer" que criará um ImageBitmapRenderingContext que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de um ImageBitmap.

Nota: 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:

js
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.
  • Non-standard (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).
  • Non-standard (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>:

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

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

js
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.

Especificações

Specification
HTML Standard
# dom-canvas-getcontext-dev

Compatibilidade com navegadores

BCD tables only load in the browser

See also