HTMLCanvasElement.getContext()

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

canvas.getContext(contextType, contextAttributes);

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 (en-US) 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 (en-US) 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 (en-US) que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de um ImageBitmap (en-US).

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() (en-US) 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.

Um RenderingContext que pode ser:

• CanvasRenderingContext2D para "2d",
• WebGLRenderingContext (en-US) para "webgl" e "experimental-webgl",
• WebGL2RenderingContext (en-US) para "webgl2" ou
• ImageBitmapRenderingContext (en-US) para "bitmaprenderer".

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

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.

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

• A definição de interface, HTMLCanvasElement.
• OffscreenCanvas.getContext() (en-US)
• Contextos de renderização disponiveis: CanvasRenderingContext2D, WebGLRenderingContext (en-US) and WebGL2RenderingContext (en-US) and ImageBitmapRenderingContext (en-US).