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>

Dessin de forme et utilisation d'image dans un canvas

JavaScript

Mode arborescent

Partager

Partager