Discussion :

[Speed41]

Bonjour,

Je veux utiliser un canvas pour faire un quadrillage sur une image. Ca fonctionne mais j'ai 'impression que mon canvas est tout petit et étiré, les trais son gros avec une bordure flou et plus mon canvas est grand plus c'est gros.

Je dois donc faire une erreur mais je n'arrive pas à trouver, j'ai bien l'impression de faire comme tout le monde mais je dois me gaufrer quelque part. C'est pour ça que je vous demande de l'aide au moins pour valider ou invalider mon code, que voici

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
53
54
55
56
57
var canvas = document.createElement('canvas');
        canvas.id = "quadrillage";
      //  canvas.fillStyle = "rgba(0, 0, 200, 0.5)";
        canvas.style.position = "absolute";
        var hauteur = document.getElementById("imageLabo").height;
        var largeur = document.getElementById("imageLabo").width;
 
        canvas.style.width = largeur + "px";
        canvas.style.height = hauteur + "px";
 
        canvas.style.left = document.getElementById("imageLabo").left + "px";
        canvas.style.top = "50px";
        canvas.setAttribute('onclick', 'clicImage()');
 
        document.getElementById("PCs").appendChild(canvas);
 
        var contexte = canvas.getContext('2d');
        if (!contexte) { return; }
 
        contexte.beginPath();
        contexte.strokeStyle = '#48C';
        contexte.lineWidth = 0.25;
        contexte.strokeStyle = "red";
 
        var pasX = document.getElementById("espacesX").value;
        if (pasX == "" | pasX == null) {
            pasX = "10";
        }
        var npasX = parseInt(pasX);
 
        var pasY = document.getElementById("espacesY").value;
        if (pasY == "" | pasY == null) {
            pasY = "10";
        }
        var npasY = parseInt(pasY);
 
        var decalagX = document.getElementById("decalageX").value;
        if (decalagX == "" | decalagX == null) {
            decalagX = "0";
        }
        var decalX = parseInt(decalagX);
 
        var decalagY = document.getElementById("decalageY").value;
        if (decalagY == "" | decalagY == null) {
            decalagY = "0";
        }
        var decalY = parseInt(decalagY);
 
        for (y = decalY; y < hauteur; y += npasY) {
            contexte.moveTo(decalX, y);
            contexte.lineTo(largeur, y);
        }
        for (x = decalX; x < largeur; x += npasX) {
            contexte.moveTo(x, decalY);
            contexte.lineTo(x, hauteur);
        }
        contexte.stroke();

Merci d'avance pour votre aide

[Archimède]

J'ai survolé mais déjà , les dimensions de ton canvas sont définies en CSS et pas directement avec width et height sans "px" :

Code javascript :

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

1
2
3
 
  canvas.width = largeur;
  canvas.height = hauteur; // pas en CSS

Fais déjà un essai avec cette modif.

[Speed41]

Super merci.

J'avais bien testé mais j'avais gardé le + "px" à la fin donc ça marchait pas

Merci