Canvas - Le graphisme dans un navigateur

La balise Canvas est définie dans le nouveau format de pages HTML 5, et elle déjà implémentée sur la plupart des navigateurs.
Elle permet d'afficher du graphisme en 2D dans le navigateur et ainsi faire de celui-ci une plateforme d'applications web riches.

Comment utiliser Canvas

La balise n'a que deux attributs: width et height (largeur et hauteur), outre les attributs génériques comme id, name, class... Son but est de marquer l'emplacement où l'on veut insérer une surface de dessin (techniquement appellée "contexte de rendu").

Le corps de la balise n'est pas affiché par les navigateurs qui implémentent Canvas mais seulement par les autres, et constitue donc un moyen de fournir un contenu alternatif.

Utiliser Canvas est très simple, le code ci-dessous montre une application minimale:

<canvas id="c1" width="400" height="100">
   Non implémenté.
</canvas>

Cela a défini un emplacement et son identifieur, reste à ajouter un contenu graphique:

var canvas = document.getElementById(c1); 
if (canvas.getContext)
{    
    var ctx = canvas.getContext('2d'); 
    ctx.fillRect(100,0,80,80);       // afficher un rectangle plein
}

Pour démarrer le script on peut utiliser l'évènement onload associée à la balise <body> ou à l'élément window. Dans la démo on crée la fonction canvasFun() et on l'assigne à onload:

window.onload.canvasFun;

Nous allons étudier dans les prochains articles les méthodes graphiques et leur utilisation.

Test et démo de Canvas

Ce script sert à tester l'implémentation de Canvas sur votre navigateur et montre quelques applications très simples de cette balise de HTML 5.

Les images doivent être affichées sur Firefox, Safari, Chrome, Opera.
Internet Explorer 8 et les versions précédentes affichent le message: "Non reconnu!".

Afficher un rectangle bleu

Code HTML

<canvas id="c1" width="400" height="100">
 Non reconnu!
</canvas>

Afficher un cercle vert

Code HTML

<canvas id="c2" width="400" height="100">
 Non reconnu!
</canvas>

Code JavaScript

function canvasFun()
{
  var canvas = document.getElementById('c1');
  if (canvas.getContext)
  {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(0,20,180)";
    ctx.fillRect(100,0,80,80);
  }
  var canvas = document.getElementById('c2');
  if (canvas.getContext)
  {
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = "rgb(0,128,0)";
    ctx.arc(140, 45, 40,0, Math.PI+(Math.PI*2)/2,true);
    ctx.stroke();
  }
}
window.onload=canvasFun;

La fonction canvasFun trace un rectangle plein dans la première balise canvas et un cercle dans la seconde.
Mais si la balise n'est pas reconnue par le navigateur, c'est le texte contenu qui est affiché.

Compatibilité et ressources

Canvas fonctionne actuellement sur: Firefox, Safari, Chrome, Opera, Internet Explorer 9. Des plugins permettent de l'ajouter à Internet Explorer 8 et antérieur.

ExplorerCanvas.
ExplorerCanvas est un script à ajouter dans les pages Web pour permettre de faire fonctionner la balise Canvas et le code associé. Il utilise Flash pour émuler Canvas.
IECanvas.
IECanvas est un plugin qui une fois installé, permet d'insérer une balise Canvas et de lui associer du code JavaScript, comme on peut le faire sur les navigateurs compatible avec HTML 5.
Fixing IE by Porting Flash to Canvas.
Un fork de ExplorerCanvas. Ici aussi, il faut inclure deux scripts, FlashCanvas.swf en Flash et FlashCanvas.js l'interface en JavaScript.

Plus de ressources

La spécification de Canvas 2D dans HTML 5 par le W3C.
Tutoriel Canvas. Avec démos et applications.
Exemples d'applications de Canvas. Quelques démos fournies par divers sites.
Outils pour Canvas.
WebGL. Un standard pour la 3D dans Canvas, a été développé en tant qu'interface à la librairie graphique OpenGL.