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 rognée !

Pour obtenir une image adaptative il suffit d'exprimer sa largeur en % du conteneur sous forme d'une propriété de style. Pour une zone de dessin CANVAS c'est la même solution !

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 de cette page (extraits)

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 et l'absence de ces mêmes attributs pour la deuxième balise CANVAS.

Les canevas vont s'afficher conformément au style (largeur du canevas = 80% ou 60% du conteneur).
Mais la taille et le positionnement de chaque forme dans son canevas sont calculés en fonction des valeurs des attributs width & height de celui-ci et si ces attributs sont absents (comme pour le deuxième canevas) le canevas fait par défaut 300 par 150.

Le script

	// 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 les propriétés de style width & height (dans l'attribut STYLE).

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