Le site de Patrick Darcheville

L'API Canvas

Dessiner dans une page avec Canvas

Créer des images avec Canvas

Canvas pour les nuls

Ci-dessus une animation réalisée avec l'API Canvas.

Orthographe : guide de survie

Par un ancien cancre en orthographe : l'auteur du site.

Si vous voulez dessiner dans une page web vous avez deux solutions : utiliser le langage SVG ou une nouvelle API JavaScript introduite par HTML5 et qui s'intitule 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.

On peut reprocher à l'API Canvas de ne proposer que des fonctions bas niveau. Par exemple il faut plusieurs instructions pour dessiner et colorier un triangle. Cependant des frameworks Canvas tels paper.js ou fabric.js commencent à apparaître. En proposant des fonctions haut niveau ils devraient simplifier le travail du développeur ...
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).

Gros inconvénient de l'API Canvas : les formes ne sont pas des éléments du DOM (à la différence des objets SVG). Donc dans le cadre d'une animation il faut redessiner toutes les formes à chaque étape. Mais rien n'interdit de superposer plusieurs canevas (tels des calques) et de regrouper toutes les formes animées dans un même canevas et les formes inanimées dans un autre.

Les valeurs des attributs width et height de la balise CANVAS ne peuvent être que des pixels (unité de mesure d'ailleurs omise car implicite). Ainsi on ne peut pas écrire : < canvas width ="80%" ...
Donc dans le cadre d'une page adaptative il faut mieux exprimer la largeur du canevas via le CSS ; la propriété width admet, quant à elle, les pourcentages.

Autre inconvénient de l'API Canvas : pour que le dessin s'affiche il faut bien sûr que JavaScript soit activé par le navigateur.

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.