how to draw text box inside the canvas

Question

i need text box inside the canvas. is it possible to draw textbox inside the canvas??

like:

<canvas>
<input type="text">
</canvas>

i dont want answer like this:

<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>

is possible to draw textbox inside the canvas tag using javascript?

Answer 1

No. It's not possible.

If you want text-boxes like this, then your answers are:

1. use CSS exactly the way you show

2. • make a text-box class, which draws a rectangle and a blinking cursor
   • keeps track of when it's clicked, using hand-written collision-detection
   • registers and unregisters keyboard-events when a collision is detected
   • draws and clears text, based on input
   • creates a rate-limiter, so that keys don't fire too quickly
   • listens for "enter" or "backspace" keys, on keyup to add another line, or erase the current text
   • add an additional click-listener inside the box, when it already has "focus", to try to figure out where the "cursor" (which you invent) should be, in terms of the string, based on the click's detected position within the canvas, compared to the rectangle's position in the canvas, plus the "padding" between the rectangle's starting point and the text's starting point, plus the string's calculated-width
   • and if the click's X and Y are higher than the rectangle's X, plus the padding before the text starts, but lower than the rectangle's X, plus padding, plus text-width, then you need to loop through and measure the text, character by character, until you find the "best-fit" for where to consider the "cursor" to be, for the next round of editing... which has to function using mouse and keyboard as inputs, of which you have to create and register the events yourself...

That's a LOT of work, compared to CSS.

So technically, yes, you can make something that's like an input box, if you're willing to write what might be hundreds of lines of unminified code, to do the same sort of thing you'd do if you were drawing a mouse/keyboard capable text-box on an empty screen using nothing but C++...

But you can not add DOM elements and make them a part of the canvas, complete with all of their events and natural behaviours.

There are some libraries out there which might help, but I'm not understanding why you'd want to go through all of this work, without a good reason.

Answer 2

Try this site to draw text box component on canvas. Its not CSS or HTML, little javascript. It explains all about text in canvas. CanvasInput - HTML5 Canvas Text Input

Answer 3

You can use this library to create a input text field into canvas. It is not sharp as a html/css textbox, but it's a good start.

https://goldfirestudios.com/canvasinput-html5-canvas-text-input