¿Qué es Canvas?

Programming code on a monitor.Canvas (lienzo) es un elemento HTML que permite la creación de gráficos y animaciones de forma dinámica por medio de scripts.  Sus aplicaciones son practicamente iniminaginables: crear  juegos, interfaces, editores gráficos o efectos dinámicos, aplicaciones 3D…. Sólo la imaginación pone límites a Canvas.

En este artículo, profundizamos en las posibilidades de Canvas y las ejemplificamos con un sencillo  gráfico.

A modo anecdótico, sólo señalar Canvas fue creado por Apple, pero han liberado la propiedad intelectual para englobarlo dentro de los estándares de HTML. Para el usuario, todo son ventajas.  No requiere ningún plugin adicional, sólo una un navegador que soporte HTML5 y hoy en día todos los navegadores importantes (Safari, Chrome, Firefox, Opera e Internet Explorer) soportan Canvas, desde hace ya una cuantas versiones.

Realizar un dibujo con el API de Canvas

El ejemplo consistirá en dibujar dos rectángulos de colores diferentes y, para ello, utilizaremos un par de funciones del API con javascript. Primero, reservaremos el espacio del lienzo Canvas dentro de la página, utilizando la etiqueta HTML “CANVAS”,  y  segundo, dibujaremos los rectángulos.

Colocando el elemento HTML Canvas

<canvas id="micanvas" width="200" height="100">
 Este texto se muestra para los navegadores no compatibles con Canvas.
 <br>
 Por favor, utiliza un navegador que soporte HTML5.
 </canvas>

Atributos de este Canvas

Atributo id: Le asignamos un nombre único para referirnos a éste desde Javascript.

Atributos width y height: Indicamos el alto y ancho del área del canvas.

Por supuesto, podemos colocar de manera opcional otros, como style, para indicar atributos de hojas de estilo y definir su aspecto.

Dibujando el Canvas con Javascript

Dibujaremos un par de formas sencillas, aunque antes comprobaremos sin el navegador es compatible con Canvas.

//Recibimos el elemento canvas
 var canvas = document.getElementById('micanvas');
 //Accedo al contexto de '2d' de este canvas, necesario para dibujar
 var contexto = canvas.getContext('2d');
 //Dibujo en el contexto del canvas
 contexto.fillRect(50, 0, 10, 150);

Con getElementById() obtenemos el elemento de la página que se pasa como parámetro, que es el Canvas. Después accedemos al contexto 2D del canvas y, por último, ejecutamos tantos métodos como deseemos sobre el contexto del Canvas para dibujar elementos en el lienzo.

 //Recibimos el elemento canvas
 var elemento = document.getElementById('micanvas');
//Comprobación sobre si encontramos un elemento
 //y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
if (elemento && elemento.getContext) {
   //Accedo al contexto de '2d' de este canvas, necesario para dibujar
 var contexto = elemento.getContext('2d');
 if (contexto) {
      //Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar
 //Comienzo dibujando un rectángulo
      contexto.fillRect(0, 0, 150, 100);
 //cambio el color de estilo de dibujo a rojo
 contexto.fillStyle = '#cc0000';
 //dibujo otro rectángulo
 contexto.fillRect(10, 10, 100, 70);
 }
 }

Con el envento onload del body, ejecutaremos las acciones cuando la página esté cargada por completo:

<body onload="funcionDeDibujo()">

Aunque antes deberemos crear la función funcionDeDibujo() o el recurso para asignar el evento directamente desde un script Javascript:

window.onload = function(){
//instrucciones de dibujo en canvas
 }

A continuación,  el código completo que resume lo expuesto en el artículo:

<html>
 <head>
 <title>Probando canvas</title>
 <script>
 window.onload = function(){
 //Recibimos el elemento canvas
 var elemento = document.getElementById('micanvas');
 //Comprobación sobre si encontramos un elemento
 //y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
 if (elemento && elemento.getContext) {
 //Accedo al contexto de '2d' de este canvas, necesario para dibujar
 var contexto = elemento.getContext('2d');
 if (contexto) {
 //Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar en el canvas
 //Comienzo dibujando un rectángulo
 contexto.fillRect(0, 0, 150, 100);
 //cambio el color de estilo de dibujo a rojo
 contexto.fillStyle = '#cc0000';
 //dibujo otro rectángulo
 contexto.fillRect(10, 10, 100, 70);
 }
 }
 }
 </script>
 </head>
 <body>
 <canvas id="micanvas" width="200" height="100">
 Este texto se muestra para los navegadores no compatibles con canvas.
 <br>
 Por favor, utiliza un navegador que soporte HTML5.
 </canvas>
 </body>
 </html>