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 objetoCanvasRenderingContext2D
representando uma renderização bidimensional. -
"webgl"
(or"experimental-webgl"
) que criará um objetoWebGLRenderingContext
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 objetoWebGL2RenderingContext
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á umImageBitmapRenderingContext
que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de umImageBitmap
.
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:
jscanvas.getContext("webgl", { antialias: false, depth: false });
Atributos de contexto 2d:
alpha
: Boleano que indica se o canvas contém um canal alfa. Se definido comofalse
, 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 quandogetImageData()
for chamado frequentemente. Essa opção está disponivel somente, se a flaggfx.canvas.willReadFrequently.enable
está definida comotrue
(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:
CanvasRenderingContext2D
para"2d"
,WebGLRenderingContext
para"webgl"
e"experimental-webgl"
,WebGL2RenderingContext
para"webgl2"
ouImageBitmapRenderingContext
para"bitmaprenderer"
.
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.
Especificações
Specification |
---|
HTML Standard # dom-canvas-getcontext-dev |
Compatibilidade com navegadores
BCD tables only load in the browser
See also
- A definição de interface,
HTMLCanvasElement
. OffscreenCanvas.getContext()
- Contextos de renderização disponiveis:
CanvasRenderingContext2D
,WebGLRenderingContext
andWebGL2RenderingContext
andImageBitmapRenderingContext
.