Accueil
Mes tutoriels sur la programmation

Tutoriel Canvas - sommaire


Vous pouvez me contacter via Facebook (questions, critiques constructives) : page facebook relative à mon site

Canvas et le 'responsive design'

Jusqu'à présent nos zones de dessin Canvas ne sont pas 'responsives' ; 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 rogné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 alors comment vont alors être calculées les dimensions et coordonnées des formes ???

Ci-dessous deux canevas 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.

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 désormais l'attribut STYLE avec les propriétés "width" & "height".

Notez la présence des attributs width et height pour le premier canevas 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 (donc largeur du canevas = 80% ou 60% du conteneur).
Quant aux dimensions et coordonnées des formes, elles sont déterminées grâce aux valeurs des attributs "width & height" du canevas. Et si ces attributs sont absents (comme pour le deuxième canevas) le script considère qu'il fait 300 pixels par 150.

Le script correspondant (extrait)

	// 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
	...
	
	// 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
	...
	

Je ne vous communique pas le code correspondant au dessin des courbes de Bézier 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 (c'est à dire les dimensions par défaut d'un élément CANVAS).

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).
Il faut éviter dans une balise Canvas des attributs "width" & "height" qui ont une faible valeur !

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

Cette fois-ci la courbe ressemble à une courbe et non pas à une suite de segments.
Les attributs width & height de la balise CANVAS sont : 1000 & 500 (au lieu de 300 & 150).
Le script pour remplir ce troisième canevas est identique à celui pour remplir le deuxième sauf bien sûr les variables objet.

	// code pour remplir troisième canevas
	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(); 
	

Retenons : 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 (plutôt 1000 par 500 que 100 par 50).