Le site de Patrick Darcheville

L'API Canvas

tuto Canvas

Animer avec Canvas

Canvas pour les nuls

Dessiner avec Canvas

Dessins et animations avec Canvas

Ci-dessus une animation réalisée avec l'API Canvas. Vous constatez qu'il s'agit d'un dessin animé et que la taille du canevas s'adapte à celle de l'écran.
On peut faire du "responsive web design" avec Canvas !!!

Dessiner avec Canvas c'est écrire un peu de HTML dans la page (définir le canevas : dimensions et identifiant) mais surtout écrire un script. En effet remplir de formes géométriques la boite (NO) vide (créée par le HTML) c'est l'affaire du JavaScript et plus précisément des méthodes et propriétés de l'objet Canvas.

Attention une image produite par Canvas perd de la qualité lorsqu'elle est étirée puisqu'il s'agit d'une image matricielle et non pas d'une image vectorielle mais vous verrez que le rendu peut être tout à fait correct à condition de prendre quelques précautions ...
La bibliothèque Canvas est désormais implémentée par tous les navigateurs récents.

Attention pour aborder ce tuto sur Canvas avec profit vous devez connaitre(NO) les bases du JavaScript : variables, conditions, boucles, fonctions, etc.
Vous devez aussi être capable de manipuler le DOM en JavaScript ; une balise Canvas est un élément du DOM HTML ! Par contre les formes dessinées dans le canevas ne sont pas des noeuds du DOM ...

Inconvénient de l'API Canvas : pour que le dessin s'affiche il faut bien sûr que JavaScript soit activé par le navigateur. Or sur les terminaux des entreprises et pour des raisons de sécurité, JavaScript est parfois bloqué.
Donc je vous conseille donc d'utiliser la balise NOSCRIPT (voir le tuto de JavaScript & jQuery).

Actualité : en 2018 l'API Canvas s'est notablement améliorée ! Désormais avec le constructeur d'objets graphiques la programmation est grandement simplifiée. Ainsi pour dessiner une même forme N fois il suffit de définir une forme telle une instance de l'objet Path2D() puis d'appeler cette instance N fois (avec éventuellement une translation préalable).
De plus dans le cadre de la définition d'un objet graphique avec le constructeur Path2D() on peut utiliser la syntaxe SVG pour les chemins ! Il y a donc une convergence intéressante des deux technologies.

Ci-dessous une belle balustrade dessinée avec avec l'API Canvas :

Le code HTML correspondant c'est une ligne et quant au script : 8 lignes. Voir ci-dessous ce script :

var canevas2= document.querySelectorAll('canvas')[1]; var contexte2 = canevas2.getContext('2d'); var colonne = new Path2D("M 0,20 h120 v30 h-20 c-30,60 50,140 0,200 h20 v40 h-120 v-40 h20 c-50,-60 30,-140 0,-200 h-20 v-30 z"); contexte2.fillStyle ="gray"; contexte2.fill(colonne); for (i=1; i<=6; i++) { contexte2.translate(120,0) ; // déplacement colonne suivante contexte2.fill(colonne); } // fin for

Vous n'y comprenez rien. Lisez donc les pages du tuto !

Différents chapitres du tutoriel