Core HTML5 Canvas

Guía extensa y muy práctica de David Geary, publicada en 2012 en la serie Core de Prentice Hall, dedicada por completo a la API de gráficos 2D del elemento canvas de HTML5. Muestra cómo usarla para crear aplicaciones web con gráficos ricos, animaciones y videojuegos. Aunque el catálogo lo marca como básico, el libro es de nivel intermedio-avanzado: se necesita soltura con JavaScript y conviene repasar un poco de matemáticas (vectores y trigonometría), aunque el propio autor incluye un breve repaso.

El recorrido cubre lo esencial del elemento canvas y sus contextos, el manejo de eventos, guardar y restaurar la superficie de dibujo, la impresión y los canvas fuera de pantalla. Luego se adentra en el dibujo: sistema de coordenadas, colores y transparencia, degradados, patrones, sombras, trazados, arcos, curvas de Bézier, polígonos, transformaciones, composición y regiones de recorte. Sigue con texto y controles de texto, imágenes y procesamiento de video, y animación: bucle de animación con requestAnimationFrame, cálculo de fotogramas por segundo, doble búfer, movimiento basado en tiempo, desplazamiento de fondo y parallax. Después trata sprites, física (gravedad y funciones de distorsión del tiempo), detección de colisiones con cajas delimitadoras, ray casting y el teorema del eje separador (SAT), y termina con controles personalizados y desarrollo móvil: viewport, media queries, eventos táctiles e iOS5.

Todo se explica con abundante código y demos en vivo en corehtml5canvas.com. Se construyen piezas completas como un motor de juegos, un juego de pinball, una lupa, controles reutilizables y un teclado virtual. Es de los tratados más completos sobre canvas 2D, y sus partes sobre animación, física y colisiones siguen vigentes porque la API ha cambiado poco. No cubre WebGL ni librerías como Phaser o PixiJS, y lo referido a móviles (iOS5) está desfasado.