How to create a dynamic drawing text box in html canvas

Question

I don't have an idea on how to implement dynamic drawing box for text.

Basically here is the sample output:

Note:

The box should be infront if there is another object in the canvas.

Update

Here is my code so far:

MouseDown(){ //if first mousedown X1 = tempX; //tempX is for current positon Y1 = tempY; if (Input.style.display === "none") { Input.value = ""; Input.style.top = tempX + 'px'; Input.style.left = tempY + 'px'; Input.size = 1; Input.style.display = "block"; Draw(); } } Draw(){ var userInput = Input.value; rectangledText(X1, Y1, 150, userInput, 12, 'verdana'); //code by markE } function rectangledText(x, y, width, text, fontsize, fontface) { //code by markE self.TextWidth = ctx.measureText(Text).width; var height = wrapText(x, y, text, fontsize, fontface, width) ctx.strokeRect(x, y, width, height); } function wrapText(x, y, text, fontsize, fontface, maxwidth) { var startingY = y; var words = text.split(' '); var line = ''; var space = ''; var lineHeight = fontsize * 1.286; ctx.font = fontsize + "px " + fontface; ctx.textAlign = 'left'; ctx.textBaseline = 'top' for (var n = 0; n < words.length; n++) { var testLine = line + space + words[n]; space = ' '; if (ctx.measureText(testLine).width > maxwidth) { ctx.fillText(line, x, y); line = words[n] + ' '; y += lineHeight; space = ''; } else { line = testLine; } } ctx.fillText(line, x, y); return (y + lineHeight - startingY); }

And sample output with explanation:

The issue is how I can make the first mousedown rectangle and text be wrapped using the Input.style

Are you wanting to display text in a rectangle or are you wanting to input text? — markE
– markE, Commented Nov 18, 2015 at 5:02
@markE the user should input text in the dynamic rectangle and it can also be displayed in the rectangle — Believer
– Believer, Commented Nov 18, 2015 at 5:08
I do agree with @markE this is not a brilliant idea, but there was this question with a solution for an almost same problem : stackoverflow.com/q/29504481/3702797 — Kaiido
– Kaiido, Commented Nov 18, 2015 at 6:15
@Kaiido. yes, variations of this question are frequently asked. You've linked to an answer that nicely draws the wrapped text on canvas based on input from an input-type=text. In this question, the OP seems to also want the input element to be positioned on the canvas during data entry. If I wasn't getting tired (it's 1:30am here) I would edit my answer below to both position the input over the canvas and then draw the wrapped text after the user is done typing. Cheers and good night! — markE
– markE, Commented Nov 18, 2015 at 6:28
@markE, an hidden input would be possible with the linked answer but I won't do for OP either :-) Upvoted and good night ! — Kaiido
– Kaiido, Commented Nov 18, 2015 at 6:30

markE · Accepted Answer · 2015-11-18 05:16:10Z

Html5 canvas does not have any native text input capability.

IMO, don't try to make canvas do what it was not intended to do.

Instead, use CSS to position a input-type=text over the desired part of the canvas. The user can enter their text into this input.

When the user has entered their desired text you can draw their text in a rectangle on the canvas like this:

var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var text='Lorem ipsum dolor sit amet, vel te vocent bonorum singulis. Quem magna commune nam in. Ut eos oportere persecuti efficiantur.'; rectangledText(50,50,150,text,12,'verdana'); function rectangledText(x,y,width,text,fontsize,fontface){ var height=wrapText(x,y,text,fontsize,fontface,width) ctx.strokeRect(x,y,width,height); } function wrapText(x,y,text,fontsize,fontface,maxwidth){ var startingY=y; var words = text.split(' '); var line = ''; var space=''; var lineHeight = fontsize*1.286; ctx.font = fontsize + "px " + fontface; ctx.textAlign='left'; ctx.textBaseline='top' for (var n=0; n<words.length; n++) { var testLine = line + space + words[n]; space=' '; if (ctx.measureText(testLine).width > maxwidth) { ctx.fillText(line,x,y); line = words[n] + ' '; y += lineHeight; space=''; } else { line = testLine; } } ctx.fillText(line, x,y); return(y+lineHeight-startingY); }

body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

Research CSS positioning -- in particular relative and absolute positioning: developer.mozilla.org/en-US/docs/Web/CSS/position. Wrap your canvas in a div element with the div having position:relative. Set the canvas to position:absolute. Create an input-type-text that is initially hidden and having position:absolute and put it inside the wrapping div below the canvas. When needed, use CSS to position the input at desired canvas x,y and make it visible.
Here's a somewhat on-point demo of positioning a input-type=text over the canvas: jsfiddle.net/m1erickson/9f2ct
Thanks I will try to fix the bug when the user types too long word because it just continues in one line
Which bug are you finding? For your complete solution, you will need to combine the input code in my comment link with the display wrapped-text code in my answer. If you want to give the user a larger input area then you can substitute a textarea element for the in input element.

Collectives™ on Stack Overflow

How to create a dynamic drawing text box in html canvas

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related