MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

HTMLCanvasElement.getContext()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

El método HTMLCanvasElement.getContext() retorna un contexto de dibujo en el lienzo, o null si el identificador del contexto no está soportado.

Sintaxis

canvas.getContext(contextType, contextAttributes);

Parámetros

contextType
Es una  DOMString que contiene el identificador del contexto que define el contexto de dibujo asociado a el lienzo. Los posibles valores son:
  • "2d", dando lugar a la creación de un objeto CanvasRenderingContext2D que representa un contexto de renderizado de dos dimensiones.
  • "webgl" (o "experimental-webgl") el cual creará  un objeto WebGLRenderingContext que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan WebGL version 1 (OpenGL ES 2.0).
  • "webgl2" (o "experimental-webgl2") el cual creará un objeto WebGL2RenderingContext que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan WebGL version 2 (OpenGL ES 3.0).
  • "bitmaprenderer" el cuál creará un ImageBitmapRenderingContext que únicamente provee funcionalidad para remplazar el contenido del lienzo con un ImageBitmap dado.

Nota: Los identificadores  "experimental-webgl" o "experimental-webgl2" son usados en nuevas implementaciones de WebGL. Estas implementaciones no han logrado aprobar el conjunto de pruebas de conformidad o la situación de los controladores gráficos en la plataforma no es estable aun. Khronos Group certifica las implementaciones de WebGL bajo ciertas reglas de conformidad.

contextAttributes

Puedes usar varios atributos al momento de crear tu contexto de renderizado. Por ejemplo:

canvas.getContext('webgl', 
                 { antialias: false,
                   depth: false });
Atributos del contexto 2d:
  • alpha: Booleano que indica si el lienzo contiene canal alfa. Si es asignado falso, el naveagdor sabe que el fondo siempre es opaco, lo cual puede acelerar el dibujado de contenido transparente e imágenes.
  • (Gecko únicamente) willReadFrequently: Booleano que indica si muchas operaciones de read-back están planeadas o no. Esto forzará el uso de software (en lugar de aceleración de hardware) y puede ahorrar memoria al llamar getImageData() constantemente. Esta opción solo está disponible si gfx.canvas.willReadFrequently.enable es verdadero(lo cual solo está asignado por defecto en B2G/Firefox OS).
  • (Blink únicamente) storage: Cadena que indica si el almacenamiento es usado ("persistent"  por defecto).
Atributos del contexto WebGL:
  • alpha: Booleano que indica si el lienzo contiene un buffer alfa.
  • depth: Booleano que indica si el buffer de dibujo tiene un buffer de profundidad de al menos 16 bits.
  • stencil: Booleano que indica si el buffer de dibujo tiene un stencil de al menos 8 bits.
  • antialias: Booleano que indica si se debe aplicar anti-aliasing.
  • premultipliedAlpha: Booleano que indica que el compositor de páginas asumirá que el buffer de dibujo contiene colores con alfa premultiplicado.
  • preserveDrawingBuffer: Si es verdadero los buffers no se limpiarán y mantendrán sus valores hasta que el autor los limpie o los sobreescriba.
  • failIfMajorPerformanceCaveat: Booleano que indica si un contexto será creado si el rendimiento del sistema es bajo.

Valor de retorno

Un RenderingContext que puede ser:

Si contextType no corresponde con un posible contexto de dibujo retorna null.

Ejemplos

Dado este elemento <canvas>:

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

Puedes obtener un contexto 2d del canvas con el código siguiente:

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

Ahora tienes el contexto de renderizado 2D para un canvas y puedes dibujar en él.

Especificaciones

Especificación Estado Comentarios
WHATWG HTML Living Standard
The definition of 'HTMLCanvasElement.getContext' in that specification.
Living Standard Sin cambios desde el último snapshot, HTML5
HTML5.1
The definition of 'HTMLCanvasElement.getContext' in that specification.
Recommendation  
HTML5
The definition of 'HTMLCanvasElement.getContext' in that specification.
Recommendation Snapshot del WHATWG HTML Living Standard que contiene la definición inicial.

Compatibilidad con navegadores

Característica 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 No support ? 25 (25)[4] No support No support No support
2d alpha context attribute 32 ? 30 (30) No support (Yes) No support

failIfMajorPerformanceCaveat attribute

(Yes) ? 41 (41) (Yes) (Yes) ?
bitmaprenderer context No support ? 46 (46) No support No support No support
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 No support No support ? No support No support No support No support
2d alpha context attribute No support No support ? 30.0 (30) No support No support No support
failIfMajorPerformanceCaveat attribute ? ? ? 41.0 (41) ? ? ?
bitmaprenderer context No support No support ? 46.0 (46) No support No support No support

[1] Chrome 9 y Gecko 1.9.2 inicialmente implementaron esta como experimental-webgl. A partir de Chrome 33 y Gecko 24 es implementado como webgl estándar.

[2] Internet Explorer 11, WebKit 5.1 y Firefox Mobile implementaron esto como  experimental-webgl.

[3] Opera 9 implementó esto como experimental-webgl, behind a user preference, in version 15.0 the user preference got removed.

[4] Gecko 25 implements this as "experimental-webgl2" behind the user preference webgl.enable-prototype-webgl2. Starting with Gecko 42, the string "webgl2" is used behind the same preference.

See also

Etiquetas y colaboradores del documento

 Colaboradores en esta página: OrlandoIsay
 Última actualización por: OrlandoIsay,