How to removed canvas element event listeners

544 views Asked by At

In canvas I draw line,rectange,triangle. canvas listener mousedown add two event listeners mousemove,mouseup. In listener mouseup event want to remove listeners mousemove,mouseup.

Add listener works, but removed listener not work.

Listner add on mousedown event:

this.appCanvas.addEventListener("mousedown", (e) => {
            this.onMouseDown(e);
        });

    onMouseDown(e) {
        this.savedImage = this.appContext.getImageData( 0,0,this.appContext.canvas.width,
            this.appContext.canvas.height
        );

        this.appCanvas.addEventListener("mousemove", (e) => {
            this.onMouseMove(e);
        });
        this.template.addEventListener("mouseup", (e) => {
            this.onMouseUp(e);
        });
    }

Remove listener on mouseup event

onMouseUp(e) {      
    this.appCanvas.removeEventListener( "mousemove",(e) => {this.onMouseMove(e);},false );
    this.template.removeEventListener("mouseup",(e) => {this.onMouseUp(e);},false);
}

listener removed not work, still canvas mousemove and mouseup event work . In mouseup event want to removed listeners from the canvas element.

0

There are 0 answers