Introducción al Canvas en HTML 5

Logotipo de Javascript

Descarga el material de trabajo.

Ve el video en Youtube

Uno de los principales retos que debió cumplir HTML 5 fue el establecer opciones estandarizadas para diversos elementos que previamente dependían de tecnologías externas y privadas. Tal fue el caso de la creación de gráficos vectoriales. La primera década del siglo XXI se vio colmada por diferentes plugins con los cuales se podían hacer sitios web espectaculares sin necesidad siquiera de usar html o javascript. Se pueden mencionar varios, como Silverlight de Microsoft, pero definitivamente el más difundido fue la tecnología Flash de Macromedia y posteriormente de Adobe, la cual pudo considerarse como ubicua, ya que llegó a estar instalada en el 99% de todas las computadoras de escritorio. Incluso al instalar una nueva versión de un navegador, este ya lo tenía instalado.

A pesar de contar con grandes ventajas, fueron sus problemas los que poco a poco hicieron que el uso de estos plugins dejaran de ser prácticos, principalmente con los requerimientos de diseño para dispositivos móviles. Pero más allá de todos los inconvenientes, debe de haber alguna otra propuesta que sirva de solución. Y para este caso HTML 5 propuso el elemento canvas.

La etiqueta <canvas> es una región de un documento html en el cual se pueden realizar dibujos vectoriales así como manipulación de imágenes de mapa de bits. A través de este elemento se pueden realizar diferentes tipos de elementos, tales como:

  • Gráficas
  • Banners
  • Juegos
  • Animaciones

Entre los principales beneficios de canvas es que para realizarlo se utilizan los lenguajes que son estándar en la web: html, css y javascript. Además los navegadores pueden procesarlo de una manera bastante eficiente, llegando a poder dibujar miles de vectores por segundo. Por el otro lado, nada es perfecto y hasta la fecha de la creación de esta entrada, se deben tomar en cuenta algunas cosas.

  • De la forma más directa, realizar algún elemento de canvas implica programación, principalmente javascript. Para la mayoría de los desarrolladores web no debe significar demasiada complicación, pero si tomamos en cuenta que el proceso para realizar una película de flash era a través de un programa gráfico (Flash Profesional), esto ha hecho que un gran grupo de creadores de web no la hayan intentado utilizar. Si bien han salido cada vez mejores herramientas gráficas para hacer canvas, como la renombrada herramienta Adobe Animate (antes Flash Profesional), esto ha sido recientemente. Y de todas formas, para el momento de hacer algo que no sea simplemente animación, se debe volver a la parte de programar.
  • Se considera una API de bajo nivel, lo cual significa que no tiene demasiadas funciones para realizar elementos más elaborados. Y con “elaborados” nos referimos a cosas tan simples como un botón. El área de dibujo de la etiqueta es un elemento que no permite aislar objetos. Son meros gráficos. Para que los diseñadores se den una idea, es como trabajar con Photoshop en sus primeras versiones, antes de que salieran las capas. Y si consideramos que para los tiempos en que canvas salió, alrededor del año 2010, los plugins como Flash Player y Silverlight ya permitían incrustar elementos en 3D, es realmente un paso hacia atrás. Sin embargo, han surgido varias librerías para poder trabajar en canvas de una manera más fácil y robusta. Entre estas se pueden mencionar paper.js o easeljs.




Si bien es recomendable conocer opciones que faciliten la creación del canvas, en estos tutoriales comenzaremos con lo mas esencial. Esto con la finalidad de comprender qué es lo que se puede hacer de manera nativa antes de añadir capas que puedan hacer el proyecto innecesariamente pesado y confuso. Además, como tenemos como filosofía en Argot Training que nada es complicado, simplemente depende de cómo se explica. Dicho esto, comencemos con nuestro primer elemento canvas.

I. Crear la etiqueta <canvas>

Lo indispensable para usar canvas es, obviamente la etiqueta canvas. Dentro del body de nuestro documento escribimos:

<canvas>
</canvas>

Sin embargo, nos van a ser necesarios algunos atributos, tales como width y height para definir sus dimensiones, así como id para darle el nombre con el cual lo identificaremos en  por javascript.

<canvas id="elCanvas" width="500" height="500">
</canvas>

También se recomienda poner algo dentro de la etiqueta, normalmente un texto. Mucho cuidado con esta parte, la finalidad del texto es solamente para aparecer en los navegadores que no entiendan HTML 5. No sería la forma de poner el contenido del canvas. Eso lo haremos un poco más adelante a través de javascript.

