Discussion :

[Jordan-Berger]

Bonjour,

Je suis en plein apprentissage du langage Javascript et je rencontre un problème.

J'aimerais mettre en place un canvas afin de pouvoir dessiner dedans (pour faire court).

Le canvas prend une taille de base de 300*150 et mon code fonctionne très bien avec cette configuration. Mais si je souhaite modifier la taille du canvas, à 200*100 admettons, il se passe une chose que je n'arrive pas à expliquer.



Config avec un canvas 300*150 -> Si je dessine en bas à droite du canvas, mon dessin apparaît au bon endroit.



Config avec un canvas 200*100 -> Si je dessine en bas à droite du canvas, mon dessin apparaît au mauvais endroit, en bas à droit du rectangle bleu.

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
class Objet {
    constructor(width, height, bg){
        this.width = width;
        this.height = height;
        this.bg = bg;
    }
    initDiv () {
        var divElt = $("<div>");
        divElt.attr({
            id : "objet"
        });
        divElt.css({
            width : this.width,
            height : this.height,
            border : 'solid black 2px'
        });
        $("#contenu").append(divElt);
        divElt.append(this.initCanvas());
    }
    initCanvas() {
        var canvasElt = $("<canvas>");
        canvasElt.attr({
            id : "canvas"
        });
        canvasElt.css({
            width : this.width,
            height : this.height,
            border : 'solid red 2px'
        });
        return canvasElt;
    }
    dessinCanvas() {
        function init(bg) {
            ctx.fillStyle = bg;
            ctx.fillRect(0, 0, canvas.width(), canvas.height());
        }
        const canvas = $('#canvas');
        var offset = canvas.offset();
        var ctx = canvas[0].getContext('2d');
        init(this.bg);
        canvas.mousedown(() => {
            canvas.mousemove((e) => {
                ctx.fillStyle = 'black';
                ctx.beginPath();
                ctx.arc(e.clientX-offset.left, e.clientY-offset.top, 3, 0, 360, false);
                ctx.fill();
            });
        })
        canvas.mouseup(() => {
            canvas.off('mousemove');
        })
    }
}
var objet = new Objet('200px','100px','lightblue');
objet.initDiv();
objet.dessinCanvas();

[Beginner.]

Salut,

Cela aurait été une bonne chose si tu nous avez donné le html pour qu'on puisse tester...

Bon j'ai essayé de deviner d’après le code et je crois que le problème c'est ça : https://developer.mozilla.org/fr/doc...ent_du_canevas

Utilise donc plutôt les attributs width et height et évite d'utiliser CSS...

Chez moi cela fonctionne en modifiant ton code :

Code javascript :

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

1
2
3
4
5
canvasElt.attr({
            id: "canvas",
            width: this.width,
            height: this.height
        });

au lieu de :

Code javascript :

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

1
2
3
4
5
canvasElt.css({
            width : this.width,
            height : this.height,
            border : 'solid red 2px'
        });

PS : Fait attention aux bordures elles peuvent fausser les calculs... Je ne connais pas JQuery mais si canvas.offset(); donne les coordonnées de la borderBox alors il y a peut-être un problème car tu dessines à l'intérieur du canvas il faudrait plutôt les coordonnées de la paddingBox... Le plus simple : pas de bordure d'autant plus que tu en met au canvas et à son conteneur, ce n'est pas très beau...

[Jordan-Berger]

Re,

C'était en effet la bonne solution merci, cependant, j'aurais bien aimé comprendre l'erreur. Je donne une taille au rectangle bleu de 200*100 mais il apparaît plus petit. Le fait de dessiner en bas à droite du canvas reporte le dessin en bas à droite du rectangle bleu. J'aime bien résoudre des erreurs (même si c'est pas moi qui l'ai résolue) mais j'aime tout autant les comprendre afin d'éviter de les refaire.

Encore merci pour ta réponse et ton temps.

PS : les bordures c'était pour mieux distinguer le canvas et la div, je ne les utilise pas sinon.

[Beginner.]

Ben la raison est expliquée dans le lien que j'ai donné, en fait il peut y avoir une distorsion, j'ai fait quelques testes et effectivement il y a un facteur autre que 1 quand il y a une différence entre les dimensions CSS et celles indiquées dans les attributs, si par exemple les dimensions CSS sont dix fois plus petites que les dimensions indiquées dans les attributs, il y aura un facteur de 10. Le rectangle bleu de 200*100 ce sera en fait un rectangle de 20*10...

Alors dans ton cas je ne sais pas quelle est la valeur de ce facteur mais il doit être inférieur à 1 ---> On ne peut pas le calculer car dans ton code tu n'affectes pas les attributs de dimensions, le navigateur doit donc les fixer lui même et apparemment il fixe des dimensions plus grandes que les dimensions CSS...

---> Pour éviter le problème renseigne aussi les attributs (si on ne renseigne que les attributs on a apparemment un facteur 1) .