Tutoriel Canvas - sommaire

Canevas "responsives"

Je l'avoue, je vous 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 (pas rogné). Pourtant pour un écran de mobile il n'y a pas 600 pixels disponibles en largeur mais moins de 400 !
En fait les canevas préséentés étaient déjà "responsives", le véritable code de l'instruction canvas était un peu différent de celui annoncé.

Pour obtenir un canevas 'responsive' il suffit d'appliquer à l'élément HTML canvas les propriétés CSS "width & height".
Donc le terme "width" apparait deux fois : en tant qu'attribut et en tant que propriété CSS. Même remarque pour le terme "height".
La zone de dessin s'affiche dans la page web conformément aux valeurs des propriétés width & height. Quant aux valeurs des attributs width & height, ils précisent le repère cartésien utilisé pour positionner et dimensionner les formes.
Donc la syntaxe que j'utilise est en fait :
<canvas width ="600" height ="400" style ="width :80% ; height : auto ;" >
Vous verrez d'ailleurs dans le paragraphe suivant que les attributs "width & height" sont faculatifs alors que les propriétés "width & height" sont obligatoires mais peuvent être passées bien sûr via un règle de style.

Ci-dessous deux canevas désormais 'responsives'

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.