Introducción a Canvas del HTML 5

HTML 5 viene con varias novedades interesantes y una de las que podemos empezar a probar ya es el Canvas. Canvas significa en español algo así como lienzo y es básicamente eso, un área donde podemos dibujar como si fuera un lienzo.

El elemento canvas permite especificar un área de la página donde se puede, a través de scripts, dibujar y renderizar imágenes, lo que amplía notablemente las posibilidades de las páginas dinámicas y permite hacer cosas que hasta ahora estaban reservadas a los desarrolladores en Flash, con la ventaja que para usar canvas no será necesario ningún plugin en el navegador, lo que mejorará la disponibilidad de esta nueva aplicación.

En este artículo y los siguientes pretendemos dar una introducción a canvas, para los lectores de DesarrolloWeb.com interesados en conocer de cerca esta nueva utilidad de HTML 5. Al menos esperamos dar a conocer las posibilidades del canvas y ofrecer algunos ejemplos que se puedan probar ya en los navegadores más modernos.

Compatibilidad de canvas

El canvas se desarrolló inicialmente por Apple para su navegador Safari y luego fue utilizado y estandarizado por la organización WHATWG para incorporarlo a HTML 5. Posteriormente también ha sido adoptado por navegadores como Firefox y Opera.

Por lo que respecta a Chorme, es un navegador que utiliza el mismo motor de renderizado que Safari, por lo que también soporta el elemento Canvas.

De entre los navegadores más habituales sólo nos queda por soportar canvas el siempre polémico Internet Explorer. La última versión del navegador en el momento de escribir este artículo, Internet Explorer 8, no soporta canvas con funciones nativas, pero existen diversos proyectos y plugins que pueden ampliar las funcionalidades del navegador para dar soporte a este nuevo elemento del HTML 5. Por ejemplo, existe el proyecto Explorer Canvas en el que se ha preparado un plugin para que Explorer soporte el dibujo 2d que permite canvas.

Sin embargo, aunque en diversos frentes se ha comenzado a utilizar Canvas, la falta de soporte de Explorer hace que todavía no sea muy recomendable su incorporación a las aplicaciones web, ya que la mayoría de los usuarios, que utilizan explorer, no podrían ver las partes de la página donde se utiliza canvas. Esta situación se espera que cambie durante los próximos meses o años, puesto que la incorporación de canvas al HTML 5 ya es una realidad e Internet Explorer más tarde o temprano tendrá que dar soporte esta utilidad en su navegador, si no quiere que se descarte su utilización por parte de los usuarios que deseen acceder a los servicios web más avanzados.

Polémica por la propiedad intelectual de Canvas

Uno de los problemas de canvas es que se creó bajo propiedad intelectual de Apple, es decir que dicha empresa era la creadora de la ingeniería que daba soporte a este nuevo elemento y por tanto se encontraba bajo patentes de la compañía. Este hecho, añadido a la existencia de un formato abierto que sirve para hacer cosas similares como es el SVG, hizo que surgiera una polémica sobre la aceptación de este elemento en el nuevo estándar del HTML 5.

Afortunadamente Apple abrió la licencia de uso de patente, liberando la propiedad intelectual de la misma, condición estrictamente necesaria para que la W3C, que siempre apoya patentes libres, incorporase finalmente canvas dentro del nuevo estándar del lenguaje HTML.

Aplicaciones de uso de Canvas

Canvas permite dibujar en la página y actualizar dinámicamente estos dibujos, por medio de scripts y atendiendo a las acciones del usuario. Todo esto da unas posibilidades de uso tan grandes como las que disponemos con el plugin de Flash, en lo que respecta a renderización de contenidos dinámicos. Las aplicaciones pueden ser grandes como podamos imaginar, desde juegos, efectos dinámicos en interfaces de usuario, editores de código, editores gráficos, aplicaciones, efectos 3D, etc.

Actualmente algunas de las aplicaciones más novedosas para para la web utilizan ya canvas para su funcionamiento, donde se puede destacar Bespin, un editor de código de Mozilla, o Google Wave. En la entrada de la Wiki sobre Canvas podemos encontrar diversos enlaces a sitios web con ejemplos de uso de este elemento del HTML 5.

En los siguientes artículos veremos ejemplos de uso de canvas y explicaremos cómo podemos utilizar nosotros mismos esta nueva herramienta del HTML 5.