Canvas
La etiqueta CANVAS (lienzo) define un espacio en el que se puede dibujar.
Además, la nueva etiqueta no solo nos permite dibujar; también ir actualizando los dibujos. Así podemos crear animaciones dinámicas sin necesidad de tener un plugin como Flash Player.
La API de CANVAS nos permite dibujar utilizando JavaScript.
En este ejemplo dibujamos la siguiente imagen utilizando CANVAS:
Está claro que como ilustración no es gran cosa. Veamos mejores ejemplos:
- Logotipo de Firefox hecho con CANVAS
- JS Wars (un juego en HTML5/CANVAS)
- Swiffy, la herramienta de Google para la conversión de archivos SWF en HTML5
Es fácil hacerse a la idea de las posibilidades que esto ofrece.
SVG (Scalable Vector Graphics)
Los Gráficos Vectoriales Escalables nos permiten describir gráficos vectoriales bidimensionales. Estos gráficos pueden ser estáticos o animados (con la ayuda de otros lenguajes).
En este ejemplo dibujamos el siguiente polígono utilizando HTML5 y SVG:
Un ejemplo un poco más interesante: un plano interactivo en SVG.