9

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?

Improve this question
5
  • You can take a look at raphaeljs.com Commented Apr 17, 2013 at 5:16
  • The latter code is how you'd do it. Could you specify why you don't want to use it? Commented Apr 17, 2013 at 5:18
  • i checked raphaeljs.com but i cant able to find better suited.if you already used. pls specify the function name. Commented Apr 17, 2013 at 5:22
  • refer this stackoverflow.com/questions/9778314/… Commented Jul 15, 2014 at 7:36
  • refer this link for help stackoverflow.com/questions/9778314/… Commented Jul 15, 2014 at 7:38

4 Answers 4

Reset to default
14

No. It's not possible.

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

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Just to add to the list of what you would have to implement if you choose nr. 2: handle delete, end, home, pressing delete on the end of a line, pressing backspace at the start of a line, highlighting using semitransparent square and shift+arrows, ctrl+c, ctrl+v, shift+home, shift+end. It is seriously a LOT of work.
A pretty solid implementation of approach 2 is Google Docs. The quickest way to see this is to observe the fact that the italic caret is slanted, which is not possible with CSS. Another effect is that if you zoom with your trackpad very quickly, the text in the document is blurry for a split second. You can also inspect the DOM to see that it is a Canvas and the content disappears when hiding the Canvas. It's an amazing piece of work.
5

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

Improve this answer

Comments

1

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

Improve this answer

Comments

-2

One workaround is this ... I think the following solution works well, although you can't type in the text box inside the Canvas you could use a separate text box and apply that text to the text area within the canvas http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/.

Improve this answer

2 Comments

This only renders static text, there is no ability to type or edit anything.
@JanBrus that's exactly what I said in my comment along with "you could use a separate text box and apply that text to the text area within the canvas"

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.