El elemento <canvas> de HTML5 se usa para dibujar gráficos mediante scripts (generalmente JavaScript). Conoce las propiedades y métodos para dibujar en el canvas.
El elemento <canvas> de HTML5 se usa para dibujar gráficos mediante scripts (generalmente JavaScript). Por sí solo, el elemento <canvas> es simplemente un contenedor vacío — se dibuja en él desde un script.
Para obtener un objeto con el que dibujar, debes llamar al método getContext('2d') del elemento. Este devuelve un objeto CanvasRenderingContext2D:
Casi todas las propiedades y métodos de esta página pertenecen a ese objeto de contexto 2D (ctx en el ejemplo anterior), no al elemento <canvas>. Las dos excepciones son getContext() y toDataURL(), que pertenecen al propio elemento <canvas>, y las propiedades width/height/data del apartado Manipulación de píxeles, que pertenecen a los objetos ImageData. Estos se agrupan en sus propias secciones a continuación.
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.
lineDashOffset
Establece o devuelve el desplazamiento para los patrones de línea discontinua.
Método
Descripción
getLineDash()
Devuelve el patrón de línea discontinua actual como un array de números.
setLineDash()
Establece el patrón de línea discontinua a partir de un array de números (p. ej., [5, 3]).
Rectángulos
Método
Descripción
rect()
Crea rectángulos.
fillRect()
Dibuja rectángulos rellenos.
strokeRect()
Dibuja contornos rectangulares.
clearRect()
Borra los píxeles especificados dentro de un rectángulo determinado.
Trazados
Método
Descripción
fill()
Rellena los subtrazados actuales con el fillStyle actual.
stroke()
Traza los subtrazados actuales con el strokeStyle actual.
beginPath()
Inicia un nuevo trazado o restablece el trazado actual.
moveTo()
Mueve el trazado al punto definido en el canvas sin dibujar una línea.
closePath()
Añade un trazado desde el punto actual de vuelta al punto de inicio.
lineTo()
Añade una línea al subtrazado actual.
clip()
Crea una región de recorte a partir del trazado 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.
ellipse()
Añade un arco elíptico al trazado.
isPointInPath()
Indica si el punto especificado está dentro del trazado actual o no.
Transformaciones
Método
Descripción
scale()
Amplía o reduce 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 sesgar, escalar y trasladar el canvas.
resetTransform()
Restablece la transformación actual a la matriz identidad.
Consulta Coordenadas de Canvas para ver cómo la matriz de transformación relaciona las posiciones de dibujo con los píxeles.
Texto
Propiedad
Descripción
font
Establece la apariencia del texto dibujado en el canvas.
textAlign
Establece la alineación del texto dibujado en el canvas.
textBaseline
Establece la alineación vertical del texto dibujado en el canvas.
direction
Establece o devuelve la dirección del texto (ltr, rtl o inherit).
Método
Descripción
fillText()
Añade texto al canvas.
strokeText()
Añade texto con contorno al canvas.
measureText()
Mide el ancho del texto.
Consulta el tutorial de texto en Canvas para ver ejemplos completos.
Dibujo de imágenes
Propiedad
Descripción
imageSmoothingEnabled
Establece o devuelve si las imágenes escaladas se suavizan (true) o se pixelan (false).
Método
Descripción
drawImage()
Dibuja una imagen, vídeo o canvas sobre el canvas.
Manipulación de píxeles
Las propiedades a continuación pertenecen al objeto ImageData devuelto por createImageData() / getImageData(), no al elemento <canvas> ni al contexto.
Propiedad de ImageData
Descripción
width
Devuelve el ancho en píxeles de un objeto ImageData.
height
Devuelve el alto en píxeles de un objeto ImageData.
data
Devuelve un Uint8ClampedArray con los datos de píxeles RGBA.
Método
Descripción
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 a partir del objeto ImageData.
Composición
Propiedad
Descripción
globalAlpha
Establece o devuelve el valor de transparencia/alpha actual.
globalCompositeOperation
Establece o devuelve el tipo de operación de composición al dibujar una nueva imagen.
filter
Establece o devuelve un filtro CSS aplicado al dibujo (p. ej., blur(4px), grayscale(1)).
Estado del canvas
Estos métodos pertenecen al contexto 2D y permiten guardar y restaurar el estado completo del dibujo (estilos, transformaciones, región de recorte) como una pila.
Método
Descripción
save()
Introduce el estado actual del contexto en la pila de estados.
restore()
Extrae el estado guardado más recientemente, restaurando esos estilos y transformaciones.
El elemento <canvas>
Los siguientes miembros pertenecen al propio elemento <canvas>, no al contexto 2D.
Miembro
Descripción
getContext()
Devuelve un contexto de dibujo para el canvas — pasa '2d' para obtener un CanvasRenderingContext2D.
toDataURL()
Devuelve una URL de datos (imagen en base64) del contenido del canvas, p. ej., 'image/png'.
Práctica
Práctica
¿Qué hace el método getContext('2d') en HTML5 Canvas?