Ejemplo de Dom HTMLCanvasElement.getContext

los HTMLCanvasElement.getContext() El método devuelve un contexto de dibujo en el lienzo, o null si el identificador de contexto no es compatible o el lienzo ya se ha configurado en un modo de contexto diferente.

Las llamadas posteriores a este método en el mismo elemento de lienzo, con el mismo contextType argumento, siempre devolverá la misma instancia de contexto de dibujo que se devolvió la primera vez que se invocó el método. No es posible obtener un objeto de contexto de dibujo diferente en un elemento de lienzo determinado.

Sintaxis

var ctx = canvas.getContext(contextType);var ctx = canvas.getContext(contextType, contextAttributes);

Parámetros

contextType

Es un DOMString que contiene el identificador de contexto que define el contexto de dibujo asociado al lienzo. Los valores posibles son:

• "2d", lo que lleva a la creación de un CanvasRenderingContext2D objeto que representa un contexto de representación bidimensional.
• "webgl" (o "experimental-webgl") que creará un WebGLRenderingContext objeto que representa un contexto de representación tridimensional. Este contexto solo está disponible en navegadores que implementan WebGL versión 1 (OpenGL ES 2.0).
• "webgl2" que creará un WebGL2RenderingContext objeto que representa un contexto de representación tridimensional. Este contexto solo está disponible en navegadores que implementan WebGL versión 2 (OpenGL ES 3.0). Esta es una API experimental que no debe usarse en código de producción.
• "bitmaprenderer" que creará un ImageBitmapRenderingContext que solo proporciona funcionalidad para reemplazar el contenido del lienzo con un determinado ImageBitmap.

Nota: El identificador "experimental-webgl" se utiliza en nuevas implementaciones de WebGL. Estas implementaciones no han alcanzado la conformidad del conjunto de pruebas o los controladores de gráficos de la plataforma aún no son estables. los Grupo Khronos certifica las implementaciones de WebGL bajo ciertas reglas de conformidad.

contextAttributes

Puede utilizar varios contextos attributes al crear su contexto de renderizado, por ejemplo:

const gl = canvas.getContext('webgl',
  antialias:false,
  depth:false);

Contexto 2d attributes:

• alpha: Booleano que indica si el lienzo contiene un canal alfa. Si se establece en false, el navegador ahora sabe que el fondo siempre es opaco, lo que puede acelerar el dibujo de contenido e imágenes transparentes.
• desynchronized: Booleano que sugiere al agente de usuario que reduzca la latencia desincronizando el ciclo de pintura del lienzo del bucle de eventos.
• Esta API no se ha estandarizado. (Solo Gecko) willReadFrequently: Booleano que indica si se han planificado muchas operaciones de lectura. Esto forzará el uso de un lienzo 2D de software (en lugar de hardware acelerado) y puede ahorrar memoria al llamar getImageData() frecuentemente. Esta opción solo está disponible si la bandera gfx.canvas.willReadFrequently.enable se establece en true (que, de forma predeterminada, es solo el caso de B2G / Firefox OS).
• Esta API no se ha estandarizado. (Solo parpadea) storage: Cadena que indica qué almacenamiento se utiliza (“persistente” por defecto).

Contexto WebGL attributes:

• alpha: Booleano que indica si el lienzo contiene un búfer alfa.
• desynchronized: Booleano que sugiere al agente de usuario que reduzca la latencia desincronizando el ciclo de pintura del lienzo del bucle de eventos.
• antialias: Booleano que indica si se debe realizar el suavizado o no.
• depth: Booleano que indica que el búfer de dibujo tiene un búfer de profundidad de al menos 16 bits.
• failIfMajorPerformanceCaveat: Booleano que indica si se creará un contexto si el rendimiento del sistema es bajo o si no hay GPU de hardware disponible.
• powerPreference: Una sugerencia para el agente de usuario que indica qué configuración de GPU es adecuada para el contexto WebGL. Los posibles valores son:
  • "default": Deje que el agente de usuario decida qué configuración de GPU es la más adecuada. Este es el valor predeterminado.
  • "high-performance": Prioriza el rendimiento de renderizado sobre el consumo de energía.
  • "low-power": Prioriza el ahorro de energía sobre el rendimiento de renderizado.
• premultipliedAlpha: Booleano que indica que el compositor de la página asumirá que el búfer de dibujo contiene colores con alfa pre-multiplicado.
• preserveDrawingBuffer: Si el valor es true los búferes no se borrarán y conservarán sus valores hasta que el autor los borre o los sobrescriba.
• stencil: Booleano que indica que el búfer de dibujo tiene un búfer de plantilla de al menos 8 bits.

Valor devuelto

A RenderingContext que es un

• CanvasRenderingContext2D por "2d",
• WebGLRenderingContext por "webgl" y "experimental-webgl",
• WebGL2RenderingContext por "webgl2" o
• ImageBitmapRenderingContext por "bitmaprenderer".

Si el contextType no coincide con un posible contexto de dibujo o difiere del primero contextType solicitado, null es regresado.

Ejemplos de

Dado este elemento:

<canvasid="canvas"width="300"height="300">canvas>

Puedes conseguir un 2d contexto del lienzo con el siguiente código:

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

Ahora tiene el contexto de renderizado 2D para un lienzo y puede dibujar dentro de él.

Especificaciones

Compatibilidad del navegador

Ver también

• CanvasRenderingContext2D.getContextAttributes()
• WebGLRenderingContext.getContextAttributes()
• La interfaz que lo define, HTMLCanvasElement.
• OffscreenCanvas.getContext()
• Contextos de representación disponibles: CanvasRenderingContext2D, WebGLRenderingContext y WebGL2RenderingContext y ImageBitmapRenderingContext.