Comprendre et utiliser le canvas dans le HTML 5

Si vous savez comment intégrer une vidéo et de la musique avec le HTML 5 alors le canvas est la prochaine étape. En termes simples, le canvas est une zone qui est interprétée par le navigateur afin qu'on puisse effectuer différentes tâches graphiques. Ainsi, on peut dessiner des rectangles, des cercles, mais aussi du texte et même des animations. Le canvas se base sur une API qui permet de dessiner en 2D. La société Opera travaille également sur une API 3D, mais elle est encore expérimentale. Pour comprendre le canvas, il faut se souvenir des programmes tels que Microsoft Paint. Ce dernier était un simple utilitaire pour dessiner et traiter des images. Et le canvas permet de recréer ce type d'applications dans un navigateur. En fait, il existe déjà des versions de Paint qui sont disponibles en HTML 5, mais aussi des programmes similaires à Photoshop ou Illustrator. On peut aussi ajouter de l'interactivité pour que l'utilisateur puisse dessiner ou déplacer des objets. De ce fait, le canvas du HTML 5 permet de créer des jeux et des applications entières indépendamment du système d'exploitation. Vous avez besoin de deux choses pour exploiter le canvas, un navigateur qui le supporte et une certaine connaissance du JavaScript. Heureusement, la plupart des navigateurs récents sont compatibles avec le HTML 5.

Vos premiers pas avec le canvas du HTML 5


On déclare un canvas avec la balise . Ensuite, on utilise le JavaScript pour appeler l'API de dessin en 2D et on donne les arguments et les méthodes pour les effets qu'on recherche. Le code suivant est un simple exemple du canvas :


À première vue, ce code paraît complexe à cause du JavaScript, mais nous allons séparer chaque partie. En premier lieu, on déclare le canvas en lui affectant un ID comme on le faisait avec n'importe quel élément HTML. Par défaut, la taille du canvas sera de 300 x 150 pixels. Et vous pouvez ajouter une couleur d'arrière-plan et une bordure si c'est nécessaire. Ensuite, on utilise le JavaScript pour pointer vers le nom du canvas (moncanvas) et ensuite, on appelle l'API de dessin en 2D.

Les deux dernières lignes indiquent le style de remplissage du rectangle, sa dimension et son emplacement. Donc, le style de remplissage sera une couleur bleue. Le rectangle aura une dimension de 250 x 75 pixels et il sera placé aux coordonnées de 0 par 0, c'est-à-dire au coin supérieur gauche de la page. Et on ferme le script. Si vous copiez, coller ce code dans une page HTML, il fonctionnera si le navigateur supporte le canvas.

Les autres possibilités du canvas


Notre exemple de rectangle n'est qu'une petite partie de la puissance du canvas. Car vous pouvez dessiner aussi des cercles, du texte, des dégradés et des motifs d'images. Ces derniers sont plus difficiles à cause du code nécessaire. Un élément qui manque cruellement de compatibilité est la possibilité de capturer une image à partir d'une vidéo dans le canvas. Opera et Chrome le supportent assez bien, mais ce n'est pas le cas de Safari. Avec ce type de capture, vous pouvez créer une galerie d'images à partir d'une vidéo.

Un autre aspect intéressant du canvas en HTML 5 est de pouvoir exporter des images grâce à la méthode toDataURL qui peut être combiné avec un format d'image tel que le PNG. Certains navigateurs supportent le JPEG ou le GIF. Le canvas a fait l'objet de livres entiers, mais on recommande d'attendre une certaine standardisation avant de l'implémenter pour de bon. Le W3C propose un dossier dédié au canvas avec ses attributs et la syntaxe selon les navigateurs. Notez cependant que le canvas n'est pas forcément nécessaire pour les webmestres, mais il prend tout son sens pour les développeurs. Ces derniers pourront créer des applications riches et pratiques avec le minimum d'outils.