Estou a tentar fazer uma ferramenta de texto de uma aplicação de desenho com uma input box, usando a livraria CanvasInput.
Eu consigo aplicar o texto que escrevo no canvas ao clicar no enter, mas não estou a conseguir remover a input box de lá depois de aplicar o texto.
Da forma que tentei com input.destroy();
a input box deixa de funcionar mas continua a aparecer no canvas e não consigo voltar a usar a ferramenta de texto.
Alguém sabe como remover a input box do canvas?
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
});
}
}