Dessin de forme et utilisation d'image dans un canvas

**Oswalde** · 13/06/2025, 18h41

Bonjour à tous,

Je débute dans l’utilisation des canvas et j’ai rencontré un problème qui m’a amené à me poser des questions.

Je souhaite insérer dans un canvas un tracé (fillRect() ) et une image (drawImage()).
L’image est extraite d’une image source (PJ)qui contient plusieurs sous-images (chaque sous-image à une dimension de 400 pixels de large sur une hauteur de 312 pixels (elles sont positionnées les unes derrières les autres).
Au moment de l'affichage, il y a un redimensionnement du morceau d’image à utiliser, à la taille du canvas (200px X 156px).
Lors de l’affichage du tracé ou de l’image, les dimensions indiquées dans les fonctions fillRect() & drawImage() sont les mêmes que celles du canvas mais il y a un problème d’affichage.
La largeur est trop petite et la hauteur plus grande (-100px pour la largeur et + 6px pour la hauteur).
Toutefois, si j’indique dimensions par les valeurs lues avec document.getElementById("nom du canvas").width et document.getElementById("nom du canvas").height cela fonctionne
Je joins un bout de code qui illustre ce problème, le premier canvas est le résultat attendu, le deuxième canvas le résultat attendu et le troisième, le résultat quand j’utilise la taille remontée par les fonction citées ci-dessus.
Je n’arrive pas à comprendre ou pourquoi il y a un problème quand on indique des dimensions par des valeurs alors que cela fonctionne avec la lecture par les fonctions.

Pour ma culture, quelqu’un a t’il une proposition d’explication.

D’avance merci.

Le code d'exemple :

Code :

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
46
47
48
49
50
51
52
 
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>
  <script>
    function draw() {
      // Initialisation du contexte pour le canavas 1
      ctx = document.getElementById("canva1").getContext("2d");
      // Résultat attendu
      ctx.fillStyle = "green";
      ctx.fillRect(0, 0, 300, 150);
      ctx.drawImage(image, 1200, 0, 400, 312, 0, 0, 300, 150)
      // Initialisation du contexte pour le canavas 2
      ctx = document.getElementById("canva2").getContext("2d");      
      // Résultat obtenu avec des valeur identiques à celles du canvas
      ctx.fillStyle = "red";
      ctx.fillRect(0, 0, 200, 156);
      ctx.drawImage(image, 1200, 0, 400, 312, 0, 0, 200, 156)
      // Initialisation du contexte pour le canavas 3
      ctx = document.getElementById("canva3").getContext("2d");
      // Résultat obtenu en lisant les valeurs directement
      ctx.fillStyle = "blue";
      ctx.fillRect(0, 0, document.getElementById("canva3").width, document.getElementById("canva1").height);
      larg=document.getElementById("canva1").width;
      haut=document.getElementById("canva1").height;
      // Résultat obtenu en lisant les valeurs dans des variables
      ctx.drawImage(image, 1200, 0, 400, 312, 0, 0, larg, haut)
//        alert("Largeur : "+larg+" - Hauteur : "+haut);
    }
  </script> 
  <style type="text/css">
      /* Dessiner une bordure aux canevas */
      canvas {border: 1px solid black;}
      /* Cacher l'image*/
      #image {display: none;}
  </style>
</head>
 
<body onload="draw();">
  <image id="image" src="OnOffBdf.png"></image>
 
  <canvas id="canva1" style="position: absolute; left: 28px; top: 40px; width: 200px; height: 156px;"></canvas>
  <canvas id="canva2" style="position: absolute; left: 28px; top: 240px; width: 200px; height: 156px;"></canvas>
  <canvas id="canva3" style="position: absolute; left: 28px; top: 440px; width: 200px; height: 156px;"></canvas>
 
</body>
 
</html>

**mathieu** · 14/06/2025, 00h12

ce que vous récupérez dans width est la largeur de la grille interne du canvas. cette grille est de 300 × 150 par défaut comme vous pouvez le voir ici :
https://developer.mozilla.org/fr/doc...lements/canvas
si vous voulez récupérer la largeur css, c'est la propriété css qui est dans document.getElementById("canva1").style.width.

vous pouvez modifier les dimensions de la grille interne en javascript et vous pouvez aussi les définir dans le code html comme cela :

Code html :

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

<canvas width="200" height="156"></canvas>

Dessin de forme et utilisation d'image dans un canvas

JavaScript

Partager

Partager