Introducción a HTML5 Canvas

En este post intentaré hacer una introducción muy sencilla a HTML5 Canvas.

HTML5_Logo_512

¿Qué es?
Canvas en un elemento de html, introducido a partir de la versión 5.
El elemento <canvas> es un contenedor vacío que permite dibujar gráficos utilizando javascript.
Canvas cuenta con una API para dibujar líneas, rectángulos, círculos, textos, agregar imágenes, entre otras funcionalidades.

¿Cómo funciona?
En un archivo html convencional, se debe crear el elemento <canvas> para luego acceder a él mediante javascript.

El siguiente paso es crear un script en javascript para poder interactuar con el elemento.

Para poder acceder a los métodos de dibujo de canvas es necesario hacerlo a traves del context. El context es un objeto con propiedades y métodos que permite dibujar gráficos dentro del canvas. El context puede ser 2d ó webgl (3d) y se accede mediante el método getContext().

¿Qué se puede hacer?
HTML Canvas puede dibujar textos.
Canvas puede dibujar textos coloridos con o sin animación.

HTML Canvas puede dibujar gráficos.
Canvas tiene muchos recursos para la representación gráfica de datos, carga de imágenes, etc.

HTML Canvas es animado.
Los objetos dentro de canvas se pueden mover. Desde una animación simple como el rebote de una pelota, hasta complejas animaciones sincronizadas.

HTML Canvas es interactivo.
Canvas responde a todos los eventos de javascript. Los elementos dentro del canvas pueden responder a cualquier acción del usuario (teclas presionadas, click del mouse, etc).

HTML Canvas es ideal para juegos.
Las posibilidades que ofrece canvas son ideales para aplicaciones interactivas y juegos. Carga de imágenes externas, acceso a la API de dibujo, reproducción de audio, eventos de teclado y mouse, animaciones, etc.

HTML5 Canvas Cheat Sheet.
Resumen completo de la API HTML5 Canvas para el contexto 2D, basado en las especificaciones de W3C HTML5 Canvas. Enlace.

Principales ventajas
Multiplataforma.
HTML5 es accesible desde cualquier browser moderno, ya sea desde una pc (windows, linux, mac), un smartphone ó tablet (ios, android, windows phone).
Además de ser accesible desde la web mediante un browser, HTML5 puede ser compilado en aplicaciones nativas fácilmente, utilizando herramientas como PhoneGap, Titanium o CocoonJs.

Lenguaje de programación.
Para programar en HTML5 Canvas sólo es necesario saber programar en javascript, un lenguaje con varios años de rodaje, fácil de aprender y con extensa documentación accesible en la web.

Frameworks.
Hay muchos framework para HTML5 Canvas que facilitan el trabajo manual y proveen al desarrollador con muchas herramientas para gestionar la carga de assets, animaciones, efectos visuales y de sonido, interacción con mouse y teclado, entre otras.
Dentro de los frameworks más conocidos se encuentran Phaser, ImpactJs, CreateJs, Panda, ThreeJs, PlayCanvas, etc.

En las siguientes entregas detallaré cómo dibujar, animar y cargar imágenes en HTML5 Canvas.

Tutoriales en camino

Esta entrada es simplemente para presentar nueva serie de tutoriales que comencé a escribir y que iré posteando en el blog con el fin de poner a disposición de quienes lo crean útil, puedan usarlo como base para sus juegos, como inspiración ó para aprender cómo realizar juegos de matching en HTML5 Canvas.

La idea es crear, en varios pasos, 3 gameplays ligeramente diferentes sobre un mismo código base. En la primer entrega, haré el código base para todos los juegos que seguirán. Luego iré haciendo de a un juego por vez. Tengo en mente desarrollar prototipos similares a los siguientes juegos:

– Pet Rescue Saga (Video)
– Candy Crush Saga (Video)
– Juice Cubes (Video)