Création d'applications HTML5

Utilisation de l'élément canvas HTML5 pour la visualisation des données

Brandon Satrom

Télécharger l'exemple de code

Au début de la connexion en ligne, lorsque le Web était à peine plus qu'une collection de texte statique et de liens, la prise en charge d'autres types de contenu suscitait un intérêt croissant. En 1993, Marc Andreessen, créateur du navigateur Mosaic, qui devait devenir Netscape Navigator, a proposé la balise IMG comme norme d'intégration d'images en ligne avec le texte sur une page. Peu de temps après, la balise IMG est devenue la norme de facto pour ajouter des ressources graphiques aux pages Web, une norme toujours utilisée aujourd'hui. Vous pourriez même dire que, alors que nous sommes passés du Web des documents au Web des applications, la balise IMG est plus importante que jamais.

En général, le multimédia est certainement plus important que jamais et, bien que le besoin en multimédia sur le Web ait évolué au cours des 18 dernières années, l'image est restée statique. Les auteurs Web ont constamment cherché à utiliser du multimédia dynamique tel que l'audio, la vidéo et les animations interactives dans leurs sites et applications. En outre, jusqu'à récemment, la solution principale était un plug-in tel que Flash ou Silverlight.

Aujourd'hui, avec HTML5, les éléments multimédias du navigateur prennent une bonne gifle. Vous avez probablement entendu parler des nouvelles balises Audio et Video, qui permettent toutes les deux à ces types de contenu d'être essentiels dans le navigateur, sans plug-ins. L'article du mois prochain sera consacré en détail à ces deux éléments et à leurs API. Vous avez probablement également entendu parler de l'élément canvas, une surface de dessin avec un riche ensemble d'API JavaScript qui vous permettent de créer et de manipuler les images et les animations à la volée. Ce que la balise IMG a fait pour les contenus graphiques statiques, canvas a le potentiel de le faire pour les contenus dynamiques et pouvant contenir des scripts.

Cependant, aussi excitant que soit l'élément canvas, il pâtit d'un problème de perception. En raison de sa puissance, canvas est généralement montré via des animations ou des jeux complexes et, bien que ceux-ci illustrent effectivement ce qui peut être fait, ils peuvent également vous faire croire que l'utilisation de canvas est compliquée et difficile, quelque chose qui devrait être essayé uniquement dans des cas complexes tels que des animations ou des jeux.

Dans l'article de ce mois-ci, j'aimerais prendre du recul par rapport au côté tape-à-l'œil et à la complexité de canvas et vous en montrer des utilisations simples et basiques, tout cela dans l'objectif de positionner canvas comme une option puissante pour la visualisation des données dans vos applications Web. En gardant cela à l'esprit, je me concentrerai sur vos premiers pas avec canvas et sur la façon dont vous pouvez dessiner des lignes, des formes et du texte simples. J'aborderai ensuite l'utilisation des dégradés dans les formes, ainsi que la méthode d'ajout d'images externes à un canevas. En dernier lieu, et comme je l'ai toujours fait dans cette série, je terminerai par une brève présentation des polyfills destinés à la prise en charge de canvas sur des navigateurs plus anciens.

Présentation de l'élément canvas HTML5

Selon la spécification HTML5 du W3C (w3.org/TR/html5/the-canvas-element.html), l'élément canvas « fournit des scripts avec un canevas de bitmap dépendant de la résolution et susceptible d'être utilisé afin de rendre des graphiques, des graphismes de jeux ou d'autres images visuelles à la volée ». Canvas est en fait défini dans deux spécifications du W3C. Il se trouve tout d'abord dans la spécification centrale de HTML5, dans laquelle l'élément lui-même est défini en détail. Cette spécification couvre l'utilisation de l'élément canvas, la façon dont vous pouvez obtenir le contexte de son dessin, les API d'exportation du contenu de canvas et des considérations relatives à la sécurité pour les fournisseurs de navigateur. La deuxième spécification est le contexte 2D du canvas HTML (w3.org/TR/2dcontext), sur lequel je reviendrai dans un moment.

Utiliser canvas pour la première fois est aussi simple que d'ajouter un élément <canvas> à un balisage HTML5, de la façon suivante :

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>My Canvas Demo </title>               
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <canvas id="chart" width="600" height="450"></canvas>       
      </body>
    </html>

