Click on the canvas to create an input text window at the location.
When enter, the input text box disappears and only the text is pasted to the canvas. But I am having trouble clearing the input text box.
document.body.removeChild
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
or
$("#cvsBrowWpp"+id).remove(this);
b.replace is not a function
What is the problem and how can I fix it?
What I have tried:
let canvas, ctx, font, hasInput;
$( document ).on('click' , '.wtc-canvas' , function( e, ele ){
id = $(this).attr('data-root');
canvas = document.getElementById('canvas'+id),
ctx = canvas.getContext('2d'),
font = '14px sans-serif',
hasInput = false;
if(hasInput) return;
addInput(e);
});
function addInput(e){
var input = document.createElement('input');
input.className = 'sstt';
input.type = 'text';
input.style.position = 'absolute';
input.style.left = (x - 4) + 'px';
input.style.top = (y - 4) + 'px';
input.onkeydown = handleEnter;
$("#cvsBrowWpp"+id).append(input);
input.focus();
hasInput = true;
}
function handleEnter(e){
var keyCode = e.keyCode;
if(keyCode === 13){
drawText(this.value, parseInt(this.style.left, 10),
parseInt(this.style.top, 10));
document.body.removeChild(this);
$("#cvsBrowWpp"+id).remove(this);
hasInput = false;
}
}
function drawText(txt, x, y){
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.font = '14px sans-serif';
ctx.fillText(txt, x - 4, y - 4);
console.log(txt);
}