Tutoriel Canvas - sommaire

À propos de l'API Canvas

Ci-dessous une animation réalisée avec Canvas.
Le code se résume à une instruction HTML pour dessiner une zone de dessin vierge dans la page et un script utilisant les méthodes de l'API Canvas.

Intérêt de Canvas

Canvas désigne une balise HTML de la spécification HTML5 mais aussi une bibliothèque de fonctions JavaScript de haut niveau.
L'emploi de ces fonctions dans un script permet de dessiner (dessins statiques ou animés) dans la page web.
L'API Canvas faisant partie de la spécification HTML5, elle est implémentée par tous les navigateurs récents.

Donc si vous voulez dessiner dans une page Web vous avez deux solutions :
• utiliser le langage SVG (le code SVG peut désormais être contenu dans la page web - à l'intérieur de la nouvelle balise double SVG)
• opter pour une nouvelle API JavaScript introduite par la norme HTML5 et qui s'intitule Canvas.

Dessiner dans la page avec Canvas c'est écrire un peu de HTML et de CSS (définir le canevas : dimensions et stylage de la zone de dessin).
Mais c'est surtout écrire un script. En effet remplir de formes géométriques la zone de dessin vide 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 mais vous verrez que le rendu peut être tout à fait correct à condition de prendre quelques précautions ...

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, pour des raisons de sécurité, JavaScript est parfois bloqué. Donc je vous conseille d'utiliser la balise NOSCRIPT (voir le tuto de "JavaScript & jQuery") pour avertir éventuellement le visiteur qu'un script est bloqué.

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

Pour aborder ce tuto sur Canvas, vous devez avoir de bonnes bases en JavaScript.
Il existe dans ce site un tutoriel sur ce langage : JavaScript & jQuery

Le code HTML correspondant c'est une instruction et quant au script il fait : 8 lignes seulement ... 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 ne comprenez rien au code ci-dessus ; la visite de mon tuto s'impose donc !