Dans la courte mais déjà si riche histoire du web, certaines évolutions ont été des étapes marquantes. L’introduction de la balise <img> fut une innovation majeure dans la perception du rendu ; par la suite, celle du JavaScript, puis d’Ajax apportèrent le dynamisme qui lui manquait.
S’il est possible de faire énormément de choses en combinant HTML, CSS & JavaScript, il reste néanmoins des trous dans la raquette : la publication de contenus audio et vidéo requiert l’utilisation de plugins comme Flash ou SilverLight.
Il est donc possible de tout faire, finalement ? Magnifique ! Oui et non, car Flash et SilverLight sont des outils sous contrôles de sociétés mercantiles.
Aujourd’hui, HTML5 propose de combler l’espace vacant via des éléments dits ‘Rich Media’.
Dans cette première partie, consacrée à ces éléments, nous allons détailler l’élément canvas.
CANVAS
L’élément canvas
L’élément canvas ouvre un environnement de création dynamique d’images.
Cet élément est simplement déclaré dans le code html, et ensuite réécrit dans le code JavaScript pour y être manipulé :
var canvas = document.getElementById(‘mon-canvas’);
var context = canvas.getContext(‘2d’);
</script>
Il est à noter que les navigateurs ne supportant pas l’élément canvas afficheront tout contenu se trouvant entre les balises. Il peut donc être judicieux de prévoir une image ou un texte de remplacement par défaut pour les utilisateurs de ces navigateurs.
Le contexte décrit dans le JavaScript peut être soit 2d soit 3d.
Voila, à ce stade, il est déjà possible de dessiner une image à deux dimensions dans l’environnement de 360×240 créé par l’élément canvas.
Pour ce faire, il existe une API 2D, décrite ici .
Elle permet de réaliser des graphiques avec les mêmes outils que dans un logiciel graphique, tel Adobe Illustrator, à savoir traits, remplissages, dégradés, ombres, formes et courbes de Béziers. Bien entendu, contrairement à un logiciel qui offre une interface graphique pour travailler, via l’API tout doit être spécifié en JavaScript.
Contrairement à SVG, l’élément canvas ne permet de créer de prime abord que la forme simple qu’est le rectangle, les autres formes devant être créés par combinaison de chemins.
Un exemple simple
Par exemple, pour définir des formes simples rectangulaires, voici le code qu’il faut implémenter :
<html>
<head>
<meta charset= »utf-8″>
</head>
<body>
<h1>HTML5</h1>
<h2>CANVAS</h2>
<canvas id=’mon_canevas’ width=’500′ height=’300′></canvas><script type= »application/x-javascript »>
var canevas = document.getElementById(‘mon_canevas’);
var context = canevas.getContext(‘2d’);// Definition d’un rectangle strokeRect(gauche, haut, largeur, hauteur) context.fillStyle = « rgb(100,100,0) »;
context.fillRect (10, 10, 55, 50);context.fillStyle = « rgba(0, 100, 100, 0.5) »;
context.fillRect (30, 30, 55, 50);
context.strokeStyle = ‘#78BFD3’ ;//Couleur bleue des traits
context.strokeRect(5, 5, 85, 80) ;
</script>
</body>
</html>
Ce qui donne ceci :
Dessins plus complexes
Pour créer des images plus complexes que de simples rectangles, il faut définir des combinaisons de chemins : pour cela, il est fourni une collection de fonctions de création de chemins permettant la mise au point de formes complexes.
context.moveTo(10, 10);
context.lineTo(20, 10);
context.bezierCurveTo(20, 10, 35, 130, 60, 10);
context.lineTo(60, 10);
context.lineTo(70, 10);
context.lineTo(70, 150);
context.lineTo(60, 150);
context.bezierCurveTo(60, 150, 35, 20, 20, 150);
context.lineTo(10, 150);
context.fill();
Ce qui donne ceci :
En théorie, il est possible de créer via cette méthode tout graphique créé dans un logiciel comme Illustrator, mais en pratique, pas besoin d’être grand clerc pour se rendre compte que ça ne servirait pas à grand-chose. Ce qui a par contre grand intérêt, c’est de pouvoir modifier à la volée des graphiques en faisant évoluer le contenu du canevas !
Utilisation rationnelle
Ainsi, une action utilisateur peut engendrer une évolution du graphique.
Il est donc désormais possible de réaliser des outils ou des jeux qui précédemment nécessitait une techno basé sur plug-in tel que Flash.
Une utilisation simple et cohérente de cet élément est la mise à jour instantanée de graphiques lors de la saisie de données utilisateurs, comme par exemple un graphique de statistiques en bâtons ou en camembert.
Et le SVG alors ?
On peut se demander pourquoi avoir recréé ce qui existait déjà via le SVG (Scalable Vector Graphics), qui lui s’appuie sur le format XML pour décrire le même genre de formes que canvas.
Réinventer la roue n’étant pas une fin en soi, l’explication est qu’en fait le WHATWG a simplement spécifié ce qu’Apple avait déjà implémenté dans son navigateur Safari et que les autres fabricants de navigateurs avaient copié dans le leur !
C’est donc juste une mise à niveau de la doc par rapport à l’existant…
Aujourd’hui, cette balise est supporté par Safari, Firefox, Opera, Chrome, et IE9, et il y a même une librairie JavaScript qui permet aux versions précédentes d’Internet Explorer de la supporter (voir ici).
Accessibilité
Il existe un problème au niveau de l’accessibilité car l’élément canvas ne possède pas de Document Object Model. Or, les lecteurs d’écran et autres technologies d’assistance s’appuient sur le DOM pour donner un sens au document.
Autres possibilités
Il y a bien d’autres possibilités existantes via cet élément :
– Utilisation d’images,
– Transformation des graphiques (rotation, translation, mise à l’échelle…)
– Composition de formes multiples,
– Animations basiques.
Mais ceci est une autre histoire…
En attendant, voici quelques liens à étudier de plus près :
