Si estás intentando que el elemento canvas del HTML 5 funcione en Internet Explorer en cualquier versión anterior a la 9, encontrarás en FlashCanvas un complemento ideal. Se trata de una librería Javascript que añade soporte a canvas en los navegadores que no lo ofrecen de manera nativa.

Canvas es un elemento del HTML5 que sirve para hacer todo tipo de dibujos en páginas web. Su traducción al castellano sería "lienzo" y no es más que eso, un espacio donde podemos dibujar e incluso crear animaciones. Lo interesante es que dichos dibujos se realizan a través de un API de programación creada en Javascript y que permite hacer ilustraciones, utilizar fotografías y todo ello dinámicamente.

Sin embargo, en el momento de escribir estas líneas y quizás por mucho tiempo, no todos los navegadores ofrecen soporte a dicho elemento, ni por supuesto al API Javascript de Canvas. Es por ello que, para hacer páginas compatibles con todos los navegadores, tenemos que olvidarnos de esta característica del HTML5 o bien utilizar alguna librería que ofrezca soporte en navegadores antiguos.

FlashCanvas es una de las opciones que tenemos para poder utilizar canvas en estos momentos con la total garantía que nuestra página se verá bien en Internet Explorer 6, 7 y 8, que no tienen soporte a ese elemento. Sus funcionalidades están basadas en el uso de Flash, por lo que en el navegador del usuario tendrá que estar disponible el plugin de Flash versión 9 en adelante.

En este artículo veremos algunas notas sobre la implementación de esta librería y la carga condicional de la misma, que solamente debería producirse en el caso que el usuario esté trabajando con Internet Explorer 6 a 8.

Utilizar FlashCanvas en páginas web

Esta librería tiene dos versiones la tradicional y la Pro. En este artículo vamos a explicar cómo utilizar la tradicional, que es un poco menos sofisticada, pero es gratuita para cualquier tipo de uso.

Se puede encontrar la página del proyecto en: http://code.google.com/p/flashcanvas/

Vamos a ver una receta para poder utilizar FlashCanvas.

1) Descargar la librería y copiar los archivos en tu sitio

Debemos descargar el paquete con las librerías, que contiene todo aquello que necesitaremos para usar FlashCanvas así como numerosos ejemplos.

De momento, para lo que nosotros vamos a hacer, nos tenemos que fijar en la carpeta "bin", que tiene los archivos: <7p>

• flashcanvas.js (la librería Javascript)
• flashcanvas.swf (la película flash que se utiliza para sustituir al elemento canvas)

Esos dos archivos serán los fundamentales y que tienes que copiar en algún lugar de tu proyecto. Pon los dos archivos juntos en la misma carpeta y date cuenta que para poder poner FlashCanvas en marcha tendrás que saber la ruta para llegar al archivo "flashcanvas.js"

2) Incluir el script FlashCanvas para versiones antiguas de Internet Explorer

El primer paso es hacer la carga de la librería Javascript en Internet Explorer 6, 7 y 8. Para ello vamos a utilizar un código condicional que solo interpreta Internet Explorer.

<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->

Esto está diciéndole a Internet Explorer que, si es una versión anterior a la 9, el script Javascript flashcanvas.js.

3) Comenzar a usar canvas

Este paso en la mayoría de los casos es inmediato. Es decir, una vez incluido el script flashcanvas.js se inicializarán automáticamente los elementos canvas de la página, de modo que podamos dibujar sobre ellos del mismo modo a como lo hacíamos en navegadores compatibles. La gracia de esta librería es justamente esa, poder utilizar canvas en cualquier navegador no compatible, de la misma manera que si lo fuera.

Ahora bien, hay un par de casos en los que sí debes inicializar los elementos canvas explícitamente.

• Cuando se crea un elemento canvas dinámicamente mediante Javascript por medio de document.createElement("canvas").
• Cuando se usa un elemento canvas antes que se haya lanzado el evento window.onload

//creo un elemento canvas
var micanvas = document.createElement("canvas");
//inserto ese elemento dentro de otro elemento que haya en la página
document.getElementById("lugarInsercionElementoCanvas").appendChild(micanvas);
//si se cargó la librería FlashCanvas
if (typeof FlashCanvas != "undefined") {
   //entonces inicializo el elemento canvas explícitamente
   FlashCanvas.initElement(micanvas);
}

Así que podemos empezar a trabajar con Canvas tal como lo hacemos habitualmente, pues todo el API Javascript relacionado con Canvas estará disponible en los navegadores más antiguos.

Podemos ver un ejemplo de página en la que hemos puesto en marcha FlashCanvas. Deberías poder ver el dibujo sobre el canvas en cualquier navegador.

El código HTML 5 de la página web del ejemplo es el siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Probando FlashCanvas</title>
   <!--[if lt IE 9]>
    <script type="text/javascript" src="flashcanvas.js"></script>
   <![endif]-->
   <script language="javascript">
   window.onload = function(){
      var elemento = document.getElementById("micanvas");
      var contexto = elemento.getContext('2d');
      contexto.fillStyle = '#f5f';
      contexto.fillRect(10,10,90,50);
      contexto.fillStyle = '#5ff';
      contexto.fillRect(35,35,50,90);
      contexto.strokeStyle = 'rgba(200, 80, 0, 0.7)';
      contexto.lineWidth = 5;
      contexto.beginPath();
      contexto.moveTo(50,15);
      contexto.lineTo(130,85);
      contexto.lineTo(50,125);
      contexto.lineTo(25,75);
      contexto.lineTo(25,15);
      contexto.closePath();
      contexto.stroke();
   }
   </script>
</head>
<body>
<canvas id="micanvas" width="150" height="150">
Si ves esto es que tu canvas no funciona!!
</canvas>
</body>
</html>

De nuevo, dejo el enlace para ver el ejemplo en marcha.

Conclusión

La librería FlashCanvas es una excelente opción para poder disponer de las funcionalidades de Canvas en navegadores antiguos donde no estaban presentes. Funciona a través de un script Javascript y una película Flash que hacen posible dibujar en canvas desde cualquier navegador.

El uso no tiene mucho misterio, pues una vez incluido el script de FlashCanvas, se podrá utilizar cualquier elemento canvas como si estuviéramos en un navegador que sí lo soporta. El único detalle es saber incluir esta librería solo en los navegadores que no soporten canvas, algo que en este artículo hemos hecho a través de condicionales HTML que solo entiende Internet Explorer.

En el siguiente artículo mostraremos cómo incluir esta librería de una manera un poco mejor, haciendo uso de la librería Modernizr.