Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2013
    Posts
    45
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Create Temporary Input Field Over Canvas

    Context:
    My project is a game that runs inside a canvas. When the player tries to buy something, a input textfield shows and I take the input of the player to know the amount of items he wants to buy. Once done, the input textfield disappears.

    Goal:
    -Create a Input TextField over the canvas at the position x=100, y=100.
    -Be able to access the content of the input via the variable myInput.


    This is what I got so far... Obviously doesn't work but you can get an idea of what I'm trying to accomplish.

    Code:
    showInput(100,100);
    showInput(x,y){
    	var input=document.createElement("input");
    	ctx.drawImage(input,x,y,100,20); //Seems Legit
    	myInput = input.value;
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, personally I would just overlay the canvas with a <div> with higher z-index and then have a full fledged <form> or whatever is needed inside that <div>.

    To show/hide it you just need to change the style.display property of the <div> and so there is zero interference with your drawing, per se.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    May 2013
    Posts
    45
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, personally I would just overlay the canvas with a <div> with higher z-index and then have a full fledged <form> or whatever is needed inside that <div>.

    To show/hide it you just need to change the style.display property of the <div> and so there is zero interference with your drawing, per se.
    If I understand correctly, I create the input at the beginning and I hide it. When I need it, I make it visible and on top of the canvas?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Exactly. Simpler than creating it dynamically by a long shot.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    May 2013
    Posts
    45
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Okay, I might sound newbie but how do I choose the X and Y position of an input?
    I got this:
    <input id="mapInput" type="number">

    I tried this... But it's obviously not working...
    <input id="mapInput" type="number" x="100" y="100">

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You need to put it into a <div> and then position the <div>.

    Code:
    <div id="popinput">
        <input id="mapInput" type="number"/>
    </div>
    And then you style the <div>:
    Code:
    div#popinput {
        display: none;
        position: absolute;
        height: 30px; width: 200px;
        border: solid black 1px;
        background-color: #eeeeee;
    }
    Then, to make it appear, you will do something like:
    Code:
    function showPopinput( )
    {
        var div = document.getElementById("popinput");
        div.style.top = ...see comments...
        div.style.left = ...
        div.style.display = "block";
    }
    // and you'll probably do something like this:
    document.getElementById("mapinput").onchange = 
        function( )
        {
            var val = this.value;
            ... do something with that value ...
            document.getElementById("popinput").style.display = "none";
        };
    NOW...

    How do you position the <div> where you want it, over the canvas?

    If you know the position of the canvas on the page, it's easy: Just add the x/y offsets to the canvas top/left and use those with div.style.top = ( canvastop + 100) + "px"; and ditto for left.

    But if you don't know the position of the canvas, you'll need some code to find it.

    Show me your HTML for the canvas and I can show you how to find it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    IdkWhatsRc (06-06-2013)

  • #7
    New Coder
    Join Date
    May 2013
    Posts
    45
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Great! Thanks a lot

  • #8
    New Coder
    Join Date
    May 2013
    Posts
    45
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Kinda had some problem to automate the whole thing but now it's working like a charm

    Code:
    var inputDb = ["Map","Bank","Shop"];
    var inputList = [];
    
    function initInput(){
    	for(i = 0 ; i < inputDb.length ; i++){
    		createInput(inputDb[i]);
    	}
    }
    
    
    function createInput(name){
    
    	var newDiv = document.createElement("div");
    	newDiv.setAttribute("id", "div"+name);
    	
    	newDiv.style.display ="none";
    	newDiv.style.position ="absolute"; 
    	
    	var newContent = document.createElement("input");
    	newContent.setAttribute("id", "input"+name);
    
    	newContent.onchange = this["input" + name + "Changed"];
    
    	newDiv.appendChild(newContent);
    	document.body.appendChild(newDiv);
    	
    	inputList.push(document.getElementById("div"+name));
    
    }
    function inputMapChanged(){
    	
    
    }
    function inputBankChanged(){
    	
    
    }
    function inputShopChanged(){
    
    
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •