Canvas (HTML)

L'élément canvas est un composant du langage Web HTML qui permet d'effectuer des rendus dynamiques d' 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. 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 offrant ainsi une prise en charge des fonctionnalités de canvas. 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. Ce code crée une zone de dessin sur une page HTML :

Affichage d'un texte pour les navigateurs qui ne supportent pas canvas.

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

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

Ce code dessine à l'écran un rectangle semi-transparent bleu. Canvas a deux dimemsions : 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'affectent que la taille de l'élément et non la surface de dessin.