Canvas (HTML)

Un article de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher
Page d'aide sur l'homonymie Pour les articles homonymes, voir Canvas.

L'élément canvas est un composant de HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts. Déjà implémenté dans certains navigateurs, il fait partie de la spécification HTML5.

Historique[modifier | modifier le code]

Introduit à l'origine par Apple pour être utilisé dans WebKit pour des logiciels comme Dashboard et le navigateur Safari, canvas a été par la suite adopté par les navigateurs utilisant Gecko (notamment Mozilla Firefox) et Opera, avant d'être standardisé par le groupe de travail WHATWG. Novell a développé une extension activant les XForms dans Internet Explorer[1] offrant ainsi une prise en charge des fonctionnalités de canvas.

Fonctionnement[modifier | modifier le code]

canvas se résume en une zone de dessin dont la hauteur et la largeur sont définies dans du code HTML. Du code JavaScript permet d'accéder à l'aire via une série complète de fonctions de dessins, similaires aux autres API 2D, bien que permettant de générer dynamiquement des graphismes. Certaines personnes ont anticipé cet emploi de canvas en l'utilisant pour des graphiques, des animations et de la création d'images.

Exemple[modifier | modifier le code]

Ce code crée une zone de dessin sur une page HTML :

<canvas id="exemple" width="200" height="200">
  Affichage d'un texte pour les navigateurs qui ne supportent pas canvas.
</canvas>

Avec JavaScript, il est ensuite possible de dessiner dans la zone :

<script>
  var exemple = document.getElementById('exemple');
  var contexte = exemple.getContext('2d');
  contexte.fillStyle = "rgba(0,0,255,0.5)";
  contexte.fillRect(30, 30, 50, 50);
</script>

Ce code dessine à l'écran un rectangle semi-transparent bleu.

Réactions[modifier | modifier le code]

Lors de son introduction, canvas a été accueilli de manière mitigée par la communauté[Qui ?] des normes web[réf. nécessaire]. Certains se sont plaint de la décision d'Apple d'introduire cette balise propriétaire au lieu de supporter SVG, qui n'est pas encore complètement accepté sur le web[réf. nécessaire]. D'autres[Qui ?] ont argumenté contre la logique même de la conception de canvas : étant complètement procédurale et n'ayant pas de contrepartie descriptive permettant à canvas de « peindre », mais de dessiner des éléments[pas clair] qui ne sont pas identifiables dans une vision à la DOM[C'est-à-dire ?]. Enfin, l'absence d'indication d'un namespace est indésirable[pourquoi ?][2].

Un développeur web insatisfait[Qui ?] par le niveau de support du format SVG dans le navigateur Safari a développé un traducteur du format vectoriel SVG. Ce traducteur s'appelle Tiny 1.2[pas clair]. Il traduit du SVG vers le canvas. Il est écrit en Javascript. Le but de Tiny est d'illustrer les nouvelles possibilités ouvertes par le respect des normes nouvelles (concept DOM, notion d'objet) comme une preuve de concept des possibilités de partir directement de SVG. Tiny contre les critiques[Par qui ?] qui disaient alors qu'il était plus facile d'ajouter canvas à Safari que la totalité de SVG[3].

Notes et références[modifier | modifier le code]

  1. Novell XForms Explorer
  2. Remarques d'Ian Hickson sur canvas et d'autres Apple extensions au HTML
  3. Objet Javascript canvaSVG pour l'affichage des documents SVG via canvas

Voir aussi[modifier | modifier le code]

Articles connexes[modifier | modifier le code]

Liens externes[modifier | modifier le code]