Fonctionnement de la balise <canvas>

**sbernard** · 13/01/2017, 10h07

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

index.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 14/01/2017, 17h52

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 &lt;canvas&gt; 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

**sbernard** · 14/01/2017, 20h42

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.

**NoSmoking** · 14/01/2017, 22h58

C'était bien clair ...

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

On pourrait également faire une analogie avec la balise <img> qui serait le <canvas> et la scr qui serait le « contexte ».

**sbernard** · 17/01/2017, 18h44

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

a+
Stéphane.

**NoSmoking** · 28/01/2017, 13h57

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

Fonctionnement de la balise <canvas> [HTML 5]

HTML

Discussions similaires

Partager

Partager