Bien que je dispose maintenant d'un élément canvas dans le DOM, le fait de placer ce balisage sur la page ne fait rien puisque l'élément canvas n'a aucun contenu tant que ce dernier n'a pas été ajouté. C'est là qu'intervient le contexte du dessin. Pour vous montrer où se trouve le canevas vide, je peux utiliser CSS afin de lui donner un style. J'ajoute donc un ligne bleue en pointillés autour de l'élément vide.

    canvas {
        border-width: 5px;
        border-style: dashed;
        border-color: rgba(20, 126, 239, 0.50)
    }

Le résultat, lorsque la page est ouverte dans Internet Explorer 9+, Chrome, Firefox, Opera ou Safari, est décrit à la figure 1.

Figure 1 Un élément canvas stylisé et vide

Avec canvas, la plupart du travail se fait en JavaScript, où les API exposées d'un contexte de dessin du canevas peuvent être utilisées afin de manipuler chaque pixel de la surface. Pour obtenir le contexte de dessin du canevas, vous devez obtenir l'élément canvas du DOM, puis appeler la méthode getContext de cet élément.

var _canvas = document.getElementById('chart');
var _ctx = _canvas.getContext("2d");

GetContext retourne un objet avec une API que vous pouvez utiliser pour dessiner sur le canevas en question. Le premier argument de cette méthode (dans le cas présent, « 2d ») spécifie l'API de dessin que vous souhaitez utiliser pour le canevas. « 2d » fait référence au contexte 2D de l'élément canvas HTML que j'ai mentionné précédemment. Comme vous l'avez peut-être deviné, 2D signifie qu'il s'agit d'un contexte de dessin à deux dimensions. Au moment de la rédaction de cet article, le contexte 2D est le seul contexte de dessin pris en charge à grande échelle et c'est celui que nous utiliserons ici. Un contexte de dessin 3D est en cours de conception et d'expérimentation, canvas devrait donc être encore plus puissant pour vos applications à l'avenir.

Dessin de lignes, formes et textes

Maintenant que nous avons un élément canvas sur notre page et que nous avons obtenu son contexte de dessin dans JavaScript, nous pouvons commencer à ajouter un contenu. Étant donné que je souhaite me concentrer sur la visualisation des données, je vais utiliser le canevas pour dessiner un histogramme afin de représenter les données de vente du mois en cours pour un magasin de sport fictif. Dans le cadre de cet exercice, je vais devoir dessiner des lignes pour les axes, des formes et des remplissages pour les barres et du texte pour les noms de chaque axe et barre.

