Canvas et le "responsive web design"

Jusqu'à présent nos zones de dessin Canvas ne sont pas adaptatives ; quelque soit la taille de l'écran les dimensions sont les mêmes car exprimées en pixels.
Sur un petit écran comme celui d'un smartphone c'est gênant ... Le système va dézoomer la page pour afficher tout le canevas et alors le texte autour devient minuscule.
Donc vous devez zoomer pour lire le texte et c'est alors la zone de dessin qui est tronquée !

Pour obtenir une image adaptative il suffit d'exprimer sa largeur en % du conteneur sous forme de la propriété CSS width. Pour une zone de dessin CANVAS c'est la même solution !
Mais comment vont alors être calculées les dimensions et coordonnées des formes ???

Ci-dessous deux canevas adaptatifs.

Affichez la console JS pour cette page !

Réduisez la largeur de la fenêtre et observez ...
La taille du canevas s'adapte à la largeur de la fenêtre.

Le code correspondant aux deux premiers canevas

Code HTML

<canvas id ="canevas1" width ="600" height ="400" style ="width :80% ; height : auto ;"></canvas> <canvas id ="canevas2" style ="width :60% ; height : auto ;"></canvas>

Pour les deux balises CANVAS il existe l'attribut STYLE avec les propriétés width & height.

Notez la présence des attributs width et height pour la première balise CANVAS mais l'absence de ces mêmes attributs pour la deuxième balise CANVAS.

Les canevas vont s'afficher dans la page conformément aux propriétés de style (largeur du canevas = 80% ou 60% du conteneur).
Les dimensions et coordonnées des formes sont établies grâce aux valeurs des attributs width & height du canevas.
Si ces attributs sont absents (comme pour le deuxième canevas) le canevas fait par défaut 300 pixels par 150.

Le script correspondant

	// code pour remplir premier canevas
	canevas1 = document.querySelector('#canevas1'); 
	contexte1 = canevas1.getContext('2d');
	var X1 =canevas1.width;
	var Y1 =canevas1.height;
	console.log(X1 + " " +typeof(X1));
	console.log(Y1 + " " +typeof(Y1));
	// courbe quadratique dans le premier canevas
	contexte1.beginPath();
	contexte1.moveTo(0,Y1/2) ; 
	contexte1.quadraticCurveTo(X1/2,Y1-50,X1,Y1/2); 
	contexte1.stroke(); 
	
	// code pour remplir deuxième canevas
	canevas2 = document.querySelector('#canevas2'); 
	contexte2 = canevas2.getContext('2d');
	var X2 =canevas2.width;
	var Y2 =canevas2.height;
	console.log(X2 + " " +typeof(X2));
	console.log(Y2 + " " +typeof(Y2));
	// courbe quadratique dans le deuxième canevas
	contexte2.beginPath();
	contexte2.moveTo(0,Y2/2) ; 
	contexte2.quadraticCurveTo(X2/2,Y2+50,X2,Y2/2); 
	contexte2.stroke(); 
	

Pour le 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 contient 600 et Y1 400.
Et X2 récupère 300 et Y2 150 c'est à dire les valeurs par défaut.
D'une certaine façon on retrouve la notion de viewBOX du langage SVG c'est à dire un système de coordonnées indépendant de la taille d'affichage du canevas mais qui permet de calculer la position et taille de chaque forme dans celui-ci.

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 la seconde que dans la première ; un dessin produit par l'API Canvas est un dessin matriciel (et non pas vectoriel comme avec SVG).
Donc il faut éviter pour une balise Canvas des attributs width & height qui ont une faible valeur !!!

Ci-dessous je rajoute un troisième canevas à la page.
Le script est strictement le même que le deuxième (sauf bien sûr les variables objet).
Mais surtout dans la balise HTML les attributs width & height sont : 1000 & 500 (au lieu de 300 & 150).

Donc pour résumer et afin 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 (plutôt 1000 par 500 que 100 par 50).
L'affichage du canevas dans la page étant réglé par le CSS : propriétés de style width & height.

Cette fois-ci la courbe ressemble à une courbe.
Retour menu