Question

132

how to draw text box inside the canvas

rated 0 times [ 138] [ 6] / answers: 1 / hits: 35950 / 11 Years ago, wed, april 17, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stephonkeandrer

Add To Favorites

Follow

Total Points: 392

Total Questions: 94

Total Answers: 100

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

stephonkeandrer questions

1 Electron: how to open an url in the same window and after the user do some action go back to application in the same window

Thu, Mar 24, 22, 00:00, 2 Years ago

1 How to disable scroll on body when fullscreen menu open

Sun, Jun 28, 20, 00:00, 4 Years ago

1 How databind a textarea component text value and update it?

Tue, Jun 9, 20, 00:00, 4 Years ago

1 Angular; how to re-render component data when I update variable in script. Binding data is working, but not updating

Mon, May 4, 20, 00:00, 4 Years ago

1 Loading module was blocked because of a disallowed MIME type (“application/wasm”)

Sun, Oct 13, 19, 00:00, 5 Years ago

View All

answered 11 Years ago danar · Accepted Answer

No. It's not possible.

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

use CSS exactly the way you show

- 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.