Canvas (HTML)

Un article de Wikipédia, l'encyclopédie libre.

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. 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[1].

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[2] 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. Certains se sont plaints de la décision d'Apple d'introduire cette balise propriétaire au lieu de supporter SVG[3], qui n'est pas encore complètement accepté sur le web[4].

Problématiques liées à la propriété intellectuelle[modifier | modifier le code]

Le 14 mars 2017, le développeur du framework WebKit Dave Hyatt transfère un e-mail du responsable du bureau des brevets d'Apple, Helene Plotka Workman[5], qui déclare qu'Apple se réserve les droits de propriété intellectuelle liés à la section « Graphics: The bitmap canvas »[6] 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)[7], imposant à Apple de fournir accès au brevet sous cette licence dès que le Canvas devient une proposition de standard du W3C[8].

Problématiques liées à la vie privée[modifier | modifier le code]

Le Canvas fingerprinting est une techniques 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[9],[10],[11],[12] après la publication d'un papier The Web never forgets[13] 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[14].

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

  1. « Canvas fingerprinting : le successeur du cookie », (consulté le 31 juillet 2017)
  2. Novell XForms Explorer
  3. « Hixie's Natural Log: Extending HTML », sur ln.hixie.ch (consulté le 26 août 2020)
  4. « Can I use... Support tables for HTML5, CSS3, etc », sur caniuse.com (consulté le 4 janvier 2019)
  5. « [whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007 » [archive du ] (consulté le 1er mai 2007)
  6. Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas
  7. HTML Working Group Patent Policy Status – Known Disclosures
  8. W3C patent policy in use by HTML working group
  9. Knibbs, Kate, « What You Need to Know About the Sneakiest New Online Tracking Tool », sur Gizmodo, (consulté le 21 juillet 2014)
  10. Joseph Steinberg, « You Are Being Tracked Online By A Sneaky New Technology -- Here's What You Need To Know », Forbes,‎ (lire en ligne, consulté le 15 novembre 2014)
  11. Angwin, Julia, « Meet the Online Tracking Device That is Virtually Impossible to Block », ProPublica, (consulté le 21 juillet 2014)
  12. Kirk, Jeremy, « Stealthy Web tracking tools pose increasing privacy risks to users », PC World,‎ (lire en ligne, consulté le 21 juillet 2014)
  13. Acar, Gunes, Eubank, Christian, Englehardt, Steven, Juarez, Marc, Narayanan, Arvind et Diaz, Claudia, « The Web never forgets: Persistent tracking mechanisms in the wild », (consulté le 24 juillet 2014)
  14. « Firefox va bloquer le canvas fingerprinting, une méthode de tracking sans cookie », sur BDM, (consulté le 26 août 2020)

Voir aussi[modifier | modifier le code]

Articles connexes[modifier | modifier le code]

Liens externes[modifier | modifier le code]