# Crea áreas de dibujo para JavaScript con canvas Con el elemento HTML `` puedes crear un área para gráficos o animaciones utilizando JavaScript. Para ello, se crea un objeto de contexto 2D. Luego, con varios métodos de la API de la etiqueta `` defines el contenido deseado. ## ¿Qué es la etiqueta HTML canvas? HTML `` es un elemento que proporciona un área de dibujo en la que puedes **generar gráficos o animaciones** con JavaScript. El área disponible se define mediante las especificaciones de altura y anchura. El espacio puede integrarse en cualquier parte de un documento [HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html/) utilizando esta práctica [etiqueta HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/). El contenido de este “lienzo” (*canvas* en español) no es en realidad parte de la página web, por lo que no es posible aplicar [CSS](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/que-es-css-un-tutorial-con-lo-que-necesitas-saber/) u otros elementos HTML. Si un navegador no es compatible con la etiqueta HTML ``, el contenido se mostrará como un fallback. Sin embargo, los navegadores modernos admiten el elemento de manera nativa. ## Sintaxis de la etiqueta HTML `` El elemento HTML-`` por sí solo no proporciona herramientas para el diseño, sino que simplemente crea el marco en el que puedes insertar gráficos con JavaScript. La sintaxis básica del elemento es la siguiente: ```html ``` Nombras el elemento a través de `id` y le asignas las dimensiones deseadas con `width` y `height`. Opcionalmente, puedes usar otros parámetros para precisar el diseño del gráfico. ## Funcionamiento de `` explicado con un ejemplo sencillo Con la sintaxis anterior, puedes crear en cualquier momento un área simple. En nuestro siguiente ejemplo, esta área tendrá una longitud de 500 píxeles y una altura de 250 píxeles. Este es el código adecuado: ```html

Ejemplo de HTML canvas

``` Sin embargo, de esta manera solo obtienes un área vacía. Solo con JavaScript puedes llenar el elemento HTML `` generado con **formas, imágenes, textos o degradados**, y animar estos objetos si es necesario. El contenido se almacena en forma de píxeles en un mapa de bits. Posteriormente, este se puede convertir en un gráfico PNG. Para usar el elemento, utiliza el método `getElementById()`. Esto solo funciona si has asignado una ID única al área ``. Si deseas pintar, dibujar o interactuar de alguna manera en el área especificada, debes crear un **objeto de contexto 2D**. Para nuestro ejemplo anterior, esto se logra con el siguiente código: ```html const EjemploCanvas = document.getElementById("EjemploCanvas"); const ctx = EjemploCanvas.getContext("2d"); ``` Ahora todo está listo para usar el elemento HTML ``. Con la función `fillRect()`, ahora podemos colocar un simple rectángulo en el área definida. Este será de color verde azulado (teal en inglés), tendrá 200 píxeles de ancho y 150 píxeles de alto. Lo colocamos a 10 píxeles del borde izquierdo y a 50 píxeles del borde superior. El código completo es el siguiente: ```html

Ejemplo de HTML canvas

``` ## ¿Para qué se puede utilizar ``? Mientras que en nuestro ejemplo anterior solo hemos dibujado un simple rectángulo, con el elemento `` se pueden realizar formas de representación mucho más complejas. Entre otras cosas, se pueden hacer **arcos circulares, textos, transparencias, degradados de color y gráficos** en formatos *GIF*, *JPEG* y *PNG*. Estos se pueden recortar, escalar y posicionar libremente. Además, las animaciones se pueden implementar de una etiqueta HTML `` utilizando la función de tiempo de JavaScript. ## ¿Qué dimensiones puede tener un elemento ``? Las dimensiones máximas posibles para `` varían según el navegador y el entorno. Para iOS, por ejemplo, el límite es de 4096 x 4096 píxeles, mientras que otros sistemas permiten tamaños de más de 10 000 x 10 000 píxeles. Sin embargo, como el área siempre **se ajusta a la relación de aspecto**, los elementos son responsivos y, por lo tanto, son adecuados para diferentes dispositivos. ## Resumen de los métodos para la API de `` Ya hemos hablado sobre la creación de un objeto de contexto 2D. Con un objeto de este tipo integrado mediante `getContext(“2d”)`, puedes llenar el área `` en cualquier momento. A continuación, hemos resumido los métodos más importantes dentro de la API. ### Texto
Método Descripción
`font` Establece la fuente para el contenido de texto
`fillText()` Añade texto (completamente relleno) en el ``
`strokeText()` Añade texto (solo contornos)
### Imagen
Método Descripción
`drawImage()` Coloca una imagen o video dentro de un elemento ``
### Dibujo
Método Descripción
`fillRect()` Dibuja un rectángulo relleno
`strokeRect()` Dibuja un rectángulo vacío
`clearRect()` Limpia ciertos píxeles dentro de un rectángulo
### Rutas
Método Descripción
`beginPath()` Inicia una nueva ruta
`lineTo()` Dibuja una línea en la ruta
`moveTo()` Mueve la ruta a un punto dentro del lienzo
### Diseño
Método Descripción
`addColorStop()` Establece los colores y las posiciones para un degradado
`createLinearGradient()` Crea un degradado lineal
`createPattern()` Repite un elemento
`shadowBlur` Establece el desenfoque para una sombra
`shadowColor` Define el color de una sombra
### Otras funciones
Método Descripción
`restore()` Restaura un estado anterior
`save()` Guarda el estado actual y todos sus atributos
## Ejemplo de `` con texto y degradado de color Ahora utilizaremos algunos de estos métodos para nuestro ejemplo final. Primero, creamos un marco de **500 x 250 Pixel** mediante una etiqueta HTML ``. Luego, creamos un **objeto de contexto 2D**. Finalmente, agregamos un título y otra oración, que tendrá un degradado de color. El código correspondiente es el siguiente: ```html

Ejemplo de lienzo con texto y un degradado de color

Usamos los métodos strokeText() y gradient

``` This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-canvas/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-canvas/) for AI/LLM consumption.