Canvas

Canvas est une balise HTML qui ne fait pas partie de la version 4 et n'est donc pas implémentée sur tous les navigateurs, mais elle l'est sur Firefox et peut donc s'utiliser avec XUL. Elle permet de dessiner sur une partie de l'interface, et ajoute donc à XUL une des fonctionnalités majeures de XAML.
Par ailleurs elle fait partie de la spécification HTML 5 en cours.
Pour utiliser canvas, il faut d'abord ajouter la définition de l'espace de nom HTML à la fenêtre:

xmlns:html="http://www.w3.org/1999/xhtml"

Utilisation de canvas

La balise s'intègre dans le fichier de description XUL avec le préfixe html:

<html:canvas id="MonCanvas" width="400" height="300">
</html:canvas>

On a définit la largeur et la hauteur du canvas avec les attributs width et height. Un identifieur a aussi été attribué pour permettre d'accéder à l'élément à partir de JavaScript.
Dans la partie XUL, l'insertion de l'élément est tout ce dont on a besoin pour créer une surface de dessin. Le contenu sera entièrement créé avec du code JavaScript.

Celui-ci débute toujours par la définition d'un contexte graphique...

1) Retrouver l'objet:

var canvas = document.getElementById("MonCanvas");

2) Lui attribuer un contexte graphique:

var cg = canvas.getContext("2D");

Le paramètre indique que le canvas utilise des fonctions 2D.
Les fonctions sont des méthodes de l'objet graphique, par exemple:

cg.strokeStyle = "green"; 
cg.strokeRect(20,20,50,50);

On définit la couleur de tracé, en l'occurrence green (vert), et l'on dessine un rectangle en position 20 et 20, avec une hauteur et une largeur de 50 pixels.

Les fonctions de canvas

Donner la liste des fonctions de dessin sur canvas va au-delà de ce tutorial, car c'est une balise qui n'est pas native à XUL, mais un objet de Gecko et qui deviendra plus tard une partie de HTML. On pourra trouver un tutoriel sur cet objet sur le site de Mozilla.
Nous avons ajouté une fonction de cercle et utilisé une fonction de rectangle arrondi donnée en exemple sur le site Mozilla. Si l'on veut utiliser canvas en production, le mieux serait de continuer sur cette voie et créer une interface à chaque fonction implémentée sur Gecko, pour une réutilisation future en HTML 5.

Exemple

L'exemple dessine des figures diverses sur un canevas.

Démo: code.zip