El canvas de HTML 5 (I). Qué es canvas.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En octubre de 2014 se publicó oficialmente el estándar HTML 5, aunque mucho antes ya estaba aprobado por el consorcio, y marcó un hito en la historia del desarrollo web. Si bien se introdujo, como sucede con estas cosas, con cierta cautela, mientras los navegadores evolucionaban para aprender a entender este nuevo estándar, la transformación que ha aportado a la web es indiscutible. Por supuesto, como ocurre casi siempre, Internet Explorer fue de los últimos en adoptar esta normalización (y algunos aún nos preguntamos si será totalmente compatible con la mayoría de las posibilidades). Vamos, lo normal.

INTRODUCCIÓN A <canvas>

Entre las muchas posibilidades semánticas que ofrece HTML 5 encontramos una especialmente interesante: la etiqueta <canvas>. Esta es una palabra inglesa que podemos traducir como lienzo, lo que ya nos anticipa que estamos hablando de “algo” relacionado con las imágenes o los gráficos.

Un canvas es un contenedor, al estilo de lo que podría ser (salvando las diferencias, claro) un span. Se emplea para albergar imágenes en 2d o 3d, animaciones e, incluso, vídeos. Es un elemento que se pinta de forma nativa en línea y, por supuesto, puede ser estilizado mediante CSS, cómo cualquier otro elemento de un documento web.

Como la teoría está muy bien, pero la retórica a menudo es insuficiente, vamos a ver de que estamos hablando. Supongamos el siguiente HTML, llamado canvas_001.htm:

Observa que se definen dos etiquetas <canvas>, y aquí es donde vamos a empezar a ver lo que son y cómo funcionan. Si cargas esta página en tu navegador verás, exactamente… nada. Los lienzos así definidos no tienen color de fondo (son transparentes), y no tienen borde. Sí tienen una anchura por defecto (300px) y una altura (150px). Estos valores se pueden modificar, bien por CSS o mediante los atributos width y height.

Para poder ver los dos lienzos, de forma que sepamos lo que estamos haciendo, hemos complementado el código anterior con el siguiente CSS:

Como ves, lo único que hacemos es darle un borde a los canvas y un color de fondo a cada uno de ellos. Ahora sí los vemos en la página, como puedes ver a continuación:

No parecen nada de particular y, como hemos comentado, solo tenemos un par de contenedores, sin nada más dentro. Más adelante, veremos el partido que se les puede sacar con la ayuda de JavaScript. Trabajar con estos elementos es un poco chocante al principio, hasta que te habitúas. No obstante, antes de empezar a hablar de lo que podemos hacer con ellos, sigamos conociéndolos un poco.

EL FALLBACK, O REEMPLAZO

Si nos encontramos con un navegador que no soporta estos elementos (un navegador antiguo, o textual, por ejemplo), debemos prever un mecanismo para avisar al usuario de que hay algo que no puede visualizar. Observa el código canvas_002.htm:

Como ves, dentro del primer lienzo hemos incluido una frase de aviso. En el segundo hemos incluido una imagen. Si tu navegador soporta los elementos canvas, nunca se mostrará este texto, ni la imagen. Si no los soporta, los lienzos no se visualizarán, pero sí la frase y la imagen. Es decir. Todo lo que incluyamos entre la etiquetas de apertura y cierre, <canvas> y </canvas> es un contenido alternativo para los navegadores inadecuados para estos elementos. Y, si lo piensas, esa es la razón de que la etiqueta <canvas> tenga una etiqueta de cierre. Si no la tuviera, todo lo que hubiera en el documento a continuación de la etiqueta de apertura sería considerado contenido de reemplazo (fallback), y nosotros no queremos eso.

Como doy por sentado que tienes un navegador actualizado, con este segundo código visualizarás lo mismo que con el primero, ni más ni menos.

PREPARANDO LOS LIENZOS

Cómo hemos comentado, estos elementos, así como sus contenidos, se gestionan mediante JavaScript, no mediante HTML. Lo primero que tenemos que hacer es referenciar cada lienzo de nuestra página como un objeto de JavaScript. A continuación definiremos, para cada uno de estos objetos, lo que se llama un contexto. El contexto, básicamente, establece qué es lo que va a contener el lienzo al que se refiere. Observa el código canvas_003.htm:

Observa las líneas resaltadas. Vamos a ver que hacen. En primer lugar, referenciamos el primero de los lienzos como un objeto JavaScript, como se ve en la línea 17:

var objeto_canvas_1 = document.getElementById('canvas_1');

A continuación declaramos el contexto para ese objeto, mediante el método getContext(). Este recibe un argumento que le indica cuál será el contenido del lienzo. En nuestro ejemplo, estamos preparando el lienzo para una imagen en 2d, como se ve en la línea 18:

var contexto_canvas_1 = objeto_canvas_1.getContext('2d');

Observa que el contexto es también un objeto de JavaScript que, más adelante, aprenderemos a emplear adecuadamente.

Lo mismo lo hacemos con el segundo lienzo, en las líneas 19 y 20:

var objeto_canvas_2 = document.getElementById('canvas_2');
var contexto_canvas_2 = objeto_canvas_2.getContext('2d');

En las líneas de la 21 a la 24 lo que hacemos es mostrar, en la consola del navegador, los cuatro objetos que hemos creado (es decir, los dos que se refieren a los lienzos y los correspondientes contextos):

console.log("Objeto canvas 1:", objeto_canvas_1);
console.log("Contexto canvas 1:", contexto_canvas_1);
console.log("Objeto canvas 2:", objeto_canvas_2);
console.log("Contexto canvas 2:", contexto_canvas_2);

El resultado lo vemos a continuación:

OTRAS FORMAS DE HACER LO MISMO

Ya sabemos que debemos crear un objeto JavaScript que referencie cada lienzo y, a partir de dicho objeto, creamos otro para el contexto (en nuestros ejemplos para incluir, en los lienzos, contenidos gráficos en 2d. Esto mismo lo podemos hacer como una función anónima que se ejecute a la carga del documento, cómo vemos en canvas_004.htm:

Y, por supuesto, podemos hacerlo en jQuery, como vemos en canvas_005.htm:

Observa, en las líneas resaltadas, que, con jQuery, cada objeto que referencia un lienzo queda almacenado como una matriz, de la que debemos acceder al elemento 0 para poder crear los objetos de contexto.

CONCLUSIÓN

En este artículo hemos aprendido a preparar los lienzos, preparar un fallback, por si el navegador no los soporta, y a referenciarlos en JavasCript o jQuery. También hemos aprendido que, para trabajar con un lienzo, deberemos crear un objeto de contexto que refiera el tipo de contenido del líenzo. Sin embargo, aún no sabemos hacer nada realmente con los lienzos. En el próximo artículo iremos viendo cosas más interesantes. De momento, ya tenemos el terreno preparado. Los archivos de código de este artículo puedes descargarlos en este enlace.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *