Canvas HTML5: introducción


       Vamos a comenzar una serie de artículos sobre el elemento canvas de HTML5. Es uno de las novedades que se anunciaron desde el principio con las novedades de HTML5. Es como una pizarra sobre la que hacer dibujos, y hay quien lo vende como el sustituto natural a las animaciones en flash.

       Podemos ver el canvas como un div sobre el que podemos dibujar. Lo primero es declarar el elemento:

<canvas id=”canvas1” width=”500” height=”300”></canvas>

       Es importante declarar el alto y ancho en el HTML. En mi experiencia si solo se hace en css, el elemento tiene esas medidas, pero a la hora de dibujar no parece tener ese ancho y alto y es muy difícil calcular las coordenadas de las formas.

       Una vez que tenemos un canvas podemos dibujar en él usando javascript. Para ello necesitamos el contexto de dibujo. Es un objeto que nos permite dibujar sobre el canvas. Dejando la puerta abierta a futuras implementaciones, se puede elegir el tipo de contexto. El que recoge el estándar oficial es el “2d” para dibujar figuras planas, líneas, transformaciones en dos dimensiones, etc. Ya han aprovechado y hay una especificación de un grupo no oficial, pero soportada por buena parte de los navegadores de escritorio, para tener un contexto en 3D (en potencia se pueden hacer juegos en 3D y todo) basado en OpenGL, llamado WebGL.

       Pero por ahora vamos a centrarnos en las 2D. Una vez que tenemos el objeto contexto todo lo que dibujemos está basado en las coordenadas internas del canvas, que tiene su 0,0 en la esquina superior izquierda. Veamos un ejemplo de cómo elegir un color y dibujar un cuadrado.

var ctx = document.getElementById("canvas1").getContext("2d");
ctx.fillStyle = "rgb(200,200,0)";
ctx.fillRect(0, 0, 200, 150);

       Primero conseguimos el contexto, en la segunda línea elegimos el color con el que pintar a partir de ese momento y en la tercera ordenamos pintar un rectángulo relleno, con origen en el 0,0, 200 píxeles de ancho y 150 de alto.

       Para tener un cuadrado de un color, con un div nos había valido. Pero podemos dibujar formas aleatorias con una ruta:

ctx.fillStyle="rgb(0,200,0)";
ctx.beginPath();
ctx.moveTo(200,300);
ctx.lineTo(500,150);
ctx.lineTo(500,300);
ctx.fill();

       Aquí primero elegimos un color verde. Después mandamos empezar la ruta. Vamos a hacer un triángulo, así que necesitamos especificar 3 puntos. El primero siempre es el origen, por lo que movemos el inicio de la ruta a un punto, después hacemos una línea al segundo punto, y por último al tercero. El sistema se encarga de cerrar la figura uniendo el último y primer puntos, así que no tenemos que preocuparnos. Al final mandamos dibujar con relleno la figura que hemos mandado hacer en la ruta.

       Con esto podríamos hacer figuras tan complejas como queramos, siempre basadas en rectas. Por ahora no hemos hecho nada que no se pudiera hacer con una imagen (aunque es más rápido mandar código para dibujar una figura que descargar una imagen). Pero ya iremos viendo como se hacen animaciones que es donde el canvas saca todo su potencial y por lo que merece la pena aprender a usarlo.

       Los dos ejemplos de esta entrada sobre el mismo canvas (he puesto un borde al canvas para que se vean bien sus límites y coordenadas):




       El canvas está soportado por todos los navegadores, No nos tenemos que preocupar por versión en ninguno salvo en Internet Explorer, donde solo funciona a partir del 9.