Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input form inside canvas element

I'm wondering if there was any way to get an input from the user, preferably to a texbox (or anywhere a user can see what he's writting) in a canvas element through javascript.

like image 312
HolyThunder Avatar asked Feb 23 '12 01:02

HolyThunder


People also ask

Can you put HTML inside canvas?

HTML inside of canvas is not possible.

What element is used for input fields inside of a form element?

<input>: The Input (Form Input) element. The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.

Is canvas a form element?

Unfortunately it's not possible to use <canvas> as input form, but what you can do is to draw into canvas, then after finishing the drawing operations "export" it's content into an <image> . Fortunately you can use image as a form. The standard way to draw canvas content into an image is by using canvas.

Can you put a div inside a canvas?

You cannot place elements inside a canvas (and have both displayed); they are only displayed if the browser does not understand the canvas element.


1 Answers

Position a textbox over the top of the canvas element using absolute positioning.

my suggested layout is something like:

<div style="position:relative;width:800px;height:800px">
    <canvas width="800" height="800"></canvas>
    <input type="text" style="position:absolute;left:100px;top:300px;width:600px; etc...." />
</div>

with this you have the relative positioned <div> to base where your going to pop things up over, I would probably also add a modal backdrop...

hope this helps -ck

like image 96
ckozl Avatar answered Oct 16 '22 16:10

ckozl