Le b.a.-ba de Canvas [partie 1]

L’élément Canvas ouvre des possibilités prometteuses en matière de création de contenus graphiques 2D et de manipulation d’images et de vidéo. Voilà qui le distingue des nouveaux éléments du HTML5 comme Video et Audio qui servent simplement à l’intégration de contenu multimédia pré-existant sur le Web.

L’élément Canvas lui-même est un simple un conteneur d’éléments graphiques. Il devient utile en compagnie de son API Javascript correspondant qui crée des éléments graphiques à la volée.

Canvas a été inventé par Apple pour afficher les widgets du Tableau de bord. Son entrée sur le Web s’est faite par l’intermédiaire de Webkit avant d’être adopté progressivement par les autres navigateurs. Son ajout relativement récent dans la spécification officielle de HTML5 a favorisé l’uniformisation de sa prise en charge.

Prise en charge

Internet Explorer 9, Firefox, Opera, Chrome et Safari offrent le support de l’élément Canvas. Pour Internet Explorer 8 et les versions précédentes, il existe l’extension Javascript ExplorerCanvas (http://code.google.com/p/explorercanvas/) qui reproduit Canvas sans avoir à modifier le code, mais cela, non sans perte de perte de performance.

Implémentation native de Canvas

La performance de Canvas peut varier légèrement d’un navigateur à l’autre, et d’une plateforme à l’autre. Ce problème proviendrait de la difficulté qu’ont certains navigateurs à implémenter l’accélération matérielle sur Mac. Canvas est donc, dans ces navigateurs, un peu plus rapide en version Windows.

Sur mobile, Canvas et ses nombreuses fonctionnalités sont pris en charge. La performance y est cependant sensiblement inférieure à celle des ordinateurs de bureau. La performance varie également d’une plate-forme mobile à l’autre, puisque l’accélération matérielle n’est pas la même partout. La situation évolue cependant rapidement.

Canvas est un couple

Canvas est formé de l’élément du DOM et de l’API Javascript qui l’accompagne. L’élément du DOM sert à définir la zone de dessin sur la page – le canevas littéralement – et l’API Javascript prend en charge la création et la manipulation des éléments graphiques.

Voici un exemple de l’élément DOM. La taille de la surface est spécifiée à même l’élément Canvas (elle pourrait aussi l’être par JavaScript; en CSS par contre, l’attribut Height ne peut être contrôlé convenablement). L’attribut style confère à l’élément une bordure grise, pleine, de 5 pixels d’épaisseur (cet attribut en revanche peut très bien faire partie des CSS pour une efficacité accrue).

<canvas id="monCanvas" width="300" height="300" style="border: 5px solid #999999;">
Votre navigateur ne supporte pas l'élément canvas du HTML5.</canvas>


Votre navigateur ne supporte pas l’élément canvas du HTML5.

Il ne reste plus qu’à dessiner sur la surface définie par Canvas grâce à un API JavaScript accompagnant celui-ci ou encore situé dans un fichier .js comme c’est le cas ici:

<script type="text/javascript" src="/scripts/dessincanvas.js"></script>
<script type="text/javascript">
<!--
dessincanvas();
//--></script>

Les éléments graphiques sont décrits dans le fichier JS externe:

// JavaScript Document

function dessincanvas() {
	
// Dessiner un carré rouge  
var canvas = document.getElementById("monCanvas");
var ctx1 = canvas.getContext("2d");
ctx1.fillStyle="#FF0000";
ctx1.fillRect(30, 30, 80, 80); 

// Dessiner une ligne diagonale 
var ctx2 = canvas.getContext("2d");
ctx2.moveTo(0,0);
ctx2.lineTo(300,300);
ctx2.stroke();

// Dessiner un cercle 
var canvas = document.getElementById("monCanvas");
var ctx3 = canvas.getContext("2d");
ctx3.beginPath();
ctx3.arc(200,100,40,0,2*Math.PI);
ctx3.stroke();

// Écrire du texte
var canvas = document.getElementById("monCanvas");
var ctx4 = canvas.getContext("2d");
ctx4.fillStyle="#0000FF";
ctx4.font="30px Arial";
ctx4.fillText("Mon Canvas",10,200);

}


Votre navigateur ne supporte pas l’élément canvas du HTML5.



C’est tout pour la mise en bouche! Nous explorerons dans un prochain article le fonctionnement proprement dit de l’objet HTML5 getContext(« 2d ») qui permet de dessiner sur le Canvas.

Quelques liens

Cette entrée a été publiée dans Animation Web, HTML5, JavaScript, Projet de perfectionnement. Placez un signet sur le permalien.

Les commentaires sont fermés.