Canvas dans HTML 5

La surface graphique de HTML 5 est un outil universel pour créer des applications, pour mobiles ou le bureau.

Canvas est déjà utilisé pour réaliser des jeux et constitue donc une alternative à Flash, comme il sert pour des applications plus sérieuses telles la cartographie, les figures géométriques, les plans d'architecte, etc...

Une des principales tendance chez les webmasters actuellement est de porter les anciens logiciels sur ce nouveau support. On voit donc Sim City, Wolfenstein 3D, apparaître sur des pages Web.

Tutoriel

Des premiers pas aux tracés complexes.

Combien de balises canvas dans une page Web?
Réponse par l'exemple: on peut en avoir 10000!
Premiers pas avec Canvas
Tracer une ligne et changer de couleur.
Tracer une courbe. Quadratique vs. Bézier.
Les méthodes rect et fillRect.
Réaliser un rectangle aux coins arrondis.
Dessiner un arc. Avec la méthode arc.
Du cercle au graphe en secteurs circulaire. On réalise un graphe en tarte en remplissant des secteurs de couleurs différentes.
Dessiner une ellipse avec la méthode arc.
La méthode arcTo. Exemple illustré pour comprendre son fonctionnement.
Du texte dans Canvas.

Applications et démos

Logo Maker
Editeur de logo en ligne. Mode d'emploi.
Générateur de diagramme circulaire
Outil en ligne pour créer un graphe en parts de tarte, en quelques clics.
Dessiner des phylactères dans Canvas
Placer une citation dans une bulle de bande dessinées.

Transparence
Comment donner un effet de transparence à une image.

Démonstrations

Applications et démos de Canvas. Colour Picker, Labyrinthe 3D, etc.
Color cycling. Liste de démos. Les vagues sont animées sur l'image à droite. Vous pouvez activer le son dans l'URL, mais je ne le recommande pas car il n'est pas stoppé à la sortie.
Effect Games. Effets spéciaux sous Canvas.
Effect Games. Effets spéciaux sous Canvas.

Tutoriels et références

2D Context. Specification W3C de Canvas 2D.
Dessiner une interface utilisateur dans Canvas. (Anglais).
Créer un logiciel de dessin dans Canvas. (Anglais).