Referencia de Canvas
El elemento HTML5 <canvas> se usa para dibujar gráficos mediante scripting (comúnmente JavaScript). Pero el elemento <canvas> no tiene por sí mismo capacidades de dibujo. Para dibujar los gráficos, debes usar un script porque el elemento <canvas> es solo un contenedor para gráficos.
El método getContext() devuelve un objeto que presenta propiedades y métodos para dibujar en el canvas.
Colores, estilos y sombras
| Property | Description |
|---|---|
| fillStyle | Establece o devuelve el color, degradado o patrón usado para rellenar las formas. |
| strokeStyle | Establece o devuelve el color, degradado o patrón usado para las líneas alrededor de las formas. |
| shadowColor | Establece o devuelve el color de las sombras. |
| shadowBlur | Establece o devuelve el nivel de desenfoque de las sombras. |
| shadowOffsetX | Establece o devuelve el desplazamiento x de la sombra. |
| shadowOffsetY | Establece o devuelve el desplazamiento y de la sombra. |
| Method | Description |
|---|---|
| createLinearGradient() | Crea un degradado lineal para usar en el contenido del canvas. |
| createPattern() | Repite un elemento particular en la dirección especificada. |
| createRadialGradient() | Crea un degradado circular/radial para usar en el contenido del canvas. |
| addColorStop() | Define colores y posiciones de parada en el objeto degradado. |
Estilos de línea
| Property | Description |
|---|---|
| lineCap | Establece o devuelve el estilo de los extremos de línea. |
| lineJoin | Establece o devuelve el tipo de esquinas dibujadas. |
| lineWidth | Establece o devuelve el ancho de la línea actual. |
| miterLimit | Establece o devuelve la longitud máxima del inglete. |
| lineDash | Establece o devuelve un array de números que especifica patrones de guiones de línea. |
| lineDashOffset | Establece o devuelve el desplazamiento para los patrones de guiones de línea. |
Rectángulos
| Method | Description |
|---|---|
| rect() | Crea rectángulos. |
| fillRect() | Dibuja rectángulos rellenos. |
| strokeRect() | Dibuja contornos rectangulares. |
| clearRect() | Borra los píxeles especificados dentro de un rectángulo particular. |
Rutas
| Method | Description |
|---|---|
| fill() | Rellena la(s) subruta(s) actual(es) con el current fillStyle. |
| stroke() | Traza la(s) subruta(s) actual(es) con el current strokeStyle. |
| beginPath() | Inicia una nueva ruta o restablece la ruta actual. |
| moveTo() | Mueve la ruta al punto definido en el canvas sin dibujar una línea. |
| closePath() | Añade una ruta desde el punto actual de vuelta al punto de inicio. |
| lineTo() | Añade una línea a la subruta actual. |
| clip() | Crea una región de recorte a partir de la ruta actual. |
| quadraticCurveTo() | Añade una curva de Bézier cuadrática. |
| bezierCurveTo() | Añade una curva de Bézier cúbica. |
| arc() | Añade un arco/curva para crear círculos o partes de círculos. |
| arcTo() | Añade un arco/curva entre dos tangentes. |
| isPointInPath() | Define si el punto especificado está o no en la ruta actual. |
Transformaciones
| Method | Description |
|---|---|
| scale() | Escala hacia arriba o hacia abajo el dibujo actual. |
| rotate() | Rota el dibujo actual. |
| translate() | Ajusta el sistema de coordenadas del canvas. |
| transform() | Aplica una matriz de transformación al canvas. |
| setTransform() | Es similar a transform(). Puede usarse para inclinar, escalar y trasladar el canvas. |
Texto
| Property | Description |
|---|---|
| font | Establece la apariencia de un texto dibujado en el canvas. |
| textAlign | Establece la alineación de un texto dibujado en el canvas. |
| textBaseline | Establece la alineación vertical de un texto dibujado en el canvas. |
| Method | Description |
|---|---|
| fillText() | Añade texto al canvas. |
| strokeText() | Añade texto con contorno al canvas. |
| measureText() | Mide el ancho del texto. |
Dibujo de imágenes
| Method | Description |
|---|---|
| drawImage() | Dibuja una imagen, video o canvas sobre el canvas. |
Manipulación de píxeles
| Property | Description |
|---|---|
| width | Devuelve el ancho de un objeto ImageData. |
| height | Devuelve la altura de un objeto ImageData. |
| data | Devuelve un Uint8ClampedArray que contiene los datos de píxeles. |
| Method | Description |
|---|---|
| createImageData() | Crea un nuevo objeto ImageData. |
| getImageData() | Devuelve un objeto ImageData que copia los datos de píxeles del rectángulo especificado. |
| putImageData() | Coloca los datos de imagen en el canvas desde el objeto ImageData. |
Composición
| Property | Description |
|---|---|
| globalAlpha | Establece o devuelve el valor actual de alfa/transparencia. |
| globalCompositeOperation | Establece o devuelve el tipo de operación de composición cuando se dibuja una nueva imagen. |
Otros
| Method | Description |
|---|---|
| save() | Guarda el estado actual de un contexto. |
| restore() | Devuelve el estado de la ruta y los atributos guardados previamente. |
Nota: getContext() y toDataURL() son métodos del propio elemento <canvas>, no del contexto de dibujo.
Práctica
What can the method getContext('2d') do in HTML5 Canvas?