销毁输入框

Question

我正在尝试使用带有此CanvasInput库的输入框制作文本工具。

我可以使用 enter键将文本渲染到画布，我缺少的部分是销毁输入框，以便我可以重复使用文本工具。我试图用input.destroy();破坏盒子的方式，它停止工作，但它仍然显示在画布中，我不能再使用该工具。

如何正确销毁输入框？

Codepen

截图

JS

var inputBox=0;
var input;

function text(e) {
  console.log(e.target);
  console.log(e.target.value);

  ctx.font = '32px serif';
  ctx.fillText(e.target.value, mouseX, mouseY);
  input.destroy();
}

function drawText(ctx,x,y,size) {
    if (inputBox==0){
        inputBox=1;
           input = new CanvasInput({
              x: mouseX,
              y: mouseY,
              canvas: document.getElementById('sketch'),
              fontSize: 18,
              fontFamily: 'Arial',
              fontColor: '#212121',
              fontWeight: 'bold',
              width: 200,
              padding: 8,
              borderWidth: 1,
              borderColor: '#000',
              borderRadius: 3,
              boxShadow: '1px 1px 0px #fff',
              innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
              placeHolder: 'Enter message here...',
              onsubmit : text
        });
    }
}