Fonctionnement de la balise <canvas>

Version imprimable

Bonjour,

D'après ce que j'ai pu comprendre, lorsqu'on insère la balise canvas on "réserve" un espace dans lequel on peut insérer des formes et autres.
Dans l'exemple ci-dessous, dans l'espace canvas (id='pxl_canvas'), je dessine un rectangle avec l'instruction fillRect "fillRect(20,20,150,100)".
Lors de l'affichage, les contours ne sont pas nettes et pas dans les bonnes dimensions (forme qui a été grossie).
Si dans la feuille de style, j'enlève width et height, alors le contour et dimension sont ok. Et c'est là que je ne comprends pas. Pourquoi ? on réserve un espace et en quoi width et height influent-elles sur la forme ?

D'avance merci pour votre aide,
A+
Stéphane.

index.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> <link rel="stylesheet" href="index.css"> </head> <body> <canvas id='pxl_canvas'></canvas> </body> <script src="index.js"></script> </html>
index.js
Code:

1 2 3 var pxlCanvas = document.getElementById("pxl_canvas"); var pxlCtx = pxlCanvas.getContext("2d"); pxlCtx.fillRect(20,20,150,100);
index.css
Code:

1 2 3 4 5 6 7 #pxl_canvas { position: absolute; top:50px; left:50px; width: 100%; height: 100%; }

Bonjour,
je vais essayer de faire clair
Lorsque l'on utilise un élément <canvas> on intègre à la page une zone graphique pouvant être manipulée comme une « bitmap ».
Il est important de comprendre la différence entre le <canvas> qui est un élément du DOM et son « contexte » que l'on récupère via la méthode getContext() qui n'est autre qu'un objet embarqué sur lequel on va agir.

A savoir également que par défaut la zone graphique fait 300 x 150 pixel et par conséquence le <canvas> également.
L'élément déclaré comme ceci <canvas></canvas> se dimensionnera à 300x150.
Pour dimensionner cet élément, on parle du « contexte », il faut agir sur les attributs de la balise et rien d'autre.
L'élément déclaré comme ceci <canvas width="600" height="300"></canvas> se dimensionnera à 600x300, le double du précédent.

Maintenant passons au dimensionnement via le CSS.
avec le CSS suivant
Code:

1 2 3 4 canvas { width: 600px; height: 300px; }
un élément déclaré comme ceci <canvas></canvas> dans le HTML se dimensionnera à 600x300 à l'écran seulement le « contexte » lui sera dimensionné par défaut à 300 x 150, voir ci-dessus.
Bilan des courses dans cet exemple le graphique contenu dans l'élément <canvas> est zoomé, ici par 2.

Ce qu'il faut retenir, le conteneur est une fenêtre d'affichage et le contenu, en l’occurrence le « contexte », la surface de travail avec une résolution d'un certain nombre de pixel, définit via les attributs width et height.

Si l'on augmente la largeur de la fenêtre d'affichage, on ne touche pas à la résolution et inversement.
Dans ce cas on joue sur la représentativité d'un pixel écran. Pour un pixel écran combien a t-on de pixel du « contexte » ?

Je te mets un petit fichier de test à triturer pour essayé de visualiser le fonctionnement des deux DIFFERENTS éléments, canvas et contexte.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Test canvas</title> <meta name="Author" content="NoSmoking"> <style> #canvas { top:50px; left:50px; width: 500px; height: 250px; outline: 1px dotted gray; } </style> </head> <body> <p>Les valeurs par défaut d'un élément <canvas> sont 300 x 150 pixels.</p> <p><button>Déformer</button></p> <canvas id='canvas'></canvas>.. </body> <script> function paintCanvas(canvas) { var oCtxt = canvas.getContext('2d'); oCtxt.fillRect(20, 20, 150, 100); console.log(canvas.width, canvas.height); } var oCanvas = document.getElementById('canvas'); // draw paintCanvas(oCanvas); var oBtn = document.querySelector('button'); oBtn.onclick = function () { // modification des dimensions via le style oCanvas.style.width = 600 + 'px'; oCanvas.style.height = 500 + 'px'; // modification résolutions oCanvas.width = 400; oCanvas.height = 250; // redraw paintCanvas(oCanvas); }; </script> </html>
n'hésite pas à commenter certaines lignes.

Pas sûr que cela soit limpide :oops:

14/01/2017, 21h42
sbernard

Bonjour NoSmoking

Un grand merci pour ton explication et exemple. C'était bien clair et je comprend mieux maintenant.
Je passe le cas en résolu.

Encore merci et à bientôt,
Stéphane.
14/01/2017, 23h58
NoSmoking

Citation:

C'était bien clair ...

merci, c'est gentil mais à la relecture j'ai du mal :mrgreen:

On pourrait également faire une analogie avec la balise <img> qui serait le <canvas> et la scr qui serait le « contexte ».
17/01/2017, 19h44
sbernard

On peut aussi faire le parallèle avec le SVG (= canvas) et viewbox (context) ? ou c'est une bêtise que je dis..... :scarymov:

a+
Stéphane.
28/01/2017, 14h57
NoSmoking

SVG et canvas n'ont pas la même approche, vectoriel contre bitmap pour résumer, donc n'ont pas la même façon d'aborder/gérer la création/modification des données.

Daniel Rousset, aka davrous, en a fait un article : Introduction aux APIs graphiques d’HTML5: SVG & Canvas