L'élément canvas est un composant du langage Web HTML qui permet d'effectuer des rendus dynamiques d' bitmap en utilisant des scripts dans des langages tels que le javascript. Déjà implémenté dans certains navigateurs, il fait partie de la spécification HTML5. Canvas peut également être utilisé pour mettre en place un moyen de traçage de l'utilisateur sur le site sans avoir à collecter ses données personnelles grâce au canvas fingerprinting.
Historique 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 ExplorerNovell XForms Explorer offrant ainsi une prise en charge des fonctionnalités de canvas.
Fonctionnement 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 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.
Dimensions de canvas et de la surface de dessin Canvas a deux dimensions : celle de l'élément lui-même et celle de la surface de dessin de l'élément. La définition des attributs css width et height de l'élément les définit mais n'affecte que la taille de l'élément et non la surface de dessin.
Par défaut, les dimensions d'un canvas et de sa surface de dessin sont de 300 pixels de large et 150 pixels de hauteur. Dans l'exemple ci-dessous, avec CSS pour définir la taille de l'élément canvas, la taille de l'élément est de 600/300 pixels, mais la surface de dessin reste inchangée à sa valeur par défaut de 300 pixels × 150 pixels.
Lorsque la taille d'un élément de canevas ne correspond pas à la taille de sa surface de dessin, le navigateur redimensionne la surface de dessin pour s'adapter à l'élément, ce qui peut entraîner des effets de bord.
Exemple de définitions de dimensions différentes <!DOCTYPE html> <html> <head> <title>Dimensions canvas : 600 x 300, Dimensions de la surface de dessin : 300 x 150</title> <style> body { background: #dddddd;
#canvas { margin: 20px; padding: 20px; background: #ffffff; border: thin inset #aaaaaa; width: 600px; height: 300px;
</style> </head> <body> <canvas id="canvas"> Canvas n'est pas accepté par ce navigateur </canvas> </body> </html>
Réactions Lors de son introduction, canvas a été accueilli de manière mitigée. Certains se sont plaints 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.
Problématiques liées à la propriété intellectuelle Le , le développeur du framework WebKit Dave Hyatt transfère un e-mail du responsable du bureau des brevets d'Apple, Helene Plotka Workman, qui déclare qu'Apple se réserve les droits de propriété intellectuelle liés à la section « Graphics: The bitmap canvas »Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas de la nouvelle proposition du Web Hypertext Application Technology Working Group (WHATWG), mais n'est pas opposée à ouvrir les brevets si les spécifications sont transférées sous autre brevet standard. Cette polémique fait ressortir le manque de règles liées à la gestion des brevets par le WHATWG, comparé à celles du World Wide Web Consortium (W3C), qui impose explicitement des licences sans redevance. Apple transférera ensuite les brevets sous les termes de licence du W3C (donc sans redevance)HTML Working Group Patent Policy Status – Known Disclosures, imposant à Apple de fournir accès au brevet sous cette licence dès que le Canvas devient une proposition de standard du W3CW3C patent policy in use by HTML working group.
Problématiques liées à la vie privée
Le Canvas fingerprinting est une technique d'identification par empreinte digitale, qui permet d'identifier et de suivre les visiteurs de site web en utilisant l'élément HTML5 Canvas. Cette technique a reçu une forte couverture médiatique en 2014 après la publication d'un papier The Web never forgets de chercheurs de l'Université de Princeton et de l'Université catholique néerlandophone de Louvain. Une des problématiques majeures est qu'elle permet un suivi de l'utilisateur même après une suppression des cookies et du cache du navigateur.
Notes et références
Voir aussi Articles connexes
SVG VML Quartz Cairo Adobe Flash
Liens externes
Description de canvas dans le brouillon des applications web du WHATWG Présentation de canvas sur Mozilla Developer Center NCL.js Bibliothèque JavaScript permettant de réaliser facilement des animations en canvas. W3Schools Référence sur les fonctions de la balise Canvas.
Catégorie:HTML