Tutoriel Canvas - sommaire

API Canvas pour dessiner dans la page web - introduction

La librairie Canvas faisant partie de la spécification HTML5, est implémentée par tous les navigateurs récents.
En utilisant les fonctions haut de niveau de cette librairie, on peut dessiner dans une page web via un script de quelques lignes.
Il peut s'agir de dessins statiques ou animés voire de jeux graphiques.
L'API Canvas évolue en proposant de nouvelles méthodes.

Quelques exemples d'innovations :
• pouvoir créer un modèle de chemin et le dupliquer n fois
• faculté de filtrer les objets du canevas avec la même syntaxe qu'en CSS
• possibilité d'utiliser la syntaxe SVG pour créer des chemins

Pour résumer on peut "faire plus avec moins de lignes de code".

Pour aborder ce tutoriel vous devez avoir de bonnes connaissances en JavaScript : les variables, les opérateur, les tests, les boucles, les fonctions, les minuteurs, gestion des évènements, etc.
Le script qui dessine dans la "toile" peut être "orienté objet". Vous rencontrerez dans ce tuto de nombreux scripts orientés objet. Pour créer des objets graphiques j'utiliser la notation JSON. La POO est particulièrement intéressante en matière d'animation ; pour redessiner un objet graphique il suffit d'appeler la méthode qui le dessine.

Vous trouverez dans mon site un tutoriel JavaScript complet :
Mon tuto JS
Vous devez aussi connaitre la notation SVG des chemins (en absolu et en relatif) :
la balise PATH de SVG - notation en absolu et en relatif d'un chemin

Ci-dessous deux zones de dessin Canvas ('toile' en français)

Je ne vous communique pas les codes correspondants car c'est prématuré ...
Quand vous aurez lu toutes les pages de ce tutoriel, vous serez capable de produire les scripts correspondants.

Une animation Canvas

D'emblée je précise que l'élément CANVAS est une balise HTML de type block. Donc on peut la styler avec les propriétés CSS telles background, border, box-shadow, etc.
Pour réaliser une animation Canvas il faut créer une fonction et l'appeler régulièrement via un "timer".

Une belle balustrade

Il s'agit d'un modèle dupliqué N fois. Ce modèle est un chemin écrit avec la notation SVG.

Présentation de l'API Canvas

Un choix cornélien

Si vous voulez dessiner dans une page Web vous avez le choix entre deux technologies :
• utiliser le langage SVG (le code SVG peut désormais être écrit directement dans la page web)
• opter pour l'API Canvas

Dans ce site il y a également un tuto complet sur le format SVG : dessins vectoriels avec SVG
Canvas ou SVG, que choisir ?

Principes de l'API Canvas

Dessiner dans la page avec Canvas c'est écrire un peu de HTML et de CSS pour définir une zone de dessin. Mais c'est surtout écrire un script sinon la zone de dessin reste vide ...
Pour écrire ce script vous pouvez recourir à la POO.
Attention une image produite par Canvas perd de la qualité lorsqu'elle est étirée puisqu'il s'agit d'une image matricielle. Mais vous verrez que le rendu peut être tout à fait correct à condition de prendre certaines précautions ...

La méthode getContext('2d') appliquée à un élément HTML de type CANVAS crée un objet de type 2D.
On peut ensuite appliquer à cet objet une multitude de méthodes et de propriétés pour dessiner rectangles,arcs de cercle et d'ellipse, polygones, etc.
On peut aussi insérer des images dans un canevas en précisant la taille, la position.

Inconvénients de l'API Canvas

Pour que le dessin s'affiche il faut bien sûr que JavaScript soit activé par le navigateur ce qui n'est pas toujours le cas ... Donc je vous conseille d'utiliser la balise NOSCRIPT pour avertir éventuellement le visiteur que le navigateur a bloqué l'exécution d'un script.

Attention les formes dessinées par le script dans la 'toile' ne sont jamais des éléments du DOM (à la différence des formes SVG). Il est donc impossible de les identifier en vue de les manipuler via le CSS.