Tutoriel Canvas - sommaire

Des canevas "responsives"

Il ne faut pas que sur un petit écran (smartphone) la zone de dessin soit rognée.

Pour cette page, affichez la console !

La bonne syntaxe pour l'élément Canvas

J'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 (n'était pas rogné). Pourtant pour un écran de mobile il n'y a pas jamais 600 pixels en largeur ...
Le véritable code de l'instruction canvas était un peu différent de celui annoncé.

La bonne syntaxe

En fait le code HTML pour l'élément Canvas doit ressembler à cela :
<canvas width ="600" height ="400" style ="width :80% ; height : auto ;" >
Bien sûr à la place de l'attribut style on peut utiliser l'attribut class ou définir une règle de style spécifique pour toute balise CANVAS.

Le canevas s'affiche alors dans la page web conformément aux valeurs des propriétés "width & height" de l'élément Canvas.
Quant aux attributs width & height de l'élément CANVAS ils sont utilisés pour positionner et dessiner les formes dans cette zone de dessin. Ils définissent donc un repère cartésien.

Ces attributs de balise sont d'ailleurs facultatifs ; le répère cartésien fait alors 300 par 150.

Ci-dessous deux canevas 'responsives'

Ils occuperont toujours 80% de BODY (largeur de ce dernier est fonction du terminal) grâce à une règle de style.

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 ; chaque canvas a un ID !
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 canvas) le répère cartésien fait par défaut 300 par 150.

Les fonctions JS

function fcanevas1()
{
	canevas= document.querySelector('#canevas1'); 
	contexte= canevas1.getContext('2d');
	var X = canevas.width;
	var Y = canevas.height;
	console.log(X + " " +typeof(X));
	console.log(Y + " " +typeof(Y));
	// courbe quadratique dans le premier canevas
	contexte.beginPath();
	contexte.moveTo(0,Y/2) ; 
	contexte.quadraticCurveTo(X/2,Y-50,X,Y/2); 
	contexte.stroke(); 
}	
fcanevas1(); 

function fcanevas2()
{
	canevas = document.querySelector('#canevas2'); 
	contexte = canevas.getContext('2d');
	var X = canevas.width;
	var Y = canevas.height;
	console.log(X + " " +typeof(X));
	console.log(Y + " " +typeof(Y));
	// courbe quadratique dans le deuxième canevas
	contexte.beginPath();
	contexte.moveTo(0,Y/2) ; 
	contexte.quadraticCurveTo(X/2,Y+50,X,Y/2); 
	contexte.stroke(); 
}
fcanevas2(); 

Je ne commente pas le code correspondant aux courbes quadratiques puisque lesdites courbes sont traitées dans le chapitre suivant.

Les dimensions du canevas sont définies par les attributs width & height de la balise CANVAS ou par défaut 300 par 150 si ces attributs sont absents.
Donc le repère cartésien du premier canevas est : 600 par 400
Et le repère cartésien du deuxième canevas est : 300 par 150
Dans chacun des deux canevas je dessine une courbe quadratique.

Affichez la console pour vérifier !

Troisième courbe : amélioration de la seconde

La deuxième courbe ressemble plus à une suite de segments et de plus le trait est trop épais. C'est tout simplement parce que le nombre de pixels est faible du fait du repère cartésien (300 par 150).
Voyons comment améliorer cette courbe.

Ci-dessous, je rajoute un troisième canevas à la page : version améliorée de la deuxième courbe.

Cette fois-ci la courbe ressemble vraiment à une courbe.
Le code correpondant : HTML : <canvas id ="canevas3" width ="1000" height ="500"></canvas> JS : function fcanevas3() { canevas = document.querySelector('#canevas3'); contexte = canevas.getContext('2d'); var X = canevas.width; var Y = canevas.height; console.log(X + " " +typeof(X)); console.log(Y + " " +typeof(Y)); // courbe quadratique dans le deuxième canevas contexte.beginPath(); contexte.moveTo(0,Y/2) ; contexte.quadraticCurveTo(X/2,Y+50,X,Y/2); contexte.stroke(); } fcanevas3();

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. Évitez donc les valeurs par défaut du repère cartésien d'un canevas.

La méthode quadraticCurveTo() est présentée dans le chapitre suivant.