Un ejemplo sencillo de Canvas en HTML5

En HTML5 la etiqueta Canvas nos permite usar un lienzo para poder hacer lo que sea dentro de ese lienzo. Lo que se pretende hacer es que con esta nueva etiqueta se pueda manejar gráficos e interacciones mucho más complejas, sin tener que tener a la mano la ayuda de plugins de cualquier tipo.

En este tutorial vamos a ver cómo hacer un sencillo ejemplo de Cnavas en HTML5, para que más o menos vayan viendo lo que se puede hacer y lo que podemos llegar a lograr. El tutorial después del salto.

Nivel: Básico
Archivos | Demostración del tutorial

Para este tutorial lo único que necesitamos es insertar una etiqueta <canvas> que nos va a ayudar para poder dibujar un rectángulo. Dentro de la etiqueta lo colocamos un mensaje para que aparezca en lugar del canvas cuando el navegador no soporte la etiqueta.

Después lo que necesitamos es programar un poco con javascript para dibujar en el lienzo.

Lo que hacemos es primero obtener el elemento canvas por medio de un getElementById, para que después creamos otra variable al cuál le decimos el tipo de contexto en el que vamos a manejar los gráficos, que en este caso es 2D.

Por último le asignamos un color de relleno, un azul marino, y después usamos la función fillRect() para indicarle de parámetros una posición inicial en X, en Y, y una ancho y alto en pixeles.

Con eso obtenemos ya nuestro primer rectángulo.