Tutoriel Canvas - sommaire

Canvas & SVG

Comme vous savez il y a désormais (depuis HTML 5) deux façons de dessiner directement dans une page web:
• créer un canvas (accompagné d'un script pour le remplir)
• utiliser du SVG inline c'est à dire du code SVG écrit dans la page web (entre la balise SVG début et SVG fin).

Ces deux outils ont chacun leurs avantages et leurs inconvénients. C'est pour cette raison que ces deux technologies sont recommandées par le W3C. Comparons maintenant les deux API !

Comparaison entre Canvas & SVG

Différences

La première différence entre ces deux technologies tient aux types de données manipulées. SVG est un format vectoriel tandis que Canvas est un format matriciel (bitmap). On a donc d’un côté, des formes définies à l’aide de points et de courbes, et de l’autre un "bouillon" de pixels anonymes. Une image produite par SVG ne perdra pas en qualité si elle est agrandie alors qu'une image créée par Canvas et agrandie deviendra disgracieuse en particulier au niveau des courbes.

Une autre différence de fond entre ces deux technologies tient à la façon de les utiliser.
SVG est un langage qui repose sur une syntaxe XML, il est dit déclaratif. Vous dites explicitement au navigateur ce qu’il doit dessiner.
Canvas lui, repose sur une API (du JavaScript) : vous allez devoir programmer la façon dont le navigateur va devoir dessiner.
SVG reposant sur une syntaxe XML, son interprétation par un navigateur conduit à la construction d’un arbre DOM qui comprendra l’ensemble des objets constitutifs de l'image. De son côté un dessin produit par Canvas n'est pas repris dans l'arbre DOM.
Pour parler plus simple chaque objet SVG pourra être manipulé avec JavaScript (ou CSS) en tant qu'élément du DOM alors qu'un dessin Canvas ne se traduit par aucun élément nouveau dans le DOM.

Sur le plan de la rapidité, Canvas l'emportera toujours car le SVG doit faire appel au DOM, ce qui le ralentit.

Points communs

Les deux API font partie de la norme HTML 5 et sont implémentées par les navigateurs récents ; il ne faut procéder à un aucun téléchargement.

Les balises doubles canvas & svg sont des éléments HTML et peuvent donc être stylées par toutes les propriétés CSS relatives aux boites. Les canevas et les zones SVG peuvent être "responsives" mais avec des syntaxes différentes ; pour une zone canvas vous utilisez la propriété CSS width. Pour une zone SVG vous exprimez l'attribut width en pourcentage.

Les deux technologies évoluent. Chrome commence à implémenter SVG version 2 qui permettra d'animer les objets SVG via le CSS et donc de se passer du SMIL.
Quant à l'API Canvas, les innovations sont notables : méthodes roundrect(), ellipse(), le constructeur Path2D() (qui peut être argumenté avec une notation SVG du chemin), propriété filter donc la valeur reprend la syntaxe CSS des filtres.

Notez la porosité entre ces deux technologies et la place croissante du CSS pour chacune d'elles.

Une animation reposant sur CSS, Canvas & SVG

Ci-desous un document HTML dans un Iframe. Ce document contient une zone de dessin Canvas et une sone de dessin SVG.
Ces deux zones se superposent parfaitement grâce au positionnement en absolu.
Donc plutôt que de considérer ces deux technologies comme concurrentes, elles sont ici complémentaires.

Vue sur la chaine des Aravis à partir d'un balcon (d'où la balustrade) : un ciel sans nuages et un avion qui entamme son ascension.
Voyons maintenant comment j'ai réalisé cette animation. Vous allez voir que c'est en fait très simple, à la porté d'un développeur moyen.

Le code CSS et HTML du document HTML

Les deux zones de dessin doivent se superposer parfaitement d'où la règle de style pour qu'elles aient leur coin supérieur gauche au même implacement dans la page web (10%, 50px).
Les deux zones de dessin s'afficheront dans le document avec une largeur de 80% (de BODY).
Le canevas a pour arrière plan une photo avec une haute définition qui sera le décor de notre animation.
Le canevas est "responsive" ; valeur de la propriété width : 80%.

Le script pour remplir le canevas

Il faut dessiner le soleil et la balustrade. var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X =canevas.width; var Y =canevas.haight; // dessiner le soleil contexte.fillStyle ="gold"; contexte.arc(X/3, 50, X/16, 0, Math.PI*2); contexte.filter ="blur(10px)"; contexte.fill(); // dessiner la balustrade var colonne = new Path2D("M 0,250 h130 v40 h-80 v190 h-40 z"); contexte.fillStyle ="brown"; contexte.filter = "blur(1px) drop-shadow(0px 8px 2px gray)"; for (i=0; i<=7; i++) { contexte.fill(colonne); contexte.translate(120,0) ; // déplacement colonne suivante } // fin for

Notez l'emploi d'un filtre avec la syntaxe CSS3.
Emploi du constructeur Path2D pour définir un modèle d'objet qui sera dupliqué 8 fois. Chemin exprimé en relatif.

Le code SVG inline

Il faut dessiner l'avion qui se déplace selon une trajectoire. <svg width ="80%" viewBox ="0 0 600 400" style ="border :none;" > <symbol id ="jet" viewBox ="0 0 100 100"> <polygon points = "0,0 0,30 30,30 20,50 50,30 80,30 90,25 80,20 50,20 30,0 30,20 10,20 0,5" fill ='gray' > </symbol> <path id ="chemin" d="M -100,150 L 600,50" fill="none" /> <use xlink:href ="#jet" width ="40" height ="40" x="0" y ="50" > <animateMotion begin="0s" dur="12s" repeatCount="indefinite"> <mpath xlink:href ="#chemin" /> </animateMotion> </use> </svg>

La zone de dessin SVG est "responsive" : width ="80%".
On définit (sans dessiner) un modèle d'objet avec le conteneur symbol qu'on identifie "jet".
On définit une trajectoire avec la balise path.
On clone ce modèle mais avec réduction de moitié, on le dessine et on le fait déplacer le long de cette trajectoire.

J'ai utilisé la balise animateMotion pour déplacer l'avion le long d'un chemin.
Pour comprendre ce code : SVG - déplacer un objet le long d'un chemin