• Introduction
• Insertion de canvas dans une page web
• Accéder au canvas en javascript
• Dessiner des formes
• Différents rectangles
• Gérer l'aspect d'une forme
• Dessiner des cercles et ellipses
• Tracer des lignes
• Tracer des courbes
• Ecrire du texte
• Ajouter des images
• Utiliser des motifs
• Gérer les propriétés dans le script
• Transformations des formes
• Translation
• Mise à l'échelle
• Rotation
• Utiliser une matrice de transformation
• Ajouter des ombres avec Canvas
• Créer des masques
• Modes de fusion et superposition
• Créer des animations avec canvas
• Effacer le contenu du canvas
• Gérer les intervalles de temps
• Mouvement linéaire simple
• Interagir avec l'utilisateur
• Utiliser la souris
• Détecter et utiliser un évènement clavier
• Collisions entre objets
• Prise en main de Canvas

Introduction

Le langage HTML5 avance peu à peu. Il a libéré rapidement de nombreuses énergies en partie grâce aux grandes nouveautés qu'il induit dans la programmation de page web. Parmi ces nouveautés, on remarquera l'avancée vers une structuration sémantique du contenu des pages web, l'introduction de bases de données locales, ou encore une interface de dessin qui va nous intéresser ici.

L'engouement vient donc beaucoup du côté fun que peut apporter canvas à une page web. Il s'agit d'une zone, intégrée dans une page, qui servira à la manipulation de contenu multimedia. Canvas va au-delà de la simple image en permettant l'ajout d'interaction ou d'animation. Canvas est donc alors vu comme un remplaçant de Flash, au même titre que le SVG, autre recommandation du W3C. On arrive alors à un système complet où tout peut à présente être géré directement par le navigateur, sans plugin ou autres outils abscons, lourds et pas toujours compatibles.

Il ne faut pourtant pas se leurrer. L'utilisation de canvas, comme celle du SVG, reste cependant compliquée. La facilité du HTML a fait oublié que les fonctionnalités de canvas sont accessibles via une API qui n'est pas à rapprocher de HTML, mais de javascript, ce qui complexifie un peu la tâche. Cependant, pour les anciens développeurs Flash, ils verront qu'actionScript est très proche de Javascript et s'en est beaucoup inspiré. Il ne manque alors plus qu'à Canvas ou SVG des interfaces graphiques d'édition ou des frameworks, selon votre tendance. mais ceux-ci commencent à voir le jour.

Les choses s'annoncent donc être plus faciles sur le long terme, même pour les dessinateurs. Mais pour l'instant, chacun connaître les bases de programmation qui permettront de dessiner avec Canvas. Si vous n'avez aucune notion de programmation, vous pourrez accéder à la majeure partie de ce manuel qui traite essentiellement des points un à un de canvas. Votre difficulté sera cependant de les cumuler pour les intégrer dans des projets de plus grande envergure. Nous ne pouvons que vous conseiller de faire un petit tour du côté de SVG et de Javascript pour avoir de bonnes bases sur l'environnement et le contexte d'utilisation de canvas et ainsi profiter au maximum de ces pages.