我可以'我不明白为什么我能;不要在JavaScript中更改蜡笔的颜色

我一直在尝试使用html/css和javascript开发一个类似"paint"的应用程序。我做了一个函数，当你点击一支蜡笔时，它应该改变它画的颜色。我用span做蜡笔。我对此很陌生，所以我真的不知道如何调试这个问题

$(document).ready(function() {
  var ok = false;
  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var clickColor = new Array();
  var curent_color = '#000000';
  var context = document.getElementById('Canvas').getContext("2d");
  console.log(context);

  $('#Canvas').mousedown(function(e) {
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    ok = true;
    addClick(mouseX, mouseY);
    redraw();
  });
  $('#Canvas').mousemove(function(e) {
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    if (ok != false) {
      addClick(mouseX, mouseY, true);
      redraw();
    }
  });
  $('#Canvas').mouseup(function(e) {
    ok = false;
  });
  $('#Canvas').mouseleave(function(e) {
    ok = false;
  });
  function addClick(x, y, dragging) {
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
    clickColor.push(curent_color);
  }
  function redraw() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    context.strokeStyle = curent_color;
    context.globalAlpha = 0.5;
    context.lineJoin = "round";
    context.lineWidth = 20;
    for (var i = 0; i < clickX.length; i++) {
      context.beginPath();
      if (clickDrag[i] && i) {
        context.moveTo(clickX[i - 1], clickY[i - 1]);
      } else {
        context.moveTo(clickX[i] - 1, clickY[i]);
      }
      context.lineTo(clickX[i], clickY[i]);
      context.closePath();
      context.strokeStyle = clickColor[i];
      context.stroke();
    }
  }
});
function changeColor(x) {
  if (x === 1) {
    curent_color = '#FF0000';
  } else if (x === 2) {
    curent_color = '#E30058';
  } else if (x === 3) {
    curent_color = '#F0540C';
  } else if (x === 4) {
    curent_color = '#F0CF0C';
  } else if (x === 5) {
    curent_color = '#46BA0B';
  } else if (x === 6) {
    curent_color = '#0C2102';
  } else if (x === 7) {
    curent_color = '#0C2151';
  } else if (x === 8) {
    curent_color = '#2067CF';
  } else if (x === 9) {
    curent_color = '#000000';
  } else if (x === 0) {
    curent_color = '#DD78E3';
  }
}