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