jQuery在同一个变量中分隔多个事件函数

Question

我正在制作一个像素艺术品制造商。我无法将绘图功能与擦除功能分开。我已经尝试了很多方法，但我发现无论我只能得到一个工作（绘制或擦除）。

这是我正在使用的一些代码。还有另一个问题，点击和拖动绘制功能不起作用。

var eraserIsActive = false;
let mouseEvents = 0;
let paint;
let cPicker = $("#colorPicker").val();

$('#eraser').click(function() {
  eraserIsActive = true;
});
$('#colorizer').click(function() {
  eraserIsActive = false;
})

if (eraserIsActive = true) {
  paint = "white";
} else {
  paint = cPicker;
  }
 canvas.on('mousedown', 'td', function(event) {
   event.preventDefault();
   mouseEvents === 1;
     $(event.target).css('background-color', paint);
  })
 if (mouseEvents === 1) {
   canvas.on('mouseenter', 'td', function(event) {
    $(event.target).css('background-color', paint);
   })
 }
}

Full version on Codepen here