Si hacemos un poco de memoria, hasta hace no tanto tiempo, usábamos Flash para crear este tipo de elementos para la web, pero desde la creciente masificación de los celulares y otros dispositivos móviles, fue necesario abandonar los archivos SWF de Flash, y pasar a formatos multiplataforma como ser los archivos SGV o bien los generados mediante la etiqueta <canvas>.
Canvas significa lienzo en inglés, y justamente esto es lo que define en el documento HTML: un área o lienzo dentro del cual se podrá generar el/los dibujos y animaciones.
La etiqueta <canvas> define un área mediante las propiedades de ancho y alto. Hasta aquí, todo es muy simple. Veamos cómo es la sintaxis de esta nueva etiqueta:
<canvas id=”dibujo” width=”200”
height=”200”>
Este texto se muestra sólo si su navegador no soporta la etiqueta canvas de HTML5. </canvas>
Como vemos en el ejemplo, la etiqueta <canvas> siempre debe tener los siguientes atributos:
id= asigna un nombre único al elemento canvas, que será utilizado por la funciones de Javascript para reconocerlo.
width= permite definir el ancho que posee el lienzo del dibujo y animación.
height= permite definir el alto que posee el lienzo del dibujo y animación.
La parte más compleja de la etiqueta <canvas> es que vamos a necesitar usar Javascript para crear dentro de ella los distintos elementos. Como ser: crear dibujos vectoriales, insertar imágenes, introducir textos, videos, etc.
Primeros pasos
Como mencionamos antes, la etiqueta <canvas> requiere de Javascript para poder trabajar. Para ello debemos crear una función, en la cual declararemos todo aquello que queremos que se visualice dentro de la etiqueta <canvas>.
Veamos un pequeño ejemplo para entender mejor el concepto:
<!DOCTYPE HTML>
<html>
<head>
<title> Trabajando con canvas </title>
</head>
<body>
<canvas id=”dibujo” width=”500” height=”300”></ canvas>
<script>
var canvas = document.getElementById(dibujo);
var context = canvas.getContext(‘2d’);
context.font = ‘40pt Calibri’;
context.fillStyle = ‘blue’;
context.fillText(‘Hola Mundo!’, 150, 100);
</script>
</body>
</html>
Como podemos ver en este ejemplo, usamos la función document.getElementById, para seleccionar el objeto de DOM, donde se trabajará. En este caso nuestra etiqueta <canvas>, cuyo ID es igual a “dibujo”. Luego, la función canvas.getContext le indicará si el contexto es 2d o 3d.
De allí en adelante usaremos los métodos necesarios para los elementos o propiedades que necesitemos usar dentro del canvas.
En este caso, podemos ver que se utilizaron el tamaño y estilo de tipografía, el color, el contenido de texto y la posición dentro del canvas. Si bien esto puede parecer muy complicado, a no asustarse. Iremos viendo uno a uno los métodos de uso más frecuente, y podremos ver que no será tan complicado a fin de cuentas.