En el manual de HTML5 en Español escrito en el mes de enero, hablamos de la propiedad de HTML5 <canvas>. La que podemos resumir como una forma de dibujar de manera programada mediante JavaScript.

En este artículo abordaremos esta propiedad y veremos cosas positivas y negativas demostrando con ejemplos, lo que se puede lograr hacer.

Para qué nos puede servir <canvas>

La propiedad <canvas> nos puede ser útil para representar algo visualmente en un navegador. Por ejemplo:

  • Diagramas Simples
  • Interfases de usuario
  • Animaciones
  • Gráficos y tablas
  • Aplicaciones de dibujo embebidas
  • Trabajar sobre las limitaciones de CSS

Se puede definir en términos básicos como un API de dibujo basada en píxeles, aunque si se utiliza correctamente puede convertirse en un bloque constructor de cosas muy interesantes.

Herramientas con las que contamos

Herramientas de dibujo

  • Rectángulos
  • Arcos
  • Rutas y líneas de dibujo
  • Curvas Beizer y cuadráticas

Efectos

  • Rellenos y trazos
  • Sombras
  • Gradientes lineales y radiales
  • Transparencia Alpha
  • Composición

Transformaciones

  • Escalamiento
  • Rotación
  • Traducción
  • Matriz de transformación

Extrayendo e incorporando información

  • Carga externa de imágenes mediante URL, otros <canvas> o información URL
  • Recuperación de una representación de PNG del <canvas> actual como un conjunto de datos URL

¿Cómo se utiliza?

Para usar <canvas>, necesitaremos dos cosas:

  1. Una etiqueta <canvas> en el HTML para colocar el <canvas> que dibuja
  2. JavaScript que realice el “render” de los dibujos

La etiqueta <canvas> es básicamente una etiqueta <img> sin contenido. Se le puede determinar un ancho y un alto para el área de dibujo. En lugar de un atributo "alt", se puede incluir HTML en la etiqueta <canvas> propia para contenido alternativo.

Ejemplo de una etiqueta <canvas>:

<canvas id="miDibujo" width="500" height="500">
<p>Su navegador no es compatible con canvas.</p>
</canvas>

A continuación añadiremos el JavaScript:

var drawingCanvas = 
 document.getElementById('miDibujo');
// Comprueba que el elemento
if(drawingCanvas.getContext) {
// Comienza un contexto de dibujo
var context = drawingCanvas.getContext('2d');
//Aquí van los comandos de <canvas>

Comprobando el método getContext() en un objeto DOM es la forma estándar de determinar la compatibilidad <canvas> en un navegador.

La variable del contexto (context) hace referencia a un contexto <canvas> sobre el cual se puede dibujar, en este caso 2D.

Dibujo Básico

Por lo tanto, vamos a empezar con un ejemplo para demostrar los conceptos básicos. Vamos a dibujar una cara sonriente

Si pensamos en la cara como un conjunto de formas básicas, tenemos:

  1. Un círculo, con un borde negro y relleno de amarillo.
  2. 2 círculos con un trazo negro y relleno blanco y con un círculo interno lleno de verde para los ojos.
  3. Una curva para la sonrisa.
  4. Un diamante para la nariz.

Comencemos por la creación de la cara redonda:

// Creando la cara amarilla
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

En el código anterior se puede ver como definimos para el contorno (strokeStyle) el color negro (#000000),  para el relleno (fillStyle), el color amarillo (#ffff00) luego se crea un círculo (un arco con un radio de 50 y se gira a través de los ángulos de 0 a 2 * pi radianes). Por último, se aplica el contorno y relleno que se ha definido previamente.

Este proceso de creación de estilos, llegando a las coordenadas y las dimensiones y, finalmente, la aplicación de un relleno o el trazo se encuentra en el corazón del dibujo <canvas>. Cuando se suman los otros elementos de la cara, tenemos:

Descargar ejemplo

Efectos y Transformaciones

Veamos cómo podemos manipular una imagen <canvas> existente. Podemos cargar imágenes externas utilizando el método drawImage():

context.drawImage(imgObj, XPos, YPos, Width, Height)

Esta es la imagen con la que vamos a interactuar:

Copa

Crearemos un marco rojo. Para esto usaremos un rectángulo y lo rellenaremos con una gradiente radial para darle un poco de textura.

//Creando un gradiente radial.
var gradient =
context.createRadialGradient(90,63,30,90,63,90);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#660000');

// Creando una caja de gradiente radial para la imagen.

context.fillStyle = gradient;

context.fillRect(15,0,160,140);
 
//Cargar la imagen con JavaScript y aplicarle posteriormente las modificaciones con <canvas>

var myImage = new Image();
myImage.onload = function() {
context.drawImage(myImage, 30, 15, 130, 110);
}
myImage.src = "cocktail.jpg";

Ahora le aplicaremos efectos para darle realismo a nuestra foto. Añadiremos drop shadow y rotaremos la imagen levemente para que tenga un pequeño ángulo.

El drop shadow deberá ser aplicado al marco:


//Creando la sombra

context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "black";

foto con sombra

Para rotar el <canvas>, utilizamos el método rotate() el cual toma un valor en radianes para hacer que el <canvas> gire. Esto sólo aplica la rotación para los dibujos subsiguientes del <canvas>, así que hay que asegurarse de ponerlo en el lugar correcto en código.


//Rotar la foto
context.rotate(0.05);

Rotar imagen con canvas

Descargar ejemplo

Animación y Física

Los dibujos <canvas> pueden ser animados mediante la repetición del dibujo del <canvas> con diferentes dimensiones, posiciones y otros valores. Con el uso de la lógica JavaScript, también puedes aplicar la física a tus objetos <canvas>.

Ejemplos de implementaciones:

Reemplazar fuentes estándar por fuentes elegantes

<canvas> puede ser utilizado como una forma de mostrar fuentes no-estándar en una página web como una alternativa a tecnologías como sIFR. El proyecto Cufon es una aplicación de este tipo. Los reemplazos de fuentes basados en <canvas> como Cufon tienen ventajas sobre sIFR, en que hay menos gastos de recursos y no es necesario ningún plug-in. Ver artículo Utilizando fuentes no estándares en nuestras web - Cufon y jQuery.

Soporte del navegador

Las últimas versiones de Firefox, Safari, Chrome y Opera todas disfrutan de un soporte razonable para <canvas>.

¿Qué pasa con Internet Explorer?

IE no soporta Canvas de forma nativa (tampoco IE8), sin embargo se han dado algunas compatibilidades gracias al proyecto ExplorerCanvas. Simplemente es necesario incluir un archivo JavaScript extra antes de cualquier código <canvas> en tu página. Lo puedes esconder de otros navegadores de la forma estándar, utilizando comentarios condicionales.

<!--[if IE]><script src="excanvas.js"></script><![endif]--> 

 

ExplorerCanvas incluso extiende el soporte canvas a IE6, sin embargo no es perfecto por lo que no esperes que tenga un rendimiento tan bueno como en los navegadores modernos que soportan <canvas> de forma natural.