CanvasRenderingContext2D

La interfaz CanvasRenderingContext2D, parte de la API Canvas, proporciona el contexto de renderizado 2D para la superficie de dibujo de un elemento <canvas>. Esto se usa para dibujar, formas, texto, imagenes, y otros objetos.

Las propiedades y métodos de la interface son descritos en la sección de referencia de esta página. El Tutorial de canvas también tiene mas explicaciones, ejemplos y recursos.

Para OffscreenCanvas (en-US), hay una interfaz equivalente que proporciona el contexto del renderizado. El contexto de renderizado del fuera de la pantalla hereda la mayoría de las mismas propiedades y métodos que CanvasRenderingContext2D y se describe con mas detalle en la página de referencia OffscreenCanvasRenderingContext2D (en-US).

Ejemplo básico

Para obtener una instancia de CanvasRenderingContext2D, primero debe tener un elemento HTML canvas con el que trabajar.

html

<canvas id="my-house" width="300" height="300"></canvas>

Para obtener el contexto de renderizado 2D del canvas, llame a getContext() sobre el elemento <canvas>, proporcionando '2d' como el argumento:

const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

Con el contexto en la mano, puedes dibujar lo que quieras. Este código dibuja una casa:

// Establecer ando de linea
ctx.lineWidth = 10;

// Muro
ctx.strokeRect(75, 140, 150, 110);

// Puerta
ctx.fillRect(130, 190, 40, 60);

// Techo
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

El dibujo resultante se ve así:

Referencia

Contexto

CanvasRenderingContext2D.isContextLost() (en-US) Experimental: Devuelve true si se perdió el contexto del renderizado.

Dibujar rectángulos

Hay tres métodos que inmediatamente dibujan rectángulos en el canvas.

CanvasRenderingContext2D.clearRect(): Establece todos los pixeles en el rectángulo definido por el punto de inicio (x, y) y el tamaño (ancho, alto) en negro transparente, borrando cualquier contenido previamente dibujado.
CanvasRenderingContext2D.fillRect(): Dibuja un rectángulo rellenado en la posición (x, y) cuyo tamaño esta determinado por ancho y la altura.
CanvasRenderingContext2D.strokeRect() (en-US): Pinta un rectángulo que tiene un punto inicial en (x, y) y tiene un ancho w y una altura h en el canvas, utilizando el estilo de trazo actual.

Dibujar texto

Los siguientes métodos dibujan un texto. Véase tambien el objeto TextMetrics (en-US) para las propiedades de texto

CanvasRenderingContext2D.fillText() (en-US): Dibuja (rellena) un texto dado en la posición dada (x, y)
CanvasRenderingContext2D.strokeText() (en-US): Dibuja (trazos) un texto dado en la posición dada (x, y)
CanvasRenderingContext2D.measureText() (en-US): Devuelve un objeto TextMetrics (en-US).

Estilos de linea

Los siguientes métodos y propiedades controlan cómo se dibujan las líneas.

CanvasRenderingContext2D.lineWidth (en-US): Ancho de líneas. Por defecto 1.0.
CanvasRenderingContext2D.lineCap: Tipo de terminaciones en el final de las líneas. Posibles valores: butt (por defecto), round, square.
CanvasRenderingContext2D.lineJoin (en-US): Define el tipo de esquinas donde dos líneas se encuentran. Posibles valores: round, bevel, miter (por defecto).
CanvasRenderingContext2D.miterLimit (en-US): Relación límite angular. Por defecto 10.
CanvasRenderingContext2D.getLineDash() (en-US): Devuelve el arreglo actual del patrón de líneas de guiones que contiene un número par de números no negativos.
CanvasRenderingContext2D.setLineDash() (en-US): Establece el patrón de línea de guiones de la linea actual.
CanvasRenderingContext2D.lineDashOffset (en-US): Especifica donde inicia el arreglo de guiones en una linea.

Estilos de texto

Las siguientes propiedades controlan cómo se presenta el texto.

CanvasRenderingContext2D.font (en-US): Configuración de fuente. Valor por defecto "10px sans-serif".
CanvasRenderingContext2D.textAlign (en-US): Configuración de alineación de texto. Posibles valores: start (por defecto), end, left, right, center.
CanvasRenderingContext2D.textBaseline (en-US): Configuración de alineación de línea base. Posibles valores: top, hanging, middle, alphabetic (por defecto), ideographic, bottom.
CanvasRenderingContext2D.direction (en-US): Direccionalidad. Posibles valores: ltr, rtl, inherit (por defecto).
CanvasRenderingContext2D.letterSpacing (en-US) Experimental: Espaciado de letras. Por defecto: 0px.
CanvasRenderingContext2D.fontKerning (en-US): Interletraje de fuente. Posibles valores: auto (por defecto), normal, none.
CanvasRenderingContext2D.fontStretch (en-US) Experimental: Estiramiento de fuente. Posibles valores: ultra-condensed, extra-condensed, condensed, semi-condensed, normal (por defecto), semi-expanded, expanded, extra-expanded, ultra-expanded.
CanvasRenderingContext2D.fontVariantCaps (en-US) Experimental: Mayúsculas de variante de fuente. Posibles valores: normal (por defecto), small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.
CanvasRenderingContext2D.textRendering (en-US) Experimental: Renderizado de texto. Posibles valores: auto (por defecto), optimizeSpeed, optimizeLegibility, geometricPrecision.
CanvasRenderingContext2D.wordSpacing (en-US) Experimental: Espaciado entre palabras. Valor por defecto: 0px

