Como prometí anteriormente, en el post de hoy voy a hacer una introducción al elemento canvas de HTML5 profundizando un poco en sus características, sus virtudes y sus defectos.
El elemento canvas puede definirse como un entorno para crear imágenes dinámicas. El propio elemento es relativamente simple. Lo único que hay que especificar al usarlo son sus dimensiones:
Cualquier cosa que escribamos entre la apertura y cierre de la etiqueta canvas solamente será interpretado por navegadores que no soportan aún la nueva etiqueta.
En el ejemplo anterior, la imagen solo sería visible por aquellos navegadores que aún no soporten canvas
¿Cómo se usa?
Cuando trabajamos con canvas, realmente toda la magia la haremos en JavaScript. Primero debemos referenciar el elemento canvas y adquirir su contexto (API). Por el momento el único contexto disponible es el contexto bidimensional. Recomiendo usar firebug o similares a la hora de aprender a usar la API para poder ver los cambios en vivo y avanzar con mayor velocidad:
var canvas = document.getElementById('entorno_canvas');
var context = canvas.getContext('2d');Una vez adquirimos el contexto, podemos empezar a dibujar en la superficie del canvas usando la API a tal efecto documentada en https://html.spec.whatwg.org/multipage/canvas.html . La API bidimensional ofrece muchas de las herramientas que podemos encontrar en cualquier aplicación de diseño gráfico como Adobe Illustrator o Inkscape: trazos, rellenos, gradientes, sombras, formas y curvas Bézier. Claro está deberemos especificar cada acción con ellas usando JavaScript.
Dibujar con JavaScript
Puede parecerte que dibujar usando código JavaScript es algo tedioso y pesado, pero lo cierto es que cuando le pillas el punto puede ser muy divertido. De momento, vamos a especificar el color del trazo:
context.strokeStyle = '#8f9814';Cualquier cosa que dibujemos tendrá un contorno de color verde. Para visualizar este ejemplo, vamos a dibujar un rectángulo:
context.strokeRect (20, 30, 100, 50);La sintaxis del método strokeRect es como sigue strokeRect (izquierda, arriba, ancho, largo). Por lo tanto, en el ejemplo anterior, hemos dibujado un rectángulo posicionado a 20 pixels del margen izquierdo y 30 del derecho con un tamaño de 100×50 pixels.
Si por ejemplo queremos dibujar un rectángulo relleno con color, deberemos de especificar el color del relleno:
context.fillStyle = '#ff8f43';Y dibujar un rectángulo con relleno:
context.fillRect(20, 30, 100, 50);
¿Y si quiero hacer un rectángulo con trazo y relleno?. Pues generamos uno dentro del otro y listo:
context.fillRect(20, 30, 100, 50);
context.strokeRect(19, 29, 101, 51);
La API 2D tiene muchísimos métodos para trabajar con ella, échale un ojo al link anterior para ver sus especificaciones. En teoría, podemos crear cualquier imagen que pudiéramos dibujar en un programa de edición de gráficos vectoriales. Hacerlo en la práctica puede ser (y es) una tarea titánica a realizar con archivos JavaScript interminables. Obviamente, la etiqueta canvas no se ha creado para eso.
¿Para que sirve canvas?
El potencial de canvas reside en su habilidad para actualizar su contenido en tiempo real. Si usamos esa habilidad para responder a eventos de usuario, podemos crear herramientas y juegos que anteriormente a la nueva especificación hubiesen requerido de un plugin externo como Flash.
Se pueden hacer cosas increibles con canvas, una de las aplicaciones que más me han impresionado es Skywritter (Bespin) que después se integraría en Ace aunque éste último usa el DOM para dibujar el texto en lugar de canvas. Podemos ver unas screenshots de Skywritter (Bespin) en acción.
Como puedes comprobar, el potencial de canvas es enorme y no tiene nada que envidiar a plugins o frameworks JavaScript. Skywritter (Bespin) es muy potente e impresionante pero no es solo eso, es el mejor ejemplo de que no hacer con canvas.
¿Y eso por qué? te estarás preguntando. Pues porque el editor de Skywritter (Bespin) maneja el texto con el elemento canvas solo que no es texto, son una serie de formas que aparentan ser texto. Todo documento en la Web debería de poder ser descrito con un objeto DOM. El contenido dentro de canvas no puede ser representado como nodos de un objeto DOM y debemos huir de ese tipo de prácticas.
Algunos dispositivos como los lectores de pantallas y otro tipo de tecnología que provee de accesibilidad a personas discapacitadas necesitan tener acceso al DOM para que el documento tenga sentido para ellos. Es decir, sin DOM no hay accesibilidad. La falta de accesibilidad de canvas puede definirse como una gran cagada de HTML5. Si el contenido de la web (por muy chulo que esté) no puede ser accedido por cualquier tipo de dispositivo facilitando así la accesibilidad, canvas estará cometiendo los mismos errores que Flash antes que él. Aunque por fortuna, ya hay gente trabajando en una solución.
Y menos aún si lo comparamos con lo que el equipo de Ace ha conseguido desde que Skywritter se mezclara con él utilizando el DOM para dibujar el texto y por lo tanto haciéndolo accesible. Si dispones de cuenta en Github puedes probar un editor completo “en la nube“ desarrollado con JavaScript en Cloud 9 IDE, a continuación puedes ver una captura de la edición de uno de mis proyectos:
Un uso inteligente de canvas
Una posible norma a la hora de usar canvas mientras se solucionan sus problemas de accesibilidad es la misma que aplicamos cuando utilizamos JavaScript como una mejora de nuestro sitio web pero mantenemos la accesibilidad para navegadores que no soportan JavaScript como son los lectores de pantalla. Supongamos que queremos mostrar los datos en una tabla, podemos usar la API de Google Chart para generar gráficos a partir de los datos de esta tabla, pero los datos representados dentro del canvas deben de seguir siendo accesibles en la tabla existente.
Existe un plugin para jQuery que hace precisamente eso, puedes encontrarlo en el siguiente link https://www.amazon.es/. Existen otras alternativas a canvas que si pueden ser accesibles, el formato SVG está basado en XML y el XML es accesible por dichos dispositivos. Teóricamente se podría hacer lo mismo con un SVG que lo que se puede hacer con canvas pero parece ser que los desarrolladores no le han puesto demasiado empeño.
Canvas fue creado por Apple que lo añadió a Safari, el resto de fabricantes sencillamente lo copiaron, y eso no tiene por que ser malo si se consigue solucionar los problemas que el nuevo elemento presenta. Hay que recordar que los estándares siempre vienen de los fabricantes y después surgen las especificaciones y la estandarización. Por ejemplo, Microsoft añadió en IE5 al final de los 90 el objeto XMLHttpRequest y ahora está siendo estandarizado por la W3C.
Conclusión
El nuevo elemento canvas nos ofrece una potencia desconocida hasta el momento en el desarrollo de páginas web, algunos frameworks JavaScript como ExtJS4 ya incorporan este elemento en sus rutinas de renderizado HTML. Ya hemos visto cuales son los problemas que se le imputan al elemento debido a su falta de accesibilidad, como con toda herramienta, debemos hacer un uso inteligente de ella e intentar no abusar y ser diligentes o convertiremos canvas en un nuevo elemento oscuro, inaccesible e insolidario como ciertos plugins existentes.
Aunque he de reconocer que lo que se puede hacer con él es una auténtica pasada. Esperemos que sus problemas se solucionen pronto puesto que es mucho lo que este nuevo elemento puede aportar al desarrollo web.
Nota: Gracias a macdav que con este comentario ha destapado un gazapo en el artículo original que ha podido ser corregido.
En Genbeta Dev | Introducción a HTML5
