Para que sirve la etiqueta canvas en HTML5?

Para que sirve la etiqueta canvas en HTML5?

Hola a todos y saludos desde el área Web de la Escola Espai. Una de las preguntas que frecuentemente me hacen mis alumnos tras aprender el funcionamiento de la etiqueta HTML5 Canvas es; ¿para que sirve el Canvas? En realidad ya conocen la respuesta, sirve para dibujar. Así que, ¿que es lo que realmente quieren saber? Tal vez la pregunta adecuada y a la que intentaré dar respuesta en el artículo de hoy es; ¿para que sirve poder dibujar en una web?

Si, el Canvas sirve para algo

Poder dibujar en una web, hoy día, tiene básicamente las siguientes aplicaciones; videojuegos, publicidad, gráficas, educación y, como no, arte.

Videojuegos y el elemento HTML Canvas

En el artículo del mes pasado, ya se comento la más que probable muerte de Adobe Flash. Pero gracias a la etiqueta Canvas, eso no significará la muerte de los videojuegos Web, de hecho, a diferencia de Flash, Canvas no solo permite juegos 2D, como por ejemplo Cross Code, sino que permite incluso el desarrollo de videojuegos 3D como HexGL.

Uno de los muchos videjuegos HTML5 que usan la etiqueta canvas

CrossCode: Un ejemplo de un videojuego HTML5 2D

No deberíamos de infravalorar la posibilidad de implementar algún tipo de pequeño videojuego en algún proyecto Web, es una forma de innovar, diferenciarse del resto de la competencia y ofrecer un extra a nuestros visitantes. Además, es una magnifica forma para prolongar la estancia de nuestros usuarios en nuestra web y de favorecer que quieran volver a visitarla. Algo similar es lo que desde siempre se ha hecho con esos pequeños anuncios-juegos Flash, que pueden facilitar que el usuario quiera hacer click en el banner publicitario. Y ese es otro de los casos donde tiene uso esta etiqueta HTML5.

Publicidad y el elemento HTML Canvas

Con Canvas podemos hacer anuncios más animados y llamativos que una simple y triste imagen estática. Veamos un muy sencillo ejemplo de como crear un banner animado;

Ejemplo de un Banner con Canvas (HTML)

Ejemplo de un Banner animado (HTML)

Ejemplo de un Banner con Canvas (JavaScript)

Ejemplo de un Banner animado (JavaScript)

Si queréis, podéis experimentar un poco con el código y ver el banner en funcionamiento aquí: Escola Espai Banner Example.

Como podemos ver, con el elemento Canvas y un poco de código JavaScript podemos realizar una sencilla animación que puede hacer nuestro Banner publicitario más llamativo, de forma que podamos desviar la atención del usuario hacia él, y favorecer el tan ansiado click. Obviamente, efectos más avanzados van a requerir de más código JavaScript. Podemos hacernos nuestra propia librería JavaScript para realizar estos efectos, o bien usar una de las muchas librerías existentes, como Fabric.js, EaselJSoCanvasbHive

Gráficas y el elemento HTML Canvas

Otro uso que nos permite dibujar en una Web, es la posibilidad de dibujar gráficas. Si bien es cierto que podemos usar Canvas para dibujar dichas gráficas, otra posibilidad es utilizar la etiqueta SVG que permite gráficos vectoriales. Una herramienta que nos facilita muchísimo el trabajo con la etiqueta SVG y la creación de gráficas, es Google Charts.

Google Charts es una sencilla y potente forma de añadir gráficas a nuestra Web

Google Charts es una sencilla y potente forma de añadir gráficas a nuestra Web

Otra alternativa que si utiliza el elemento canvas es Chart.js.

Educación y el elemento HTML Canvas

El elemento Canvas es especialmente útil en el campo de la educación. Es destacable su uso en el campo de las simulaciones físicas. Así, podemos hacer sistemas para simular el comportamiento de fluidos, sistemas gravitacionales, calcular la trayectoria de un proyectil, física de tejidos, etc…

Dibujando la trayectoria de un proyectil con Canvas

Dibujando la trayectoria de un proyectil

Existen librerías como Box2DJS que nos facilitan este tipo de simulaciones físicas.

Al igual que en el caso de las gráficas, también es posible realizar este tipo de simulaciones con la etiqueta SVG. Tenemos ejemplos muy educativos en la web de simulaciones interactivas de la University of Colorado, de simulaciones y explicaciones de todo tipo de leyes y fenómenos científicos.

Arte y el elemento HTML Canvas

Finalmente, otro uso que nos ofrece la etiqueta Canvas es el uso artistico. Con Canvas podemos experimentar con figuras, formas y colores de forma interactiva.

Uno de los muchos experimentos artísticos realizados con Canvas

Tentacles; Uno de los muchos experimentos artísticos realizados con Canvas

Otro uso artístico interesante es generar imágenes. Así, por ejemplo, podemos generar texturas basadas en un algoritmo (lo que se conoce como texturas procedurales). De nuevo, existen librerías JavaScript que nos facilitan este tipo de trabajos, como por ejemplo, texgen.js.

Del mismo modo, podemos usar el elemento Canvas para hacernos pequeñas herramientas para tratar imágenes, como por ejemplo, para añadir un texto tal y como hacen los famosos generadores de memes. Puedes ver y jugar un poco con nuestro generador de memes de ejemplo.

Einstein, un clasico de los memes de internet.

Einstein, un clasico de los memes de internet.

Como podéis ver, no son pocos los usos que nos permite el poder dibujar en una web, como se suele decir, el límite es vuestra imaginación.

Espero que este artículo os haya sido de interés y que os haya dado muchas ideas sobre posibles usos en vuestros proyectos Web para este elemento HTML5 tan interesante.

1 Comentario

  • Alex Radell
    07/04/2016

    Artículo interesante y útil, gracias.

Escribe un comentario