How to draw a text box inside a canvas

Question

I need a text box inside the canvas. Is it possible to draw a text box inside the canvas?

as:

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

I do not want to 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;"/> 

can I draw a text box inside a canvas tag using javascript?

Answer 1

No. It's impossible.

If you want to use text fields, then your answers:

• use CSS exactly as you show

• • create a text box class that draws a rectangle and a blinking cursor
  • tracks when he clicked using handwritten collision detection
  • logs and unregisters keyboard events when a collision is detected.
  • draws and clears text based on input
  • creates a speed limiter, so the keys do not start too quickly.
  • listens for the enter or backspace keys, on keyup , to add another line, or to erase the current text
  • add an extra extra click to the field when it already has a “focus” to try to figure out where the “cursor” (which you are inventing) should be in terms of a line based on the detected click of a position in the canvas, compared to the position of the rectangle in the canvas, plus indentation between the starting point of the rectangle and the starting point of the text plus a line with the calculated width
  • and if the click of X and Y is higher than the rectangle X, plus filling before the start of the text, but below the rectangle X plus the addition plus the width of the text, then you need to scroll and measure the text, by character, until you find the “best option” for where you should consider the "cursor" for the next round of editing ... which should function using the mouse and keyboard as input, from which you must create and register events yourself ...

This is a lot of work compared to CSS.

So, technically, yes, you can do something like an input window, if you want to write something that can be hundreds of lines of uninfected code, do the same thing as you would if you were drawing a text box with a mouse / keyboard on an empty screen using only C ++ ...

But you cannot add DOM elements and make them part of the canvas, with all their events and natural behavior.

There are several libraries that can help, but I don’t understand why you want to go through all this work without a good reason.

Answer 2

Try this site to draw a text box component on the canvas. This is not CSS or HTML, little javascript. It explains all the text in the canvas. CanvasInput - HTML5 text input

Answer 3

I think the following solution works well, although you cannot enter a text field inside the Canvas, you can use a separate text field and apply this text to the text area inside the canvas http://www.html5canvastutorials.com/tutorials/html5-canvas- wrap-text-tutorial / .