Adding Text Tool to Paint App HTML5 Canvas

Question

I have been developing this web painting app for about a week now using HTML5 and Canvas, and one of the tools that I had put off until now was the text tool because of its complexity. Luckily, however, there are libraries such as CanvasInput that are robust that can dynamically insert a text box onto the canvas. You can see my paint program here.

The problem I have, however, is destroying a new instance of one of these CanvasInputs. I am pulling my hair out over trying to destroy an instance of CanvasInput! I need your help!

Here is just some of what I have tried:

        textBox = new CanvasInput({
            canvas : document.getElementById("tempCanvas"),
            x : tool.startx,
            y : tool.starty,
            fontSize : (10 + (tmpContext.lineWidth * 2)),
             //When Enter is pressed
            onsubmit : function () {
                //tmpContext.clearRect(0, 0, tmpCanvas[0].width, tmpCanvas[0].height);
                textBox.canvas = null;
                textBox._canvas = null;
                textBox.render();
            }
        });

Answer 1

Well, just to share my solution with everyone else, in case anyone tries to do something similar, I ended up going with a different and MUCH easier/more efficient route.

Instead of using the CanvasInput library and rendering an input on the canvas itself (which actually added hidden inputs and a couple different canvases), [EDIT] I ended up creating a text input in the DOM, hiding it through CSS by default, and then upon the click event firing, the text input being displayed block and absolutely positioned. My previous solution to this had caused a memory leak and was adding multiple detached inputs to the page. That was not the best solution, so I went with having one input that is hidden or displayed depending on the situation.

Here is the code (using jQuery but can just as easily be done in Pure JS):

        var $input = $("#textInput");
        $input.css({
            display: "block",
            position : "absolute",
            left : tool.startx,
            top : tool.starty
        });
        $input.keyup(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                context.font = (10 + (tmpContext.lineWidth * 2)) + "px Georgia";
                if (tool.mode === "textFill") {
                    context.fillText($input.val(), parseInt($input.css("left")), parseInt($input.css("top")));
                } 
                else {
                    context.strokeText($input.val(), parseInt($input.css("left")), parseInt($input.css("top")));
                }
                context.save();
                addRestorePoint();
                $input.css("display", "none").val("");
            }
            if (e.which === 27) {
                e.preventDefault();
                $input.css("display", "none").val("");          
            }                
        });