Canvas et le responsive web design

Jusqu'à présent nos zones de dessin Canvas ne sont pas adaptives ; quelque soit la taille de l'écran les dimensions sont les mêmes !
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 est minuscule. Donc vous zoomez pour lire le texte et c'est alors la zone de dessin qui est rognée !

Pour obtenir une zone de dessin adaptative vous savez qu'avec SVG il suffit d'exprimer la largeur de la zone de dessin en % du conteneur (donc de l'écran) et de définir dans le code SVG un viewBox.

Sachez que l'équivalent du viewBox existe dans CANVAS mais le codage est un peu différent.
Il suffit de définir une taille "officielle" du canevas avec les attributs width / height de la balise CANVAS puis de rédéfinir les dimensions d'affichage du canevas via une règle de style (propriétés CSS width / height).

Ci-dessous deux canevas adaptatifs :

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 :50% ; height : auto ;"></canvas>

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.
Notez la présence pour ces deux balises d'une règle de style en ligne avec les propriétés width et height.

Les zones de dessin CANVAS vont s'afficher conformément au CSS (largeur du canevas = 80% ou 50% du conteneur parent.

Le script

	// code pour remplir premier canevas
	canevas1 = document.querySelector('#canevas1'); 
	contexte1 = canevas1.getContext('2d');
	var X1=canevas1.width;
	var Y1=canevas1.height;
	// 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;
	// 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 et height de la balise CANVAS (ou par défaut 300 par 150 si ces attributs sont absents).
Donc X1 contient 600 et Y1 contient 400
Et X2 contient 300 et Y2 contient 150 (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 de la zone de dessin mais qui permet de calculer la position et taille de chaque forme.

Dans chacun des canevas je dessine une courbe quadratique. Les paramètres de chaque courbe sont exprimés par rapport aux dimensions officielles du canevas.
La deuxième courbe est plus creusée que la première car l'ordonnée du point aimant est plus forte.
Retour menu