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();