Commençons par les lignes des axes x et y. Pour dessiner des lignes (ou des chemins) avec le contexte du canevas, deux étapes sont nécessaires. Commencez par « tracer » les lignes sur la surface à l'aide d'une série d'appels lineTo(x, y) et moveTo(x, y). Chaque méthode prend des coordonnées x et y sur l'objet canvas (en partant du coin supérieur gauche) à utiliser lors de l'exécution de l'opération (par opposition aux coordonnées sur l'écran lui-même). La méthode moveTo va jusqu'aux coordonnées spécifiées et lineTo trace une ligne des coordonnées actuelles jusqu'aux coordonnées que vous spécifiez. Par exemple, le code suivant trace l'axe y sur la surface :

// Draw y axis.
_ctx.moveTo(110, 5);
_ctx.lineTo(110, 375);

Si vous ajoutez ce code au script et que vous l'exécutez dans le navigateur, vous remarquerez qu'il ne se passe rien. Dans la mesure où la première étape consiste essentiellement à tracer, rien n'est dessiné à l'écran. Le traçage indique simplement au navigateur qu'il doit noter une opération de chemin qui sera affichée à l'écran à un moment donné. Lorsque je suis prêt à dessiner les chemins à l'écran, je définis de façon facultative la propriété strokeStyle du contexte, puis j'appelle la méthode stroke qui remplit les lignes invisibles. Le résultat obtenu est illustré à la figure 2.

 

// Define Style and stroke lines.
_ctx.strokeStyle = "#000";
_ctx.stroke();

Figure 2 Une seule ligne sur le canevas

Étant donné que la définition des lignes (lineTo, moveTo) et le dessin des lignes (stroke) sont découplés, vous pouvez faire toute une série d'opérations lineTo et moveTo, puis les afficher toutes à l'écran en même temps. Je vais procéder ainsi pour les axes x et y, ainsi que pour les opérations qui dessinent des flèches au bout de chaque axe. La fonction complète du dessin des axes est illustrée à la figure 3 et le résultat obtenu, à la figure 4.

Figure 3 La fonction drawAxes

function drawAxes(baseX, baseY, chartWidth) {
   var leftY, rightX;
   leftY = 5;
   rightX = baseX + chartWidth;
   // Draw y axis.
   _ctx.moveTo(baseX, leftY);
   _ctx.lineTo(baseX, baseY);
   // Draw arrow for y axis.
   _ctx.moveTo(baseX, leftY);
   _ctx.lineTo(baseX + 5, leftY + 5);
   _ctx.moveTo(baseX, leftY);
   _ctx.lineTo(baseX - 5, leftY + 5);
   // Draw x axis.
   _ctx.moveTo(baseX, baseY);
   _ctx.lineTo(rightX, baseY);
   // Draw arrow for x axis.
   _ctx.moveTo(rightX, baseY);
   _ctx.lineTo(rightX - 5, baseY + 5);
   _ctx.moveTo(rightX, baseY);
   _ctx.lineTo(rightX - 5, baseY - 5);
   // Define style and stroke lines.
   _ctx.strokeStyle = "#000";
   _ctx.stroke();
}

Figure 4 Axes x et y terminés

Maintenant que nous avons nos axes, il serait probablement préférable de les nommer afin qu'ils soient plus utiles. Le contexte de canevas 2D spécifie les API permettant d'ajouter du texte aux éléments canvas, vous n'avez donc pas besoin de bidouiller des choses brouillonnes telles qu'un texte flottant au-dessus de l'élément canvas. Cela étant dit, le texte canvas ne fournit pas de modèle de zone et n'accepte pas non plus les styles CSS définis pour un texte de la taille de la page, etc. L'API fournit un attribut de police qui fonctionne comme une règle de police CSS, ainsi que les propriétés textAlign et textBaseline pour vous donner un certain contrôle sur la position par rapport aux coordonnées fournies, mais à part cela, le dessin du texte sur le canevas consiste à choisir un point exact sur le canevas pour le texte entré.

L'axe x représente les produits du magasin de sport fictif, nous allons donc nommer cet axe en conséquence :

var height, widthOffset;
height = _ctx.canvas.height;
widthOffset = _ctx.canvas.width/2;
_ctx.font = "bold 18px sans-serif";
_ctx.fillText("Product", widthOffset, height - 20);

Dans cet extrait de code, je définis la propriété de police facultative et je fournis une chaîne à dessiner sur la surface, ainsi que les coordonnées x et y à utiliser comme point de départ de la chaîne. Dans cet exemple, je dessine le mot « Product » au centre du canevas, à 20 pixels du bas, ce qui laisse de la place pour les noms de chaque produit sur l'histogramme. Je procède de façon similaire pour le nom de l'axe y qui contient les données de vente de chaque produit. Le résultat obtenu est illustré à la figure 5.

Figure 3 Un canevas avec du texte

Maintenant que nous disposons d'une structure pour l'histogramme, nous pouvons ajouter les barres. Nous allons créer des données de vente fictives pour l'histogramme que je vais définir comme un tableau JavaScript de littéraux d'objet.

var salesData = [{
   category: "Basketballs",
   sales: 150
}, {
   category: "Baseballs",
   sales: 125
}, {
   category: "Footballs",
   sales: 300
}];

Avec ces données à notre disposition, nous pouvons utiliser fillRect et fillStyle pour dessiner les barres de l'histogramme.

fillRect(x, y, width, height) dessine un rectangle sur le canevas aux coordonnées x et y, avec la largeur et la hauteur que vous spécifiez. Il est important de noter que fillRect dessine des formes en commençant de la partie supérieure gauche, puis en allant vers l'extérieur, à moins que vous n'indiquiez des valeurs de largeur et de hauteur négatives, auquel cas le remplissage se fait dans la direction opposée. Pour les tâches permettent de dessiner des graphiques, vous devez dessiner les barres du haut vers le bas, par opposition au bas vers le haut.

Pour dessiner les barres, vous pouvez parcourir le tableau des données de vente et appeler fillRect avec les coordonnées appropriées :

var i, length, category, sales;
var barWidth = 80;
var xPos = baseX + 30;
var baseY = 375;       
for (i = 0, length = salesData.length; i < length; i++) {
   category = salesData[i].category;
   sales = salesData[i].sales;
   _ctx.fillRect(xPos, baseY - sales-1, barWidth, sales);
   xPos += 125;
}

Dans ce code, la largeur de chaque barre est standard, tandis que la hauteur est extraite de la propriété sales pour chaque produit du tableau. Le résultat de ce code est illustré à la figure 6.

Figure 6 Les rectangles représentent les données de l'histogramme

Nous disposons maintenant d'un graphique correct sur le plan technique, mais ces barres noires unies laissent quelque peu à désirer. Nous allons les égayer avec un peu de couleur, puis ajouter un effet de dégradé.

Utilisation des couleurs et des dégradés

Lorsque la méthode fillRect d'un contexte de dessin est appelée, ce contexte utilise la propriété actuelle fillStyle de façon à styliser le rectangle à mesure qu'il est dessiné. Le style par défaut est un noir uni. C'est la raison pour laquelle l'histogramme ressemble à celui illustré à la figure 6. fillStyle accepte les couleurs RVB, hexadécimales et nommées et nous allons donc ajouter quelques fonctionnalités afin de styliser chaque barre avant qu'elle ne soit dessinée :

// Colors can be named hex or RGB.
colors = ["orange", "#0092bf", "rgba(240, 101, 41, 0.90)"];       
...
_ctx.fillStyle = colors[i % length];
_ctx.fillRect(xPos, baseY - sales-1, barWidth, sales);

Nous commençons par créer un tableau de couleurs. Ensuite, en parcourant chaque produit, nous utilisons l'une de ces couleurs comme style de remplissage de l'élément. Le résultat obtenu est illustré à la figure 7.

Figure 7 Utilisation de fillStyle pour styliser les formes

Voilà qui est mieux, mais fillStyle est très souple et vous permet d'utiliser des dégradés linéaire et radiaux plutôt que des couleurs unies. Le contexte de dessin 2D spécifie deux fonctions de dégradé, createLinerGradient et createRadialGradient, toutes les deux pouvant améliorer le style des formes grâce à des transitions de couleurs légères.

Dans le cadre de cet exemple, je vais définir une fonction createGradient qui accepte les coordonnées x et y pour le dégradé, une largeur et la couleur principale à utiliser :

function createGradient(x, y, width, color) {
   var gradient;
   gradient = _ctx.createLinearGradient(x, y, x+width, y);
   gradient.addColorStop(0, color);
   gradient.addColorStop(1, "#efe3e3");
   return gradient;
}

Après avoir appelé createLinearGradient avec les coordonnées de début et de fin, j'ajoute deux arrêts de couleurs à l'objet gradient retourné par le contexte de dessin. La méthode addColorStop ajoute des transitions de couleur dans le dégradé. Elle peut être appelée autant de fois que vous le souhaitez avec des premières valeurs de paramètre situées entre 0 et 1. Une fois le dégradé défini, je le retourne depuis la fonction.

L'objet de dégradé peut être défini comme propriété fillStyle sur le contexte au lieu des chaînes hex et RGB spécifiées pour l'exemple précédent. J'utilise les mêmes couleurs comme point de départ, puis je les estompe jusqu'à ce qu'elles atteignent un gris clair.

colors = ["orange", "#0092bf", "rgba(240, 101, 41, 0.90)"];
_ctx.fillStyle = createGradient(xPos, baseY - sales-1, barWidth, colors[i % length]);
_ctx.fillRect(xPos, baseY - sales-1, barWidth, sales);

Le résultat de l'option de dégradé est illustré à la figure 8.

Figure 8 Utilisation des dégradés dans un canevas

Utilisation des images

À ce stade, nous avons obtenu un histogramme agréable à regarder que nous pourrons rendre dans le navigateur à l'aide de quelques dizaines de lignes de JavaScript. Je pourrais m'arrêter ici, mais je souhaite aborder encore une API de canevas de base liée à l'utilisation des images. Non seulement l'élément canvas vous permet de remplacer des images statiques par un contenu reposant sur des scripts et interactif, mais il vous permet également d'utiliser des images statiques afin d'améliorer les visualisations du canevas.

Dans le cadre de cette démonstration, je vais utiliser des images pour représenter les barres de l'histogramme. Je ne vais pas utiliser n'importe quelle image, mais celle correspondant à l'article lui-même. Avec cet objectif à l'esprit, mon site Web a un dossier qui contient les images JPG de chaque produit. Dans le cas présent, il s'agit de basketballs.jpg, baseballs.jpg et footballs.jpg. Il me suffit de positionner et de redimensionner chaque image de façon appropriée.

Le contexte de dessin 2D définit une méthode drawImage avec trois surcharges qui acceptent trois, cinq ou neuf paramètres. Le premier paramètre est toujours l'image de l'élément DOM à dessiner. La version la plus simple de drawImage accepte également les coordonnées x et y sur le canevas et dessine l'image telle quelle à cet emplacement. Vous pouvez également fournir les valeurs de largeur et de hauteur comme deux derniers paramètres, ce qui permettra de redimensionner l'image à cette taille avant de la dessiner sur la surface. En dernier lieu, l'utilisation la plus complexe de drawImage vous permet de rogner une image jusqu'à obtenir un rectangle défini, de lui donner les dimensions voulues et finalement, de la dessiner sur le canevas aux coordonnées spécifiées.

Étant donné que les images sources dont je dispose sont de grande taille et utilisées ailleurs sur mon site, je vais adopter la dernière approche. Dans cet exemple, au lieu d'appeler fillRect pour chaque élément en parcourant le tableau salesData, je vais créer un élément Image DOM, définir sa source sur l'une des images de produit et rendre une version rognée de cette image sur l'histogramme, comme illustré à la figure 9.

Figure 9 Dessin des images sur un canevas

// Set outside of my loop.
xPos = 110 + 30;     
// Create an image DOM element.
img = new Image();
img.onload = (function(height, base, currentImage, currentCategory) {
  return function() {
    var yPos, barWidth, xPos;
    barWidth = 80;
      yPos = base - height - 1;
    _ctx.drawImage(currentImage, 30, 30, barWidth, height, xPos, yPos,
      barWidth, height);
      xPos += 125;           
  }
})(salesData[i].sales, baseY, img, salesData[i].category);
img.src = "images/" + salesData[i].category + ".jpg";

Étant donné que je crée ces images dynamiquement, au lieu de les ajouter manuellement au balisage lors de la conception, je ne dois pas supposer que je peux définir l'image source, puis dessiner immédiatement cette image sur le canevas. Afin de m'assurer que je dessine chaque image uniquement une fois qu'elle a été complètement téléchargée, j'ajoute la logique de dessin à l'événement onload pour l'image, puis j'encapsule ce code dans une fonction qui s'appelle toute seule, ce qui crée une fermeture avec des variables pointant vers la catégorie de produits, ainsi que les variables de vente et de positionnement appropriées. Le résultat obtenu est illustré à la figure 10.

Figure 10 Utilisation d'images sur un canevas

Utilisation d'un polyfill pour canvas

Comme vous le savez peut-être, les versions d'Internet Explorer antérieures à la version 9, ainsi que des versions plus anciennes d'autres navigateurs, ne prennent pas en charge l'élément canvas. Vous pouvez le constater vous-même en ouvrant ce projet de démonstration dans Internet Explorer et en appuyant sur F12 pour ouvrir les outils de développement. Dans les outils accessibles depuis F12, vous pouvez remplacer le mode du navigateur par Internet Explorer 8 ou Internet Explorer 7 et rafraîchir la page. Vous verrez probablement une exception JavaScript avec le message « L'objet ne prend pas en charge la propriété de la méthode getContext ». Le contexte de dessin 2D n'est pas disponible, pas plus que l'élément canvas. Il est également important de savoir que même dans Internet Explorer 9, canvas n'est pas disponible tant que vous n'avez pas spécifié de DOCTYPE. Comme je l'ai mentionné dans le premier article de cette série (msdn.microsoft.com/magazine/hh335062), c'est toujours une bonne idée d'utiliser <!DOCTYPE html> en haut de toutes vos pages HTML afin de vous assurer que les dernières fonctionnalités du navigateur sont disponibles.

La ligne de conduite la plus simple à adopter pour les utilisateurs dont les navigateurs ne prennent pas en charge canvas consiste à utiliser un élément de secours tel qu'une image ou du texte. Par exemple, pour afficher une image de secours sur l'écran des utilisateurs, vous pouvez avoir recours à un balisage similaire à ce qui suit :

    <canvas id=”chart”>
      <img id=”chartIMG” src=”images/fallback.png”/>
    </canvas>

Tout contenu placé à l'intérieur de la balise <canvas> est rendu uniquement si le navigateur de l'utilisateur ne prend pas en charge canvas. Cela signifie que vous pouvez placer des images ou du texte à l'intérieur de la balise canvas comme solution de secours simple et ne nécessitant aucune vérification.

Si vous souhaitez aller encore plus loin avec la prise en charge des solutions de secours, la bonne nouvelle est qu'il existe diverses solutions de polyfill pour canvas. Vous pouvez donc l'utiliser en toute confiance avec d'anciens navigateurs tant que vous analysez attentivement les solutions potentielles et que vous êtes conscient des limites d'un polyfill donné. Comme je l'ai mentionné dans d'autres articles de cette série, votre point de départ pour trouver un polyfill destiné à la technologie HTML5 doit être la page HTML5 Cross Browser Polyfills du Wiki Modernizr, sur GitHub (bit.ly/nZW85d). Au moment de la rédaction de cet article, plusieurs polyfills sont disponibles pour canvas, dont deux qui apportent des solutions de secours à Flash et Silverlight.

 Dans le projet de démonstration téléchargeable de cet article, j'utilise explorercanvas (code.google.com/p/explorercanvas), qui utilise le langage VML pris en charge par Internet Explorer afin de créer des approximations proches de la fonctionnalité de canvas. J'utilise également canvas-text (code.google.com/p/canvas-text) qui ajoute une autre prise en charge permettant de rendre le texte dans des navigateurs plus anciens.

Comme illustré dans des articles précédents, vous pouvez utiliser Modernizr pour détecter les fonctionnalités de prise en charge de canvas (et canvastext) dans un navigateur en appelant Modernizr.canvas, puis utiliser Modernizr.load pour charger explorercanvas de façon asynchrone lorsque cela s'avère nécessaire. Pour plus d'informations, reportez-vous à modernizr.com.

Si vous ne souhaitez pas utiliser Modernizr, il existe une autre solution pour ajouter de façon conditionnelle explorercanvas pour les versions plus anciennes d'Internet Explorer : les commentaires conditionnels :

    <!--[if lt IE 9]>
      <script src="js/excanvas.js"></script>
      <script src="js/canvas.text.js"></script>
    <![endif]-->

Lorsqu'Internet Explorer 8 ou des versions plus anciennes rencontrent un commentaire formaté de cette façon, ils exécutent le bloc comme s'il s'agissait d'une instruction if et incluent les fichiers de script explorercanvas et canvas-text. D'autres navigateurs, dont Internet Explorer 10, traitent tout le bloc comme s'il s'agissait d'un commentaire et l'ignorent complètement.

Lors de l'évaluation d'un polyfill potentiel pour votre application, veillez à vérifier le degré de prise en charge du contexte de dessin 2D par un polyfill donné. Seuls quelques-uns d'entre eux offrent une prise en charge complète pour toutes les utilisations, bien qu'ils puissent presque tous gérer les situations basiques que nous avons examinées dans cet article.

Je n'ai pas pu tout aborder dans cet article, mais canvas vous permet de faire bien plus de choses, comme répondre aux événements clic (et autres), modifier les données du canevas, animer la surface de dessin, rendre et manipuler des images pixel par pixel, enregistrer l'état et exporter toute la surface comme sa propre image. En fait, il existe des livres entièrement consacrés à canvas. Nul besoin d'être un développeur de jeux pour expérimenter la puissance de canvas et j'espère vous en avoir convaincu lors de cette présentation des notions de base. Je vous encourage à lire vous-même les spécifications et à vous jeter dans le bain de cette nouvelle technologie graphique pleine de promesses.

Pour obtenir davantage d'informations sur la prise en charge de canvas dans Internet Explorer 9, consultez le Guide du développeur IE9 en ligne (msdn.microsoft.com/ie/ff468705). Veillez également à consulter les démonstrations Canvas Pad disponibles sur le site de test IE Test Drive (bit.ly/9v2zv5). Pour obtenir une liste de quelques autres polyfills multinavigateurs destinés à canvas, consultez la liste complète des polyfills sur (bit.ly/eBMoLW).

En dernier lieu, toutes les démonstrations de cet article, qui sont disponibles en ligne, ont été créées à l'aide de WebMatrix, un outil de développement Web gratuit et léger de Microsoft. Vous pouvez essayer WebMatrix vous-même à l'adresse suivante : aka.ms/webm.

Brandon Satrom est développeur pour Microsoft aux alentours d'Austin. Il possède un blog sur userinexperience.com et vous pouvez le suivre sur Twitter à l'adresse twitter.com/BrandonSatrom.

Merci aux experts techniques suivants d'avoir relu cet article : Jatinder Mann et Clark Sell