Click eventListner is calling my function but only if I pass it anonymous function

Question

I have a click eventListener who's calling a static method "clearCanv" but one method inside "clearCanv" is not being called

this.ctx.clearRect(x,y,this.canv.width, this.canv.width)

"clearCanv" is being called but that method is not being called.

However if I pass the click evenetListner an anonymous function and I call my static method "clearCanv" from within anonymous function all the sudden it works.

Could someone explain why that is happening?

The problem is in the last couple lines in JS. I'm using Firefox

 class Board { static initalize() { // Create Canvas this.canv = document.createElement("canvas"); this.ctx = this.canv.getContext("2d"); this.canv.height = window.innerHeight; this.canv.width = window.innerWidth; document.body.appendChild(this.canv); this.prevX, this.prevY; this.lineWidth = 25; this.color = "white"; //Default color this.prevColor = this.color; this.erase = false; // Bindings this.draw = Board.draw.bind(this); this.clearCanv = Board.clearCanv.bind(this); } static draw({ x, y }) { // Draw a cericle on X, Y this.ctx.beginPath(); this.ctx.fillStyle = this.color; this.ctx.arc(x, y, this.lineWidth / 2, 0, Math.PI * 2); this.ctx.fill(); this.ctx.closePath(); // If we have prevX/Y draw a line from prevX/Y // To currentX/Y if (this.prevX && this.prevY) { this.ctx.beginPath(); this.ctx.moveTo(this.prevX, this.prevY); this.ctx.strokeStyle = this.color; this.ctx.lineTo(x, y); this.ctx.lineWidth = this.lineWidth; this.ctx.stroke(); this.ctx.closePath(); } // Recored X/Y this.prevX = x; this.prevY = y; } static clearCanv(x = 0, y = 0) { this.ctx.clearRect(x, y, this.canv.width, this.canv.height); } } Board.initalize(); Board.canv.addEventListener("mousedown", function() { this.addEventListener("mousemove", Board.draw); }); Board.canv.addEventListener("mouseup", function() { Board.prevX = null; Board.prevY = null; Board.canv.removeEventListener("mousemove", Board.draw); }); const clearBtn = document.getElementById("clear"); //This does not work clearBtn.addEventListener("click", Board.clearCanv); // This works for some reson //clearBtn.addEventListener("click", function(){ // Board.clearCanv(); //}); 

 html, body { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; position: relative; } canvas { height: 100%; width: 100%; background: black; } #clear { position: absolute; /* z-index: 222; */ } #erase { position: absolute; left: 5.5rem; } .erase-selected { position: absolute; left: 5.5rem; opacity: 0.7; } #mouseColor { position: absolute; left: 11.2rem; } .font-size-select { position: absolute; left: 15.5rem; } .bg-color { position: absolute; left: 19.5rem; } 

 <button id="clear">Clear</button><button id="erase">erase</button><input type="color" id="mouseColor" /> <select class="font-size-select" id="select-size"> <option selected value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> </select> <select class="bg-color" id="select-bg"> <option selected value="black">Dark</option> <option value="white">Light</option> </select> 

Answer 1

The issue you face here is that x=0, y=0 params of your clearCanv method are overridden by the ones passed by the event listener ie x= Event .
clearRect() silently ignores the call because x is NaN for what it is concerned.

Simply removing the params here will fix the issue, since I guess you don't want it to be anything else than 0 .

 class Board { static initalize() { // Create Canvas this.canv = document.createElement("canvas"); this.ctx = this.canv.getContext("2d"); this.canv.height = window.innerHeight; this.canv.width = window.innerWidth; document.body.appendChild(this.canv); this.prevX, this.prevY; this.lineWidth = 25; this.color = "white"; //Default color this.prevColor = this.color; this.erase = false; // Bindings this.draw = Board.draw.bind(this); this.clearCanv = Board.clearCanv.bind(this); } static draw({ x, y }) { // Draw a cericle on X, Y this.ctx.beginPath(); this.ctx.fillStyle = this.color; this.ctx.arc(x, y, this.lineWidth / 2, 0, Math.PI * 2); this.ctx.fill(); this.ctx.closePath(); // If we have prevX/Y draw a line from prevX/Y // To currentX/Y if (this.prevX && this.prevY) { this.ctx.beginPath(); this.ctx.moveTo(this.prevX, this.prevY); this.ctx.strokeStyle = this.color; this.ctx.lineTo(x, y); this.ctx.lineWidth = this.lineWidth; this.ctx.stroke(); this.ctx.closePath(); } // Recored X/Y this.prevX = x; this.prevY = y; } // here remove the params // static clearCanv(x = 0, y = 0) { static clearCanv() { this.ctx.clearRect(0, 0, this.canv.width, this.canv.height); } } Board.initalize(); Board.canv.addEventListener("mousedown", function() { this.addEventListener("mousemove", Board.draw); }); Board.canv.addEventListener("mouseup", function() { Board.prevX = null; Board.prevY = null; Board.canv.removeEventListener("mousemove", Board.draw); }); const clearBtn = document.getElementById("clear"); clearBtn.addEventListener("click", Board.clearCanv); // This worked because here the params were not overridden //clearBtn.addEventListener("click", function(){ // Board.clearCanv(); //}); 

 html, body { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; position: relative; } canvas { height: 100%; width: 100%; background: black; } #clear { position: absolute; /* z-index: 222; */ } #erase { position: absolute; left: 5.5rem; } .erase-selected { position: absolute; left: 5.5rem; opacity: 0.7; } #mouseColor { position: absolute; left: 11.2rem; } .font-size-select { position: absolute; left: 15.5rem; } .bg-color { position: absolute; left: 19.5rem; } 

 <button id="clear">Clear</button><button id="erase">erase</button><input type="color" id="mouseColor" /> <select class="font-size-select" id="select-size"> <option selected value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> </select> <select class="bg-color" id="select-bg"> <option selected value="black">Dark</option> <option value="white">Light</option> </select> 

---

---

Now, it is really hard to let you continue on this path. You are completely misusing the language here.

You are using this class as if it were an instance. Instead remove all these static , create a real class and then make a new instance of this class .

 class Board { constructor() { // Create Canvas this.canv = document.createElement("canvas"); this.ctx = this.canv.getContext("2d"); this.canv.height = window.innerHeight; this.canv.width = window.innerWidth; document.body.appendChild(this.canv); this.prevX, this.prevY; this.lineWidth = 25; this.color = "white"; //Default color this.prevColor = this.color; this.erase = false; // Bindings this.draw = this.draw.bind(this); this.clearCanv = this.clearCanv.bind(this); } draw({x,y}) { // Draw a circle on X, Y this.ctx.beginPath(); this.ctx.fillStyle = this.color; this.ctx.arc(x, y, this.lineWidth / 2, 0, Math.PI * 2); this.ctx.fill(); this.ctx.closePath(); // If we have prevX/Y draw a line from prevX/Y // To currentX/Y if (this.prevX && this.prevY) { this.ctx.beginPath(); this.ctx.moveTo(this.prevX, this.prevY); this.ctx.strokeStyle = this.color; this.ctx.lineTo(x, y); this.ctx.lineWidth = this.lineWidth; this.ctx.stroke(); this.ctx.closePath(); } // Recored X/Y this.prevX = x; this.prevY = y; } clearCanv() { this.ctx.clearRect(0, 0, this.canv.width, this.canv.height); } } // create an instance of Board const board = new Board(); board.canv.addEventListener("mousedown", function() { this.addEventListener("mousemove", board.draw); }); board.canv.addEventListener("mouseup", function() { board.prevX = null; board.prevY = null; board.canv.removeEventListener("mousemove", board.draw); }); const clearBtn = document.getElementById("clear"); clearBtn.addEventListener("click", board.clearCanv); 

 html, body { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; position: relative; } canvas { height: 100%; width: 100%; background: black; } #clear { position: absolute; /* z-index: 222; */ } #erase { position: absolute; left: 5.5rem; } .erase-selected { position: absolute; left: 5.5rem; opacity: 0.7; } #mouseColor { position: absolute; left: 11.2rem; } .font-size-select { position: absolute; left: 15.5rem; } .bg-color { position: absolute; left: 19.5rem; } 

 <button id="clear">Clear</button><button id="erase">erase</button><input type="color" id="mouseColor" /> <select class="font-size-select" id="select-size"> <option selected value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="25">25</option> </select> <select class="bg-color" id="select-bg"> <option selected value="black">Dark</option> <option value="white">Light</option> </select>