<canvas id="elCanvas" width="500" height="500">
 Tu navegador no entiende HTML 5
</canvas>

Aquellos navegadores que sean posteriores a la creación de HTML 5, como podría ser Internet Explorer 8, interpretarían a <canvas> como una etiqueta de XML y por lo tanto mostrarían lo que está escrito. Debido a ello, otra buena opción sería poner una imagen con el resultado que tendría la animación.

II Estilo a través de CSS

Aunque el interior del canvas es diferente a otras etiquetas, tales como <div> o <section>, propiedades como background-color, border o incluso box-shadow pueden ayudarnos a definir el aspecto de nuestro lienzo.

Dentro de la etiqueta head pondremos nuestro estilo, haciendo referencia al id que definimos previamente. En este caso pondremos únicamente un color de fondo y un borde negro de un pixel de grosor.

<style>
#elCanvas{
 background-color:#FC3;
 border:1px solid black;
}
</style>

Visualizando esto en un navegador que entienda HTML 5, veremos a nuestro canvas.

canvasbase1

¡Listo! Ahora vamos a comenzar a dibujar.

III Javascript

En este caso vamos a querer que el dibujo aparezca tan pronto cargue la página. Para ello le vamos a indicar a la etiqueta body que realice una rutina de código, una función, una vez que todo lo que tenga dentro se haya cargado. Esto es a través del atributo onLoad.

<body onLoad="dibujar()">

Para los que apenas están comenzando a programar, el nombre de la función puede llamarse como uno desee, lo importante es que en la parte del script esté escrito igual.

La parte de javascript la pondremos también dentro de <head>, debajo de los estilos.

<script>
function dibujar(){

}
</script>

Dentro de la función dibujar() realizaremos tres cosas. Lo primera será hacer referencia a la interfaz llamada CanvasRenderingContext2D, la cual es la que posee los métodos de dibujo. Esto se hace llamando al método getContext() del elemento <canvas>

var contexto = document.getElementById("elCanvas").getContext("2d");

Con esta parte, la variable que decidimos llamar contexto será la que usaremos para los comandos de dibujo. Nótese también que dentro de getContext() se indicó como parámetro “2d”. Esto indica que el modo de representación será en 2D. Por el momento, es el único modo de representación. Si lo cambiáramos por “3d” no haría algo además de causar un error en la programación, pero seguramente más adelante, en alguna nueva versión de canvas, podremos hacerlo.

Ya definido el contexto, se va a establecer el modo de dibujo. Lo primero que se puede escoger es si va a dibujarse un relleno o un contorno. En este caso pondremos un relleno.

contexto.fillStyle = "#ff0000";

El modo de poner el color puede ser en cualquiera de los modos que tenemos para poner color a través de CSS 3. Se pudo poner “#f00”, “red”, “rgb(255,0,0)” o “hsl(0,100%,50%)” para obtener el mismo color rojo.

Finalmente, lo primero que vamos a dibujar es un rectángulo. Para ello se va a usar el método fillRect().

contexto.fillRect(80,100,100,50);

Este método pide cuatro parámetros: x, y, w, h. Lo que le estamos indicando en esta ocasión es que dibuje el rectángulo desde la coordenada 80 en el eje horizontal (x), 100 en el eje vertical (y), y que tenga un ancho (w) de 100 pixeles, así como un alto (h) de 50 pixeles.

El resultado de nuestro código es:

canvasbase2




Nuestro código final es:

<!doctype html>
 <html>
 <head>
 <meta charset="ISO-8859-1">
 <title>Canvas Base</title>
 <style>
 #elCanvas{
 background-color:#FC3;
 border:1px solid black;
 }
 </style>
 <script>
 function dibujar(){
 var contexto = document.getElementById("elCanvas").getContext("2d");
 contexto.fillStyle = "#ff0000";
 contexto.fillRect(80,100,100,50);
 }
 </script>
 </head>

<body onLoad="dibujar()">
<canvas id="elCanvas" width="500" height="500">
 Tu navegador no entiende HTML 5
</canvas>
</body>
</html>

Conclusión

Tal vez no sea muy espectacular escribir casi 30 líneas de código para obtener un simple cuadro rojo, pero es un cuadro rojo que se puede ver en dispositivos móviles, a diferencia de un archivo de .swf. De todas formas, este es el principio. En los próximos artículos sobre este tema explotaremos el poder del canvas.

Descarga el material de trabajo.

O ve el video en Youtube

Be the first to comment

Leave a Reply

Your email address will not be published.


*