À retenir
- Surface de dessin pilotable par code informatique.
- Mode de rendu dit « immédiat » : on dessine des pixels, mais le système ne « retient » pas les objets tracés individuellement.
- Excellent pour les performances lors d'animations complexes ou de jeux 2D.
Un canevas est une zone rectangulaire au sein d'une interface logicielle ou d'une page web destinée à l'affichage de graphiques. Contrairement à une image statique, c'est une surface dynamique que l'on peut manipuler par programmation pour tracer des formes, du texte ou des animations en temps réel.
Étymologie
Le mot provient du latin cannabis (chanvre), faisant référence à la toile de textile robuste utilisée par les peintres. En informatique, le terme a été adopté pour désigner la « toile numérique » sur laquelle un développeur vient « peindre » des pixels via du code.
Exemples d'usage
- La balise
<canvas>en HTML5, pilotée par JavaScript pour créer des jeux ou des graphiques. - Le composant
Canvasdans les bibliothèques d'interface graphique comme Tkinter (Python) ou Swing (Java). - La zone centrale d'un logiciel de dessin (comme Photoshop ou GIMP) où l'utilisateur interagit avec l'image.
Cas d'usage
Il intervient dans la création de jeux vidéo sur navigateur, la génération automatique de graphiques statistiques, le traitement d'images côté client et la réalisation d'animations publicitaires ou interactives sur le web.
Bonnes pratiques
Lorsqu'on anime un canevas, il est recommandé d'utiliser des fonctions de nettoyage (clear) entre chaque image pour éviter les traînées. Il faut aussi veiller à l'accessibilité en proposant une description textuelle alternative pour les utilisateurs malvoyants, car le contenu d'un canevas n'est pas lisible par défaut par les lecteurs d'écran.
Synonymes
Antonymes
Conseil
Si vous apprenez le développement web, voyez le canevas comme une grille de coordonnées (X,Y). Pour bien débuter, essayez de dessiner des formes simples (rectangles, cercles) avant d'attaquer la manipulation d'images ou les boucles d'animation.
Questions fréquentes
Quelle est la différence entre Canvas et SVG ?
Le Canvas manipule des pixels (image matricielle), idéal pour la vitesse et les jeux. Le SVG manipule des formes mathématiques (vecteurs), idéal pour les logos et les schémas qui doivent rester nets lors d'un zoom.
Le canevas est-il gourmand en ressources ?
Sa consommation dépend de la taille de la zone (nombre de pixels) et de la fréquence de rafraîchissement, mais il est généralement très optimisé par les navigateurs modernes.