Remove input box from canvas

Question

I am trying to make a text tool of a drawing application with an input box, using the library Canvasinput.

I can apply the text I write to the canvas by clicking on enter, but I am unable to remove the input box from there after applying the text.

The way I tried to input.destroy(); input box crashes but continues to appear on canvas and I can’t use the text tool again.

Does anyone know how to remove input box from canvas?

Project

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
        });
    }
}

Answer 1

Hey the problem is that the canvas through JS to only way to remove this element is redesign the canvas again.

Then you must do something like this:

  //Limpar o canvas, ou seja a inputbox que já lá estava (se não me engano)
  ctx.clearRect(0, 0, canvas.width, canvas.height); 

  //E prosseguir a preencher o canvas 
  ctx.font = '32px serif';
  ctx.fillText(e.target.value, mouseX, mouseY);

Any ambiguity please comment.