Tutoriel Canvas - sommaire

API Canvas pour dessiner dans la page web - introduction

On peut traduire canvas par 'toile' ou 'canevas'.
En utilisant les fonctions haut de niveau de cette librairie, on peut dessiner dans une page web via un script JS de quelques lignes.
Il peut s'agir de dessins statiques ou animés voire de jeux graphiques.
À la différence d'un framework JS, vous n'avez rien à installer sur votre PC pour utiliser cette API car Canvas fait partie de la spécification HTML5 et est donc implémentée d'office par les navigateurs récents.

Pour aborder ce tutoriel vous devez avoir de bonnes connaissances en JavaScript en particulier les boucles, les fonctions et les timers.

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 des animations et des jeux réalisés avec l'API Canvas

Il s'agit à chaque fois d'insertions de documents HTML ; chaque document contenant un canevas et un script.

Une animation déclenchée par l'internaute

Une horloge digitale

Le jeu de squash

Cliquez dans le canevas pour lancer le jeu.
Utilisez les touches de direction "<" et ">" pour déplacer la raquette afin que la balle rebondisse.

Dans la deuxième partie de ce tuto (animations et jeux avec Canvas) vous trouverez toutes les explications concernant les animations et jeu présentés ci-dessus.

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 format SVG (le code SVG peut désormais être écrit directement dans la page web)
• opter pour l'API Canvas

Dans mon site vous trouverez un tuto complet sur le format SVG : dessins vectoriels avec SVG

En lien ci-dessous un article sur les avantages et inconvénients de chaque technologie.
Canvas ou SVG, que choisir ?

Principes de l'API Canvas

Dessiner dans la page avec la technologie Canvas c'est écrire un peu de HTML et de CSS (HTML : pour créer une zone de dessin ; CSS pour styliser cette 'toile'). Mais c'est surtout écrire un script pour remplir ce 'canevas'.
Attention une image produite par l'API Canvas perd de la qualité lorsqu'elle est étirée puisqu'il s'agit d'une image matricielle. Mais vous verrez que la qualité de l'image peut être tout à fait correcte à condition de prendre certaines précautions ...

Limites 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 il est conseillé d'utiliser la balise NOSCRIPT pour avertir le visiteur qu'un script ne s'éxécute pas.

Les formes dessinées par le script Canvas ne sont pas des éléments du DOM (à la différence des formes SVG). Il est donc impossible de les identifier en vue de les styliser via le CSS.

Une API qui évolue

L'API Canvas s'enrichit régulièrement de nouvelles méthodes et propriétés. On peut dire qu'elle "bonifie en vieillissant".
Ainsi les méthodes ellipse() & roundRect() sont récentes.
Il y a peu les navigateurs ont implémenté le constructeur path2D() qui permet de simplifier sensiblement les scripts. En effet cette fonction peut être argumentée avec un chemin selon la notation SVG.
Le filtrage a longtemps été un des points faibles de Canvas ; désormais la propriété filter peut avoir comme valeur un filtre selon la syntaxe CSS.
Concernant les transformations, la méthode récente setTransform() permet aussi de rendre plus concis les scripts.