Tutoriel Canvas - sommaire

Des canevas "responsives"

Pour cette page, affichez la console !

Il ne faut pas que sur un petit écran (smartphone) un canevas soit rognée et que sur un grand écran il apparait tout petit..

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 ...
En fait le véritable code de l'instruction HTML était un peu différent ...

La bonne syntaxe

Le code HTML ressemblait à :
<canvas width ="600" height ="400" style ="width :80%; height : auto; " >

Le canevas s'affiche donc dans la page web conformément à la valeur de la propriété CSS width de la balise CANVAS. Donc sa largeur d'affichage est égale à 80% de celle de l'élément parent (BODY le plus souvent). Quant à sa hauteur elle respecte le ratio définit par les attributs width & height.
Concernant justement ces attributs width & height, ils sont utilisés pour définir le repère cartésien. Les formes se positionnent et se dimensionnent en fonction de ce repère et de leurs paramètres géométriques

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

Un exemple par l'absurde

Le coin haut gauche du rectangle est en dehors du repère. Donc la 'toile' est vide.

Deux canevas 'responsives'

Le rendu

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 d'affichage de la 'toile' les dimensions officielles sont toujours :
• 600 par 400 pour le premier canevas
• 300 par 150 pour le deuxième canevas

La deuxième courbe est "très moche" ; ça ressemble plus à une suite de traits qu'à une courbe.
Par ailleurs le trait est trop épais.

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).
Or pour le deuxième canevas les attributs width & height sont absents ; donc par défaut le repère cartésien fait 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 à cause du repère cartésien par défaut : 300 par 150.

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.