Estilos de relleno y trazo

El estilo de relleno se usa para los colores y estilos dentro de las formas y el estilo de trazo se usa para las líneas alrededor de las formas.

CanvasRenderingContext2D.fillStyle (en-US): Color o estilo para usar en las formas. Por defecto #000 (negro).
CanvasRenderingContext2D.strokeStyle (en-US): Utilizado para dar color o estilo al borde de las formas Por defecto #000 (negro).

Degradados y patrones

CanvasRenderingContext2D.createConicGradient() (en-US): Crea un degradado cónico alrededor de un punto dado por las coordenadas representadas por los parámetros.
CanvasRenderingContext2D.createLinearGradient() (en-US): Crea un degradado lineal a lo largo de la línea dada por las coordenadas representadas por los parámetros.
CanvasRenderingContext2D.createRadialGradient() (en-US): Crea un degradado radial dado por las coordenadas de los dos círculos representados por los parámetros.
CanvasRenderingContext2D.createPattern() (en-US): Crea un patrón utilizando la imagen especificada. Repite la fuente en las direcciones especificadas por el argumento de repetición. Este método devuelve un CanvasPattern (en-US).

Sombras

CanvasRenderingContext2D.shadowBlur (en-US): Especifica el efecto de desenfoque. Por defecto: 0
CanvasRenderingContext2D.shadowColor (en-US): Color de la sombra. Por defecto: totalmente transparente negro.
CanvasRenderingContext2D.shadowOffsetX (en-US): Distancia horizontal del desplazamiento de la sombra. Por defecto: 0.
CanvasRenderingContext2D.shadowOffsetY (en-US): Distancia vertical del desplazamiento de la sombra. Por defecto: 0.

Rutas

Los siguientes métodos pueden usarse para manipular las rutas de los objetos.

CanvasRenderingContext2D.beginPath(): Inicia una nueva ruta al vaciar la lista de sub-rutas. Llame a este método cuando desee crear una nueva ruta.
CanvasRenderingContext2D.closePath() (en-US): Hace que la punta del bolígrafo retroceda hasta el inicio de la sub-ruta actual. Intenta dibujar una línea recta desde el punto actual hasta el inicio. Si la forma ya ha sido cerrada o tiene solo un punto, esta función no hace nada.
CanvasRenderingContext2D.moveTo() (en-US): Mueve el punto de inicio de una nueva sub-ruta a las coordenadas (x, y).
CanvasRenderingContext2D.lineTo() (en-US): Conecta el último punto de la ruta secundaria actual a las coordenadas (x, y) especificadas con una línea recta.
CanvasRenderingContext2D.bezierCurveTo() (en-US): Agrega una curva de Bézier cúbica a la ruta actual.
CanvasRenderingContext2D.quadraticCurveTo() (en-US): Agrega una curva de Bézier cuadrática a la ruta actual.
CanvasRenderingContext2D.arc(): Agrega una arco circular a la ruta actual.
CanvasRenderingContext2D.arcTo() (en-US): Agrega un arco a la ruta actual con los puntos de control y el radio dados, conectado al punto anterior por una línea recta.
CanvasRenderingContext2D.ellipse() (en-US): Agrega un arco elíptico a la ruta actual.
CanvasRenderingContext2D.rect() (en-US): Crea una ruta para un rectángulo en la posición (x, y) con un tamaño determinado por el ancho y la altura.
CanvasRenderingContext2D.roundRect() (en-US): Crea una ruta para un rectángulo redondeado con una posición, ancho, alto y radios de esquina especificados.

Dibujar rutas

CanvasRenderingContext2D.fill() (en-US): Rellena las sub-rutas actuales con el estilo de relleno actual.
CanvasRenderingContext2D.stroke() (en-US): Traza las sub-rutas actuales con el estilo de trazo actual.
CanvasRenderingContext2D.drawFocusIfNeeded() (en-US): Si se enfoca un elemento dado, este método dibuja un anillo de enfoque alrededor de la ruta actual.
CanvasRenderingContext2D.scrollPathIntoView() (en-US) Experimental: Desplaza la ruta actual o una ruta dada a la vista.
CanvasRenderingContext2D.clip() (en-US): Crea una ruta de recorte a partir de las sub-rutas actuales. Todo lo que se dibuja después de llamar a clip() aparece solo dentro de la ruta de recorte. Para una ejemplo, consulte Trazados de recorte en el tutorial de Canvas.
CanvasRenderingContext2D.isPointInPath() (en-US): Informa si el punto especificado está contenido o no en la ruta actual.
CanvasRenderingContext2D.isPointInStroke() (en-US): Informa si el punto especificado está o no dentro del área contenida por el trazo de una ruta.

