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

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é lorqu'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 (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 !

Ci-dessous le code JS pour dessiner cette belle balustrade classique tient en 7 lignes ! Pour les explications voir la page "le constructeur Path2D()".

Différents chapitres du tuto

Dans chaque page des extraits de code figurent dans des encadrés roses. Sur les mobiles, seules les premières lignes apparaissent. Il suffit de toucher l'encart pour le déplier.