Preparando el lienzo

Esta API ofrece una de las más poderosas características de HTML5. Permite a desarrolladores trabajar con un medio visual e interactivo para proveer capacidades de aplicaciones de escritorio para la web.

Al comienzo del manual hablamos sobre cómo HTML5 está reemplazando previos complementos o plug-ins, como Flash o Java applets, por ejemplo. Había dos cosas importantes a considerar para independizar a la web de tecnologías desarrolladas por terceros: procesamiento de video y aplicaciones gráficas. El elemento <video> y la API para medios cubren el primer aspecto muy bien, pero no hacen nada acerca de los gráficos.

La API Canvas se hace cargo del aspecto gráfico y lo hace de una forma extremadamente efectiva. Canvas nos permite dibujar, presentar gráficos en pantalla, animar y procesar imágenes y texto, y trabaja junto con el resto de la especificación para crear aplicaciones completas e incluso video juegos en 2 y 3 dimensiones para la web.

El elemento <canvas>

Este elemento genera un espacio rectangular vacío en la página web (lienzo) en el cual serán mostrados los resultados de ejecutar los métodos provistos por la API. Cuando es creado, produce sólo un espacio en blanco, como un elemento <div> vacío, pero con un propósito totalmente diferente.

Ejm 7.1

<!DOCTYPE html>
<html lang="es">
<head>
<title>Canvas API</title>
<script src="canvas.js"></script>
</head>
<body>
<section id="cajalienzo">
<canvas id="lienzo" width="500" height="300">
Su navegador no soporta el elemento canvas
</canvas>
</section>
</body>
</html>

Solo es necesario especificar unos pocos atributos para este elemento, como puedes ver en el ejm 7.1. Los atributos width (ancho) y height (alto) declaran el tamaño del lienzo en pixeles. Estos atributos son necesarios debido a que todo lo que sea dibujado sobre el elemento tendrá esos valores como referencia. Al atributo id, como en otros casos, nos facilita el acceso al elemento desde el código Javascript.

Eso es básicamente todo lo que el elemento <canvas> hace. Simplemente crea una caja vacía en la pantalla. Es solo a través de Javascript y los nuevos métodos y propiedades introducidos por la API que esta superficie se transforma en algo práctico.

getContext()

El método getContext() es el primer método que tenemos que llamar para dejar al elemento <canvas> listo para trabajar. Genera un contexto de dibujo que será asignado al lienzo. A través de la referencia que retorna podremos aplicar el resto de la API.

Ejm 7.2

function iniciar(){
var elemento=document.getElementById(‘lienzo’);
lienzo=elemento.getContext(‘2d’);
}
window.addEventListener(“load”, iniciar, false);

En el ejm 7.2, una referencia al elemento <canvas> fue almacenada en la variable elemento y el contexto de dibujo fue creado por getContext(‘2d’). El método puede tomar dos valores: 2d y 3d. Esto es, por supuesto, para ambientes de 2 dimensiones y 3 dimensiones. Por el momento solo el contexto 2d está disponible, pero serios esfuerzos están siendo volcados en el desarrollo de una API estable en 3 dimensiones.

El contexto de dibujo del lienzo será una grilla de pixeles listados en filas y columnas de arriba a abajo e izquierda a derecha, con su origen (el pixel 0,0) ubicado en la esquina superior izquierda del lienzo.

Conceptos básicos

Cuando una variable es declarada dentro de una función sin la palabra clave var, será global. Esto significa que la variable será accesible desde otras partes del código, incluido el interior de funciones. En el código del ejm 7.2, declaramos la variable lienzo como global para poder tener siempre acceso al contexto del lienzo.