Le site de Patrick Darcheville

L'API Canvas

Dessiner avec Canvas dans une page web

Canvas : alternative à Flash

Canvas pour les nuls

Canvas : une API Javascript graphique

Animations avec Canvas

Ci-dessus une animation réalisée avec l'API Canvas.
Vous pouvez constater que la taille du canevas s'adapte à celle de l'écran. On peut faire du "responsive web design" avec 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 (comme les images au format SVG) !
Cependant Canvas présente actuellement un avantage par rapport à SVG ; cette API est implémentée dans tous les navigateurs récents alors que SVG ne l'est encore que partiellement chez certains (Internet Explorer par exemple).

Pour information la dernière version de Adobe Flash (Flash Professional CC) génère du HTML5 et du JavaScript Canvas. Donc le format SWF (qui n'était pas supporté par IOS et Android) est abandonné par la société Adobe au profit des formats standards du Web.

Par ailleurs vous n'êtes pas obligé de taper le script Canvas via un éditeur de textes. Vous pouvez en effet demander à certains logiciels dotés d'une interface graphique de générer du HTML5 & JavaScript-Canvas. Je pense en particulier au logiciel Inkscape dans sa dernière version.

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é, l'exécution des scripts n'est pas toujours autorisée ...

En ce début 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 Canvas :

Huit lignes de code indiquées ci-dessous :

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

Si vous n'y comprenez rien lisez les pages de ce tuto !

Différents chapitres du tutoriel