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

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.

El canvas de HTML 5 (II). Trazos en 2d.

En el artículo anterior aprendimos lo básico para crear lienzos de dibujo en HTML 5. En concreto, aprendimos a insertar los lienzos en la página, prever un mecanismo de fallback para navegadores inadecuados y referenciar los lienzos desde JavaScript. Sin embargo, aún no sabemos qué hacer con ellos, ni nos sirven para nada. En este artículo vamos a empezar a aprender a incluir formas en 2d en nuestros canvas. Y subrayo lo de “empezar” porque el dibujo en lienzos de HTML 5 permite tantas posibilidades que abarcarlas todas en un artículo es imposible. Sin embargo, de aquí saldremos con unos conocimientos básicos que, en posteriores artículos, nos permitirán seguir avanzando. Cómo siempre, espero que disfrutes de esta lectura y, sobre todo, que te resulte interesante y provechosa.

El canvas de HTML 5 (III). Redimensionando canvas.

Este es un artículo muy breve para explicar una cosa que es importante conocer. Cuando dimensionamos canvas, debemos, en general, hacerlo usando los atributos width y height. Hacerlo mediante CSS origina distorsiones en todos los contenidos, por lo que sólo emplearemos el dimensionado por CSS en aquellos casos en los que queramos, específicamente, que los contenidos se distorsionen para adaptarse al contenido del nuevo canvas. Desafortunadamente, aunque los contenidos gráficos se generan mediante código, al final quedan como imágenes de mapa de bits, no vectoriales, como uno podría, en principio, pensar. Por lo tanto, al distorsionar las imágenes, se pierde calidad en las mismas. Esto se debe a que CSS sólo actúa sobre el canvas, pero no puede actuar sobre el contexto, por lo que, cuando dimensionamos un canvas por CSS, incluso si lo hacemos antes de crear el contexto, este se crea sobre la base del tamaño original del canvas, y luego se redimensiona, con todos sus contenidos “estirando” o “encogiendo” los píxeles, hasta alcanzar el tamaño CSS del canvas.

El canvas de HTML 5 (IV). Más sobre trazos.

Hemos aprendido que en un canvas se pueden dibujar figuras “de contorno”, es decir, solamente el trazo, sin relleno. Sin embargo, apenas hemos aprendido los principios básicos. En este artículo vamos a ver que, siguiendo esos principios y con unos pocos conocimientos adicionales, podemos dibujar cualquier forma primitiva o, elaborando un poco más el tema, cualquier forma geométrica. Este es un artículo con mucho contenido, pero muy fácil de entender y asimilar, como verás en seguida. Aprenderemos a hacer figuras geométricas, líneas con terminaciones e, incluso, texto. Adelante. Lee y disfruta.

El canvas de HTML 5 (V). Relleno sólido.

Ya estamos bastante familiarizados con el uso de las figuras de trazo en los canvas. En este artículo vamos a ampliar los conocimientos que ya tenemos, para ver como podemos crear figuras sólidas, tanto con contorno como sin él. En lo que veamos en este artículo emplearemos colores planos (no gradientes, ni texturas), para aprender a crear figuras con tonos sólidos o con el grado de transparencia que deseemos en cada caso. Así que, hala. Prepara el bote de pintura, y vamos a pintar.

El canvas de HTML 5 (VI). Gradientes.

En el artículo anterior hemos aprendido a crear figuras rellenas, con un color sólido. En este artículo vamos a empezar a aprender como crear y usar gradientes, tema que completaremos en el próximo artículo. Los gradientes, o degradados, como se les llama en algunos textos, son muy llamativos a la hora de crear figuras. Algunos diseñadores gráficos los detestan y, honestamente, un gradiente debe ser suave y estar bien concebido para causar una buena impresión visual. En eso, como en todo (y nunca mejor dicho), para gustos los colores. Aquí aprenderemos a crearlos y usarlos, y luego será tu talento artístico y tu experiencia los que te dirán cómo y cuándo emplearlos.

El canvas de HTML 5 (VII). Gradientes radiales.

En el artículo anterior aprendimos a crear gradientes lineales. Vamos ahora a ver cómo crear gradientes radiales, desde un centro de un color a un perímetro de otro color, bien directamente, o con colores intermedios. Si al principio nos costó un poco aprender a crear gradientes lineales, con los radiales la cosa se complica un poco. No obstante, con la práctica seremos capaces de crear los gradientes que necesitemos, según nuestro diseño. No te asustes si, al principio, no ves claro lo que estás haciendo, o te sale un resultado que no se parece en nada a lo que habías pensado. Nos ha sucedido a todos. En cuanto le cojas el truquillo, en seguida estarás diseñando interesantes combinaciones.

El canvas de HTML 5 (VIII). Insertando imágenes.

Insertar imágenes en un canvas es una de las posibilidades que tiene este elemento. Sin embargo, a menos que sea necesario emplearlo, yo sugiero usar un contenedor más “natural”, como un figure o, incluso, un simple div. La razón no es caprichosa. Si bien el uso del canvas como contenedor de una imagen nos permite ciertas posibilidades adicionales, estas no son siempre necesarias, y el precio es una mayor complejidad en la programación de nuestra web, como veremos en este artículo.