<canvas> taille du canvas et précision du trait
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:
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
