Bonjour à tous, 

J'ai un gros soucis, j'essai de faire un canvas en poo pour un projet sauf que j'ai un problème pour dessiner 

voici mon code : 

var canvasObject = {   

    clear: function(){
    	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
 
    init: function(id) {
        this.canvas = document.getElementById(id);
        this.ctx = this.canvas.getContext('2d');
        this.canvas.onmousedown = function(){
			this.canvas.addEventListener("mousemove", this.draw);	
		};
        $(id).mouseup(function(){
			this.canvas.removeEventListener("mousemove", draw);
			this.ctx.beginPath();
		});	
    },

    draw: function(e) {
        var parentOffset = $(this).offset(); 
		var x = e.pageX - parentOffset.left;
		var y = e.pageY - parentOffset.top;
		this.ctx.lineTo(x, y);
		this.ctx.stroke();
    }
}
 
canvasObject.init('sign');

$('#clear').click(function(){
	canvasObject.clear();
});

et l'erreur : 

signature.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of undefined

    at HTMLCanvasElement.canvas.onmousedown (signature.js:11)

j'ai essayé plusieurs trucs 

comme 

this.canvas.addEventListener("mousemove", () => this.draw());   mais ca ne marche pas non plus 

j'ai cherché la dessus mais rien : https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript

Avez-vous une idée ? 

Merci d'avance 

Bonjour,

le this de la méthode init n'est pas celui de la fonction anonyme dans laquelle tu appelles addEventListener. Ce que je fais régulièrement c'est écrire const self = this; en début de méthode et de me servir de self et non de this. 

Super merci ! 

Il reconnait bien quand je reste appuyer et quand je relève le clique, 

cependant maintenant il me marque : 

Uncaught TypeError: Cannot read property 'lineTo' of undefined

    at HTMLCanvasElement.draw

Je ne comprend pas pourquoi, je remets mon code : 

var canvasObject = {   
	draw: function(e) {
        const parentOffset = $(this).offset(); 
		const x = e.pageX - parentOffset.left;
		const y = e.pageY - parentOffset.top;
		this.ctx.lineTo(x, y);
		this.ctx.stroke();
    },

    clear: function(){
    	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
 
    init: function(id) {
    	const self = this;
        this.canvas = document.getElementById(id);
        this.ctx = this.canvas.getContext('2d');
        this.canvas.onmousedown = function(){
			self.canvas.addEventListener("mousemove", self.draw);	
		};
        this.canvas.onmouseup = function(){
			self.canvas.removeEventListener("mousemove", self.draw);
			self.ctx.beginPath();
		};	
    }    
}
 
canvasObject.init('sign');

$('#clear').click(function(){
	canvasObject.clear();
});

Bonjour,

this c'est un peu dur de savoir ce que ça représente à chaque fois dans ton code (pourquoi ne pas faire une classe ?) tu peux console.log(this) pour voir à quoi ça fait référence.

Bonjour Kenkaio,

Quand tu écris  self.canvas.removeEventListener("mousemove", self.draw);

Quans tu "mousemouve"  tu fais juste appel à la fonction self.draw dans cette dernière (comme dans toutes les fonctions d'événement) , "this" correspond à l'objet qui a appelé enlèvement donc canvas

$(this) fonctionne car this représente le canvas

mais this.ctx ne fonctionne pas parce que canvas n'a pas la variable "ctx"'

Pour changer la valeur de this il faut utiliser bind()

Exemple très rapide :

https://codepen.io/Zonecss/pen/EGjmLR

par compte la manière dont tu as créer ton objet tu ne pourras pas faire un removeEventListener cela ne fonctionnera pas

J'essaye de te trouver un exemple pour que le  removeEventListener fonctionne

-
Edité par AliasDmc 11 décembre 2018 à 20:46:25

j'ai compris ce que tu veut dire, j'ai fait un truc comme ça : 

var canvasObject = {   
	draw: function(e) {
        const parentOffset = $(this).offset(); 
        this.canvas = document.getElementById('sign');
        this.ctx = this.canvas.getContext('2d');
		const x = e.pageX - parentOffset.left;
		const y = e.pageY - parentOffset.top;
		this.ctx.lineTo(x, y);
		this.ctx.stroke();
    },

    clear: function(){
    	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
 
    init: function(id) {
    	const self = this;
        this.canvas = document.getElementById(id);
        this.ctx = this.canvas.getContext('2d');
        this.canvas.onmousedown = function(){
			self.canvas.addEventListener("mousemove", self.draw);	
		};
        this.canvas.onmouseup = function(){
			self.canvas.removeEventListener("mousemove", self.draw);
			self.ctx.beginPath();
		};	
    }    
}
 

mais le truc c'est que j'aimerais que à la ligne 4 je ne mette pas directement l'id 

ou que je ne répète pas ces deux lignes de codes, du coup j'ai pensé à metre lineTo et stroke dans mon init mais ca ne marches pas 

je ne sais pas trop comment faire du coup. 

Merci bien en tout cas

Bonjour Kenkaio,

J'ai mis à jour  :

https://codepen.io/Zonecss/pen/EGjmLR

Woaw 

Merci bcp !