11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Canvas

Bonjour,
Pouvez-vous me dire ce qui ne va pas avec ce code en objet pour dessiner dans un canvas ?
J'ai l'erreur this.ctx is undefined
Merci !

index.html

<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="canvas.css">
    </head>
    <body>

        <canvas id='canvas1' width='400' height='200'></canvas>

        <script src="oop.js" async defer></script>
    </body>
</html>


oop.js

class Canvas {
    constructor() {
        this.canvas = document.getElementById('canvas1');
        this.ctx = this.canvas.getContext('2d');
        this.painting = false;
    }

    startPosition() {
        this.painting = true;
        // draw(e);
    }

    finishedPosition() {
        this.painting = false;
        this.ctx.beginPath();
    }

    draw(e) {
        if(!this.painting) return;
        this.ctx.lineWidth = 10;
        this.ctx.lineCap = "round";

        this.ctx.lineTo(e.clientX, e.clientY);
        this.ctx.stroke();
        this.ctx.beginPath();
        this.ctx.moveTo(e.clientX, e.clientY);
    }

    signature() {
        this.canvas.addEventListener("mousedown", this.startPosition);
        this.canvas.addEventListener("mouseup", this.finishedPosition);
        this.canvas.addEventListener("mousemove", this.draw);
    }

}

var myCanvas = new Canvas();
myCanvas.signature();

Modifié par woubi (03 Jul 2019 - 14:43)
Administrateur
woubi a écrit :
Résolu Smiley cligne

OK et quelle était la solution, pour les prochains qui auraient le même souci ?
Je pense que c'est parce que on appelle les méthodes à partir d'une autre méthode et donc le this n'est plus le this de la fonction principale...
J'ai résolu mon problème avec :

    signature() {
        this.canvas.addEventListener("mousedown", this.startPosition.bind(this));
        this.canvas.addEventListener("mousemove", this.draw.bind(this));
        this.canvas.addEventListener("mouseup", this.finishedPosition.bind(this));
    }
Sujet clos
Aller à