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 et height de la balise CANVAS puis de rédéfinir les dimensions d'affichage du canevas via le CSS.

Ci-dessous deux canevas dont les dimensions sont redéfinies par le CSS dans le cadre du responsive web design.

D'après les instructions ALERT du script la taille du premier canevas est 600px par 400 et la taille du deuxième canevas est 300px par 150 or les largeurs de ces mêmes canevas sont exprimées en % de celle du conteneur via le CSS.

Le code de cette page (extraits)

<style> #canevas1{width : 80% ; height : auto; } #canevas2 {width : 60% ; height : auto; } </style> ... <body> ... <canvas id ="canevas1" width ="600" height ="400"></canvas> <canvas id ="canevas2" ></canvas> ... <script> canevas1 = document.querySelector('#canevas1'); contexte1 = canevas1.getContext('2d'); var X1=canevas1.width; var Y1=canevas1.height; alert("dimensions premier canevas : "+ X1 + " " + Y1 + " "+ typeof(X1) +" " + typeof(Y1) ); // courbe quadratique dans le premier canevas contexte1.beginPath(); contexte1.moveTo(0,200) ; contexte1.quadraticCurveTo(300,400,600,200); contexte1.stroke(); canevas2 = document.querySelector('#canevas2'); contexte2 = canevas2.getContext('2d'); var X2 =canevas2.width; var Y2 =canevas2.height; alert("dimensions deuxième canevas : "+ X2 + " " + Y2 + " "+ typeof(X2) +" " + typeof(Y2) ); // courbe quadratique dans le deuxième canevas contexte2.beginPath(); contexte2.moveTo(0,75) ; contexte2.quadraticCurveTo(150,150,300,75); contexte2.stroke();

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.

Dans le cadre du responsive web design les dimensions des deux canevas peuvent être redéfinies par le CSS : largeur en % de celle du conteneur.

Mais attention les propriétés JS width et height retournent toujours les valeurs définies par ces mêmes attributs de la balise CANVAS.
Donc pour le script les dimensions du canevas sont celles définies dans la balise CANVAS ou par défaut 300 par 150.
D'une certaine façon on retrouve la notion de viewBOX du langage SVG :

Dans chacun des canevas je dessine une courbe quadratique.
Donc dans le premier canevas j'ai calculé les paramètres de la courbe en fonction de 600 et 400 et dans le deuxième en fonction de 300 et 150.

J'aurais pu exprimer les paramètres des courbes en fonction de X1 et Y1 pour la première et de X2 et Y2 pour la seconde ...
Retour menu