• 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

Insertion de canvas dans une page web

Canvas est une simple balise html5 proposée à l'origine par Apple. Elle fonctionnera donc comme n'importe quel élément html.

 <canvas></canvas>

En général, on pourra lui ajouter un identifiant de manière à y accéder plus facilement en javascript. Car c'est en javascript que 99,9% du travail du canvas va se faire. D'une certaine façon, il est un peu abusif de parler de canvas comme d'une possibilité html5. Mais c'est le cas pour de nombreux autres apports du html5 qui ont des API officielles. Cela ne doit pas masquer qu'il faudra de vraies connaissance en programmation javascript pour arriver à un résultat. Nous vous invitons à lire notre initiation sur le sujet.

Il sera aussi parfois utile d'y ajouter des dimensions même si celles-ci peuvent être déterminée dans le script. Cela nous donnerait donc

 <canvas id="dessin" width="300" height="200"></canvas>

Il n'y aura aucune balise à insérer dans la balise canvas elle-même. Remarquez cependant qu'elle n'est pas de forme atomique mais contient bien un élément de fermeture pour assurer le support sur certains navigateurs.

En soit, cela n'affiche rien. Si vous avez quelques textes avant et après, vous remarquerez l'espace "vide" qui correspond à la dimension de notre zone canvas.

Il peut être utile de le mettre en évidence, même temporairement avec du css :

#dessin {
   border:thin solid black;
}