Addlying text to the canvas using a temporary text box.

See more:

Javascript

jQuery

Canvas

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;
//      document.body.appendChild(input);                                                                                                                                                             
        $("#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);   // << === this.line
            /* or this */
            $("#cvsBrowWpp"+id).remove(this);   // <<== 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);
    }