Escrito por Ramón Saquete
El elemento canvas de HTML5 supone un avance muy importante en el aspecto gráfico de la Web. Sus posibilidades son infinitas, así que antes de entrar en materia, expondré unos pocos ejemplos de uso de este lienzo de HTML5, pero tened presente que el límite de esta tecnología sólo está en la imaginación:
- Se puede hacer una animación que incentive a jugar con el ratón sobre un botón de compra.
- Permite mostrar productos en tres dimensiones, donde el usuario puede interactuar con una interfaz del tipo “bola de cristal” para verlos con todo detalle.
- Puede usarse para mostrar galerías de fotos con transiciones imposibles de hacer con ninguna otra tecnología.
- Para mover videojuegos online multijugador.
- Para realizar animaciones que dejarían en ridículo a cualquiera de las realizadas con Flash.
Textura procedural aleatoria.
Recarga la página para regenerar.
Además de todo eso, como dice el título de esta entrada, también sirve para generar texturas procedurales, o dicho de otra forma menos técnica, generar imágenes mediante código.
Las texturas en la Web son usadas siempre dentro de elementos decorativos como los fondos de botones, de páginas o de bloques de contenido y, en general, de elementos que no ayudan al posicionamiento, si no que al contrario, ralentizan el tiempo de carga de la página. Estas texturas, normalmente pueden ser generadas con un algoritmo usando el elemento canvas, siempre que tengamos el suficiente nivel de JavaScript, programación gráfica y matemáticas para llevarlo a cabo.
La principal ventaja de generar imágenes mediante código en el navegador, es que éstas no ocupan prácticamente nada, puesto que las imágenes en realidad no existen, por lo que el navegador no tiene que pedirlas al servidor y esperar a que se descarguen y sólo ocupan unos pocos bytes junto al resto del código Javascript de la página. Además, éstas pueden ser virtualmente de tamaño infinito. No hace falta tener un patrón que se repita una y otra vez, ni sacrificar el tiempo de carga de la página para tener una imagen de fondo enorme que ocupe el tamaño de cualquier monitor. Por otro lado, si lo que queremos es tener un patrón que se repita se puede implementar así igualmente.
Otra ventaja de las texturas procedurales es que no estamos limitados por las aplicaciones que pueda usar el diseñador para generar texturas. Es el programador el que realiza la tarea de diseñar y el que tiene la capacidad de afinar en el aspecto visual deseado con su código, más allá de lo que podría hacer un diseñador con herramientas programadas en los paquetes de diseño de software habituales, en los que sólo se puede jugar con los parámetros preestablecidos.
Sin embargo, no todo son ventajas. Hay dos inconvenientes. El primero es que si el código no está lo suficientemente optimizado, o la complejidad de la textura no permite su optimización, entonces la imagen de la textura podría tardar demasiado en generarse en la página. El lado bueno, es que si se da este problema, el esfuerzo computacional de generar la textura lo tendría que realizar el procesador del cliente y no el servidor, por lo que no afectaría al rendimiento general de la Web, simplemente la imagen tardará unos segundos más en aparecer. Otras tecnologías de servidor que se usan para generar imágenes como los CAPTCHAS, sí afectan negativamente al rendimiento general del servidor.
El otro problema que tiene el elemento canvas, tampoco es realmente un problema, se trata de que a partir del antiguo Internet Explorer 8 hacia abajo no se soporta esta tecnología, aunque podemos hacer que IE8 la soporte con un JavaScript de Google. Sin embargo esto no permite que funcione la capacidad de poder pintar a nivel de píxel, que es la característica más útil. Por lo tanto para IE8 lo mejor que se puede hacer es lo que los desarrolladores Web llamamos un “graceful downgrade”, es decir, un degradado grácil hacia una versión que muestre una imagen normal y que, cuando se trate de uno de estos lamentables navegadores de Microsoft, se cargará en lugar de la textura procedural. Otra alternativa es instar al usuario de IE8 a que se instale un plugin de Google, el Chrome Frame, que hará que IE8 soporte esta tecnología, pero es preferible no molestar al usuario con plugins ya que lo que hará es irse de la página. Por suerte, a partir de la versión nueve ya se soporta esta tecnología, aunque con más lentitud que en otros navegadores y sin soporte de aceleración por hardware con WebGL.
El canvas no es sólo un lienzo en el que pintar, sino un lienzo que puede integrarse con la Web usando transparencias y sobre todo que puede generarse de forma oculta. Esto último sirve para luego leer la imagen generada en forma de Data URI, que podemos asignar a la propiedad background-image de CSS, al atributo src de un elemento IMG o al atributo href de un enlace como este, en el que si pincháis, podréis ver una textura procedural que he generado aplicando un coseno a una función de ruido Perlin, para que podáis ver un ejemplo.
Debido a la complejidad necesaria para crear las librerías para implementar y generar este tipo de texturas con el elemento canvas, todavía pasará mucho tiempo antes de que se empiecen a ver de forma habitual.
