Tutoriel Canvas - sommaire

API Canvas

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.

Une belle animation Canvas

Il est possible de réaliser des jeux vidéos via Canvas.
Pour le moment je vous propose plus simplement une animation.

Pour aborder dans de bonnes conditions l'API Canvas vous devez maitriser en JavaScript : les variables, les conditions, les opérateurs, les itérations, les fonctions (nommées et anonymes).
Pour l'animation Canvas, les fonctions natives setInterval() & clearInterval() sont très utilisées.
Suivez éventuellement le lien pour vous initier d'abord à JavaScript : mon tuto JavaScript
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

Intérêt de Canvas

Un dilemme cornélien

Si vous voulez dessiner dans une page Web vous avez deux solutions :
• 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 un tuto complet sur le langage SVG : dessins vectoriels avec SVG

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 ...
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 de type HTMLCanvasElement (une balise canvas) crée un objet de type 2D.
On peut ensuite appliquer à cet objet de type CanvasRenderingContext2D une multitude de méthodes pour dessiner rectangles,arcs de cercle et d'ellipse, polygones, etc.

Inconvénient 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 zone Canvas ne sont jamais des éléments du DOM (à la différence des objets SVG). Il est donc impossible de les identifier en vue de les manipuler via le CSS.

Une API en constante évolution

Canvas est une librairie qui s'enrichit régulièrement

L'API s'enrichit régulièrement de nouvelles méthodes qui simplifient le travail du développeur web.
Dans les chapitres qui suivent j'évoque les méthodes récentes ellipse(), filter() et le constructeur path2D().
Les animations sont désormais plus fluides avec la méthode window.requestAnimationFrame()