Textbox Value In Html5 Canvas

I am working on sort of a Business Card maker using HTML5 Canvas. To get custom Name, Address, etc...I'm currently using PROMPT Box... Right now what I got is : To define the varia

Solution 1:

Use a keypress handler on your text area:

document.getElementById("mytextbox").addEventListener("keydown", function() {
    var val = document.getElementById("mytextbox").value;
    // now use val in your existing fillText code
});

Note that you could use the change event instead of the keydown event, but change will only fire after the user moves focus away from the textbox. The keypress event will work similarly to keydown, but it won't catch backspaces.

That should get you started!

Solution 2:

Once you have the new value from the key down event or whatever you then need to clear down the canvas and redraw it.

So

OCtx.clearRect ( x , y , w , h );

//re run the code you used initially with new value