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%;" >
Bien sûr à la place de l'attribut style on peut utiliser l'attribut class ou définir une règle de style pour les éléments CANVAS : 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.

Les attributs width & height sont facultatifs ; le répère cartésien fait alors 300 par 150.

Ci-dessous deux canevas 'responsives'

Leur largeur est toujours égale à 80% de la largeur de BODY.

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 à ces deux canevas

Code CSS & HTML

La règle de style canvas {width : 80% ; } précise la largeur d'affichage du canevas dans la page : 80% de la largeur du conteneur parent (ici le conteneur parent est BODY).
Les attributs width & height définissent le repère cartésien du canevas ; les dimensions et coordonnées des formes sont déterminées conformément à ce repère cartésien.
Et si ces attributs sont absents (comme pour le deuxième canvas) le répère cartésien fait alors par défaut 300 par 150.

Les scripts correspondants

Dans chaque canevas je dessine une courbe quadratique.

// pour dessiner dans le premier canevas
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(); 

// pour dessiner dans le deuxième canevas
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.

Troisième courbe : amélioration de la seconde

La deuxième courbe ressemblait plus à une suite de segments qu'à une courbe. C'est tout simplement parce que le nombre de pixels est insuffisant du fait d'un repère cartésien médiocre (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 (300 par 150).