Il m'est arrivé à plusieurs reprises de devoir utiliser les canvas du HTML5 pour créer des effets sympas sur un site web. Or ces canvas ne fonctionnent qu'avec des navigateurs récents : c'est à dire tous sauf IE versions 8 et inférieures. Ce n'est pas tant un problème lorsque l'animation canvas n'est pas importante pour la page ni pour la navigation, mais ça devient vite un très gros problème lorsque l'animation canvas joue un rôle essentiel dans la page (exemple typique : un jeu vidéo en canvas). Dans ce dernier cas il est nécessaire de trouver une solution; et cette solution c'est : excanvas !

Qu'est-ce que c'est excanvas

Excanvas ou ExplorerCanvas est une bibliothèque JavaScript développée par des ingénieurs de Google visant à rendre compatible les animations canvas sous Internet Explorer.
Comment s'y prennent-ils ? En fait excanvas va redéfinir les fonctions associées aux canvas (qui ne sont pas présentes sous IE < 8) pour recréer les animations en utilisant le VML qui est un langage que IE supporte et qui permet de dessiner sur des pages web. Excanvas crée donc une surcouche aux canvas pour IE en utilisant une autre façon d'afficher les animations qu'IE arrive à comprendre.

Malheureusement, cette bibliothèque ne supporte pas toutes les fonctions associées aux canvas mais elle est tout de même très pratique pour réussir à avoir un rendu correct sur des navigateurs qui, de toute façon, ne devraient plus être utilisés.

Comment est-ce qu'on s'en sert ?

Pour utiliser excanvas c'est très simple.

Il vous faut d'abord télécharger la bibliothèque, soit en téléchargeant la dernière release (déconseillé), soit en téléchargeant les sources (conseillé). Je vous conseille de télécharger les sources car la bibliothèque y semble plus à jour.

Ensuite tout ce que vous avez à faire c'est inclure le fichier Javascript de excanvas dans votre page web (avant le code des canvas) si le navigateur est IE.

<!--[if lte IE 8]><script src="excanvas.js"></script><![endif]-->

En faisant ça, lorsque vous voudrez utiliser les canvas sous IE, ce fichier sera inclus et les canvas fonctionneront sans avoir à changer leur code.

Dans le cas où votre balise canvas est créée dynamiquement, elle ne sera pas prise en compte par excanvas. Il vous faudra alors inclure ce code pour que ça fonctionne :

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

Ce code crée un élément canvas et l'initialise pour que excanvas lui ajoute les fonctions manquantes pour IE. De cette manière on pourra ensuite appeler la fonction getContext sans plantage du code sous IE.

Voilà, vous savez donc maintenant comment faire des canvas compatibles IE !