Exploration de l'élément Canvas HTML5 et de ses applications
Le Canvas est une balise HTML conçue pour intégrer des graphismes interactifs au sein d'une surface de dessin. Cette balise ne contient pas de contenu HTML traditionnel, à l'exception d'un message destiné aux navigateurs plus anciens qui ne prennent pas en charge HTML5. Le contenu de l'élément <canvas> est généré dynamiquement par du code JavaScript.
Par exemple, il est possible d'afficher un rectangle bleu en utilisant un script. Ce script peut être déclenché par l'événement onload associé à la balise <body> ou à l'élément window. L'attribut fillStyle permet d'assigner une couleur courante au contexte de rendu, qui sera ensuite appliquée aux objets dessinés. Cette couleur peut être spécifiée par son nom, un code RVB ou RVBA. La méthode fillRect, quant à elle, dessine un rectangle rempli avec la couleur courante, en prenant comme paramètres les coordonnées x et y, ainsi que la largeur et la hauteur.
Comprendre l'élément Canvas
L'élément <canvas> est défini dans la spécification W3C. Il est implémenté dans la majorité des navigateurs modernes. La balise ne comporte que deux attributs principaux : width (largeur) et height (hauteur), en plus des attributs génériques tels que id, name, class, etc. Son rôle est de délimiter l'emplacement où une surface de dessin, techniquement appelée "contexte de rendu", sera insérée.
Le contenu de la balise <canvas> n'est pas rendu par les navigateurs compatibles avec Canvas. Il est uniquement affiché par les navigateurs plus anciens, offrant ainsi un moyen de fournir un contenu alternatif. Pour démarrer un script, on peut utiliser l'événement onload associé à la balise <body> ou à l'élément window.
Ce script sert à tester l'implémentation de Canvas sur votre navigateur et présente quelques applications simples de cette balise HTML5. Les images doivent être affichées sur les navigateurs récents. La fonction canvasFun trace un rectangle plein dans la première balise <canvas> et un cercle dans la seconde. Cependant, si la balise n'est pas reconnue par le navigateur, c'est le texte qu'elle contient qui est affiché.
Utilisation de JavaScript pour le dessin sur Canvas
La première étape pour utiliser l'élément <canvas> consiste à s'assurer que votre navigateur est entièrement compatible avec Canvas HTML5. Ensuite, vous devez ajouter un élément de canevas à votre page HTML.
Une fois l'élément <canvas> ajouté, la première étape du code consiste à obtenir le contexte 2D. Ce contexte nous donne accès à l'API qui définit toutes les méthodes et propriétés de dessin.
Pour dessiner une image, nous créons ensuite un objet Image et définissons sa propriété src sur l'emplacement de l'image binaire. Une fois l'image chargée, nous utilisons la méthode drawImage() pour l'importer dans l'élément <canvas>.
Manipulation d'images avec Canvas
Il est également possible d'utiliser un URI de données au lieu de l'URL d'une image. L'utilisation d'un URI de données présente plusieurs avantages, notamment la facilité d'exportation d'une image de canevas sous ce format.
Le dessin sur un canevas repose sur un concept similaire à la programmation Logo. Mark Pilgrim consacre un chapitre au canevas dans son livre "Dive Into HTML5". Pour des instructions supplémentaires, il est recommandé de consulter d'autres tutoriels.
Exportation de Canvas en URI de données
L'élément <canvas> dispose d'une méthode toDataURL(), qui accepte un type MIME comme paramètre. Cette méthode permet d'exporter le contenu du canevas. Le canevas est alors exporté sous forme d'image PNG dans une nouvelle fenêtre de navigateur. Il est important de noter que l'image résultante n'est pas une image binaire ordinaire, mais un URI de données encodé en base64, qui peut être affiché par un navigateur. De ce fait, l'utilisateur ne perçoit aucune différence par rapport à une image binaire.
Il est crucial de savoir que la ligne de code exécutant toDataURL() doit être lancée sur un serveur Web. L'exécution de cette méthode sur un fichier local entraînera une erreur.
Applications pratiques de Canvas
Le Canvas peut constituer un module complémentaire très puissant pour les applications Web qui stockent des images importées par les utilisateurs. Par exemple, dans une application de stockage de fichiers en ligne, il est possible d'ajouter un bouton "Modifier" pour ouvrir un fichier image dans un éditeur basé sur Canvas.
Si vous ne souhaitez pas développer votre propre éditeur de canevas, Harmony est l'un des éditeurs disponibles. Il permet d'ajouter facilement des pinceaux personnalisés pour s'adapter à vos préférences artistiques.
Dans une optique d'amélioration de l'expérience utilisateur, l'utilisation de LocalStorage est fortement recommandée. Par exemple, si vous avez une grande zone de texte nécessitant une saisie d'informations conséquente par l'utilisateur, vous pouvez enregistrer l'image du canevas en tant que fichier binaire si l'utilisateur ferme accidentellement le navigateur ou en cas de plantage.
Enregistrement d'images Canvas sur le serveur (PHP)
Pour enregistrer l'image du canevas, plusieurs méthodes s'offrent à vous. Une approche consiste à effectuer une requête POST pour transmettre l'URI de données à votre code backend. Cela crée un appel XHR dont le contenu est l'URI des données. Le serveur devra ensuite décoder l'URI de données base64.
Voici un exemple de traitement en PHP :
$contents = explode(',', $data);$decoded = base64_decode($contents[1]);fwrite($file, $decoded);Dans les deux premières lignes de cet extrait, l'URI de données ($contents) est divisé en deux parties : la partie descriptive ('data:image/png;base64') et la chaîne encodée en base64. Nous utilisons ensuite base64_decode() pour décoder cette chaîne. Une astuce importante concerne le décodage des chaînes de plus de 5 Ko ; l'approche consistant à "diviser pour régner" permet de les gérer efficacement. Enfin, à l'aide de fwrite(), vous pouvez enregistrer le fichier binaire ($contents) sur votre serveur.
PHP : PHP Data-URI to file
Alternatives et extensions
Si vous recherchez un éditeur de canevas plus avancé, PaintWeb constitue une excellente option. Développé par Mihai Sucan lors du Google Summer of Code 2009, il propose également des tutoriels pour la création de votre propre application de peinture en ligne.
Paul Irish a combiné Harmony et la reconnaissance Unistroke pour créer un petit œuf de Pâques sur son site Web.
Il est intéressant de noter que le Canvas peut être utilisé pour créer des animations complexes et des jeux, comparant ainsi la vitesse d'exécution des navigateurs, à l'instar de projets comme Zoomquilt, qui, bien que réalisé en Flash à l'origine, a été adapté en JavaScript dans Canvas.
Le Canvas est un élément HTML qui peut ressembler à une image. Cependant, votre navigateur ne propose pas d'option "Enregistrer l'image sous" car il ne s'agit pas d'un élément image au sens traditionnel. Pour activer cette fonctionnalité, vous pouvez créer dynamiquement un élément <img> et définir la valeur de son attribut src sur l'URI de données de l'élément <canvas>.
