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:


```js
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:


```js
// 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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `HTMLCanvasElement`
* `<canvas>`
* `OffscreenCanvas` (en-US)