FlashCanvas: elemento canvas compatible con todos los navegadores

  • Por
  • HTML
FlashCanvas es una librería Javascript para conseguir que el elemento canvas del HTML 5 funcione en navegadores que no lo soportan, como Internet Explorer 6 al 8.

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.

Nota: Las técnicas de programación Javascript para el dibujo en el elemento canvas las encontrarás relatadas con detalle en el Manual de Canvas.

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.

Nota: Por supuesto, tú vas a tener que editar la ruta del script (atributo src="flashcanvas.js"), para colocar el camino para llegar a la carpeta donde has puesto la librería js y la película Flash.

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
Nota: En la documentación de FlashCanvas, de donde hemos sacado estas indicaciones, tienen un código que resulta interesante para mostrar cómo se inicializa un canvas cuando se ha creado dinámicamente con Javascript.
//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);
}
En el código anterior, la parte en la que se hace la comprobación (typeof FlashCanvas != "undefined") es importante, porque así nos aseguramos de inicializar el canvas con FlashCanvas solamente en el caso que esa librería haya sido cargada. Es decir, los navegadores que sí soportan canvas, donde la librería no se habría cargado, no ejecutarán el código para inicializar el canvas por medio de FlashCanvas.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Felix Carretero

06/9/2011
rendimiento de este sistema
Hola camaradas!
Me ha interesado mucho flashcanvas... tengo una pregunta a ver si saben responderme ¿Cuál es el rendimiento de este sistema? ralentizará mucho los navegadores? realmente lo recomiendan usar en todos los navegadores?
Muchas gracias.

midesweb

06/9/2011
rendimiento
Pues no tengo referencias en cuanto a rendimiento que poder recomendarte. Hay una referencia que estaba leyendo interesante en cuanto a compatibilidad del API de Canvas, que FlashCanvas implementa en más del 70% (incluso algo más que ciertas versiones de navegadores que sí soportan canvas).
http://philip.html5.org/tests/canvas/suite/tests/

Pero ese análisis no tiene mucho que ver con el rendimiento, aunque sí es interesante para las personas que deseen usar esta librería.

En cuanto a rendimiento propiamente dicho, y espero ahora contestar tu pregunta de algún modo, opino que es bueno siempre cuestionarse siempre esa pregunta. De todos modos, creo que si vas a basar tu aplicación web en Canvas es interesante contar con esta librería, para dar soporte a Internet Explorer en versiones anteriores. De otra manera, esos navegadores no podrían ver tu aplicación tal como es.

De todos modos, sobre tu pregunta de si sería interesante para utilizarlo en todos los navegadores, no sé muy si la has hecho mal o has entendido mal el artículo, pues FlashCanvas es solo para los navegadores que no tengan soporte nativo a canvas. Por ello, si incluyes esta librería lo tienes que hace solo para los navegadores que no soportan canvas y así sólo afectará el rendimiento a esos navegadores antiguos. Los navegadores nuevos ya lo soportan, por lo que el uso de esta librería no les afectaría para nada.