CODEWITHSUNDEEP
javascripthtmlcanvasinput
HolyThunder
HolyThunder

Reputation: 463

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.

Upvotes: 13

Views: 36494

Answers (5)

DesignConsult
DesignConsult

Reputation: 191

I had to make a responsive canvas with an input (for a chat). With a position:fixed input (without padding, border, etc) that had the same background color as the canvas, i managed to position the input exactly on top of the canvas and let it scale, no matter the width/height of the browser window. WORKS LIKE A CHARM! This is the javascript i used (ofcourse you'll have to adjust the values to fit your area):

window.addEventListener("resize", deviceCheckResize);
    
function deviceCheckResize()
{
    ge("mp_input").style.left = (ge("myCanvas").offsetLeft + ge("myCanvas").offsetWidth*0.670) + "px";
    ge("mp_input").style.top = (ge("myCanvas").offsetTop + ge("myCanvas").offsetHeight * 0.914) + "px";
    
    tempHeight = (ge("myCanvas").offsetHeight * 0.055);
    ge("mp_input").style.height = tempHeight + "px";
    ge("mp_input").style.lineHeight = tempHeight + "px";
    ge("mp_input").style.width = (ge("myCanvas").offsetWidth * 0.243) + "px";
    ge("mp_input").style.fontSize = (w/64) + "px";

}

Upvotes: 0

rvcam
rvcam

Reputation: 157

There is a canvas input library. It does not use any DOM elements, but is built purely on canvas. You can read more more about it and download it at http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input . It's open-source.

Upvotes: 6

Ayush Aggarwal
Ayush Aggarwal

Reputation: 21

You can also try it with the following: 

<div style="margin:0px;padding:0px;position:absolute;width:[amount by programmer];height:[amount by programmer];border-style:solid;border-color:[if wanted];">
<canvas style="width:700px;height:700px;"></canvas>
<input type="text" style="position:absolute;width:[amount by programmer];height:[amount by programmer];"/></div>

Upvotes: 2

Plausibly Deniable
Plausibly Deniable

Reputation: 461

Question is a bit old, but I wanted to provide an alternative to absolute positioning. You can set the background-image (presumably to a div bigger than your textbox). Here's an example:

HTML:

...<canvas id="canvas"></canvas> <div id="backDrop">...[your textbox]</div>...

Javascript:

$('#backDrop').css('background-image', 'url(' + document.getElementById('canvas').toDataURL() + ')');

Here's a jsfiddle as an example.

As noted here, this essentially takes a snapshot of the canvas at the point you set the background-image property. Any changes you make to the canvas after setting the background-image will not be reflected (unless you re-set it), but this is probably what you want in most cases.

Upvotes: 7

ckozl
ckozl

Reputation: 6761

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

Upvotes: 14

Related Questions