Transformaciones

Los objetos en el contexto de renderizado CanvasRenderingContext2D tienen una matriz de transformación actual y métodos para manipularla. La matriz de transformación se aplica al crear la ruta por defecto actual, pintar texto, formas y objetos Path2D (en-US). Los métodos enumerados a continuación permanecen por razones históricas y de compatibilidad, ya que los objetos DOMMatrix (en-US) se usan en la mayoría de las partes de la API hoy en día y se usarán en el futuro.

CanvasRenderingContext2D.getTransform() (en-US): Recupera la matriz de transformación actual que se está aplicando al contexto.
CanvasRenderingContext2D.rotate(): Añade una rotación a la matriz de transformación. El argumento del ángulo representa un ángulo de rotación en el sentido de las agujas del reloj y se expresa en radianes.
CanvasRenderingContext2D.scale() (en-US): Agrega una transformación de escala a las unidades del canvas por x horizontalmente y por y verticalmente.
CanvasRenderingContext2D.translate() (en-US): Agrega una transformación de traslación moviendo el canvas y su origen x horizontalmente y y verticalmente en la cuadricula.
CanvasRenderingContext2D.transform() (en-US): Multiplica la matriz de transformación actual con la matriz descrito por sus argumentos.
CanvasRenderingContext2D.setTransform() (en-US): Reestablece la transformación actual a la matriz de identidad, y luego invoca el método transform() con los mismos argumentos.
CanvasRenderingContext2D.resetTransform() (en-US): Reestablece la transformación actual por la matriz de identidad.

Composición

CanvasRenderingContext2D.globalAlpha (en-US): Valor alfa que se aplica a formas e imágenes antes de que se compongan en el canvas. Por defecto 1.0 (opaco).
CanvasRenderingContext2D.globalCompositeOperation: Con globalAlpha aplicado esto establece cómo se dibujan las formas y las imágenes en el mapa de bits existente.

Dibujar imagenes

CanvasRenderingContext2D.drawImage(): Dibuja la imagen especificada. Este método esta disponible en multiples formatos, proporcionando una gran flexibilidad en su uso.

Manipulación de pixeles

Véase también el objeto ImageData (en-US).

CanvasRenderingContext2D.createImageData() (en-US): Crea un nuevo objeto ImageData (en-US) con las dimensiones especificadas. Todos los pixeles del nuevo objeto son de color negro transparente.
CanvasRenderingContext2D.getImageData(): Devuelve un objeto ImageData (en-US) que representa los datos de píxeles subyacentes para el área del canvas indicada por el rectángulo que comienza en (sx, sy) y tiene un ancho sw y un alto sh.
CanvasRenderingContext2D.putImageData() (en-US): Pinta los datos del objeto ImageData (en-US) proporcionado en el mapa de bits. Si se proporciona un rectángulo sucio, solo se pintan los píxeles de ese rectángulo.

Suavizado de imagen

CanvasRenderingContext2D.imageSmoothingEnabled (en-US): Modo de imagen suavizado; si esta desactivado, las imágenes no se suavizarán si se escalan.
CanvasRenderingContext2D.imageSmoothingQuality (en-US): Permite establecer la calidad del suavizado de imagen.

El estado del canvas

El contexto de renderizado CanvasRenderingContext2D contiene una variedad de estados de estilo de dibujo (atributos para estilos de línea, estilos de relleno, estilos de sombra, estilos de texto). Los siguientes métodos lo ayudan a trabajar con ese estado:

CanvasRenderingContext2D.save(): Guarda el estado del estilo de dibujo actual usando una pila para que pueda revertir cualquier cambio que le haga usando restore().
CanvasRenderingContext2D.restore() (en-US): Restaura el estado del estilo de dibujo al último elemento en la 'pila de estado' guardada por save().
CanvasRenderingContext2D.canvas (en-US): Una referencia inversa de solo lectura a HTMLCanvasElement. Puede ser null si no esta asociado a un elemento <canvas>.
CanvasRenderingContext2D.getContextAttributes() (en-US): Devuelve un objeto que contiene los atributos del contexto actual. Los atributos de contexto se pueden solicitar con HTMLCanvasElement.getContext().
CanvasRenderingContext2D.reset() (en-US) Experimental: Restablece el contexto de renderizado, incluido el búfer de respaldo, la pila de estado del dibujo, la ruta y los estilos
CanvasRenderingContext2D.isContextLost() (en-US) Experimental: Devuelve true si se perdió el contexto de renderizado.

Filtros

CanvasRenderingContext2D.filter (en-US): Aplica un filtro CSS ó SVG, por ejemplo, para cambiar su brillo o desenfoque.

Especificaciones

Specification
HTML Standard # 2dcontext

Compatibilidad con navegadores

BCD tables only load in the browser