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.

* Some parts of this feature may have varying levels of support.

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
# dom-canvas-getcontext-dev

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getContext
2d context
options.alpha parameter
options.colorSpace parameter
options.desynchronized parameter
options.willReadFrequently parameter
bitmaprenderer context
options.alpha parameter
WebGL2 context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
WebGL context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
webgpu context
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

See also