Tutoriel Canvas - sommaire

Des canevas "responsives"

Il ne faut pas que sur un petit écran (smartphone) le canevas soit rogné.

La bonne syntaxe pour l'élément Canvas

J'ai menti !

Pour certains canevas présentés dans les chapitres précédents, je vous indiquais que l'instructions HTML était, par exemple :
< canvas width ="600" height ="400" ... >
Or même sur un écran de smartphone (en mode portrait) le canevas s'affichait correctement (n'était pas rogné). Pourtant pour un écran de mobile il n'y a pas jamais 600 pixels en largeur ...
Le véritable code de l'instruction canvas était un peu différent de celui annoncé.

La bonne syntaxe

En fait le code HTML pour l'élément Canvas doit ressembler à cela :
<canvas width ="600" height ="400" style ="width :80% ; height : auto ;" >
Bien sûr à la place de l'attribut style on peut utiliser l'attribut class ou encore créer une règle de style pour les balises Canvas.

Le canevas s'affiche dans la page web conformément aux valeurs des propriétés "width & height" de l'élément Canvas.
Quant aux attributs "width & height" de la balise Canvas ils sont utilisés pour positionner et dessiner les formes.
Ces attributs sont d'ailleurs facultatifs ; le répère cartésien fait alors 300 par 150.

Ci-dessous deux canevas 'responsives'

Ils occuperont toujours 80% de BODY (largeur de ce dernier est fonction du terminal).
Voir encadré ci-dessous.

Affichez la console JS pour cette page !

Réduisez la largeur de la fenêtre et observez ...
Les canevas s'adaptent à la largeur de la fenêtre.

La console vous informe que quelque soit la largeur de la fenêtre les dimensions officielles des canevas sont :
• 600 par 400 pour le premier
• 300 par 150 pour le deuxième

Le code correspondant aux deux premiers canevas

Code CSS & HTML

Notez que le code HTML est très succinct.
Le texte alternatif entre la balise début et fin est désormais inutile ; tous les navigateurs ont désormais implémenté l'API Canvas.
Pour les deux balises CANVAS les propriétés CSS "width & height" sont appliquées via une règle de style.
Quant aux dimensions et coordonnées des formes, elles sont déterminées grâce aux valeurs des attributs "width & height".
Et si ces attributs sont absents (comme pour le deuxième canevas) le répère cartésien fait par défaut 300 par 150.

Le script correspondant (extrait)

Je ne vous communique pas le code correspondant au dessin des courbes quadratiques puisque lesdites courbes sont traitées dans le chapitre suivant.

Pour le premier script les dimensions du canevas sont celles définies par les attributs width & height de la balise CANVAS ou par défaut 300 par 150 si ces attributs sont absents.
Donc X1 vaut 600 et Y1 vaut 400.
Et X2 vaut 300 et Y2 vaut 150.

Dans chacun des deux canevas je dessine une courbe quadratique. La deuxième courbe est plus creusée que la première car l'ordonnée du point aimant est plus forte.

Amélioration de la deuxième courbe quadratique

La deuxième courbe quadratique est beaucoup moins jolie que la première ; la courbe ressemble plus à une suite de segments ...
C'est tout simplement parce qu'il y a beaucoup moins de pixels dans le second canevas que dans le premier.

Ci-dessous, je rajoute un troisième canevas à la page.

Cette fois-ci la courbe ressemble vraiment à une courbe.
Le code correpondant : HTML : <canvas id ="canevas3" width ="1000" height ="500"></canvas> SCRIPT (complet) : canevas3 = document.querySelector('#canevas3'); contexte3 = canevas3.getContext('2d'); var X3 = canevas3.width; var Y3 = canevas3.height; console.log(X3 + " " +typeof(X3)); console.log(Y3 + " " +typeof(Y3)); // courbe quadratique dans le deuxième canevas contexte3.beginPath(); contexte3.moveTo(0,Y3/2) ; contexte3.quadraticCurveTo(X3/2,Y3+50,X3,Y3/2); contexte3.stroke();

Les attributs width & height de ce troisième canevas sont 1000 par 500 (au lieu de 300 & 150 pour le deuxième).
Pour que les courbes, cercles et arcs de cercle dans les canevas soient esthétiques il faut que les valeurs des attributs "width" & "height" de la balise CANVAS soient significatives.
La méthode quadraticCurveTo() est présentée dans le chapitre suivant.