html5 canvas, using html elements and css [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I am trying to make a game using the HTML5 canvas. As I understand it, I create a canvas element in html and modify it using javascript.

What about if I want for example to create a text input field inside the canvas. So if at one point during the game the player must enter his name, it would be nice to be able to use a html element <input="text" etc... and style it with css.

How can this be achieved considering all the code is done in javascript?

Thanks

Answer 1

Here's one way to do it:

A Demo: http://jsfiddle.net/m1erickson/9f2ct/

Html5 Canvas has no native text input capability, but you can always use css to

• Temporarily place a input-text-element over the canvas,

• Have user enter their name and press a submit button,

• Get the text value (user's name),

• Hide the temporary input-text-element

Before and After clicking the "Personal Info" icon:

Html

<div id="wrapper">
    <canvas id="canvas" width=300 height=300></canvas>
    <div id="myname">
        <input type="text" id="name" size=15>
        <button id="submitName">OK</button>
    </div>
</div>

CSS

#wrapper{
    position:relative;
}
#canvas{
    position:absolute;
    border:1px solid red;
}
#myname{ 
    position:absolute;
    left:28px;top:3px;
    visibility:hidden;
}

Javascript

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;


// name input related variables
$myname=$("#myname");
var playerName="";

// load a person icon and display it top-left
var img=new Image();
img.onload=start;
img.src="personIcon.png";
function start(){
    ctx.drawImage(img,0,0);
}


// listen for mousedown events
function handleMouseDown(e){

  // tell the browser we'll handle this event
  e.preventDefault();
  e.stopPropagation();

  // get the mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // if the mouse was pressed over the person icon
  // then make the name-input visible
  if(mouseX<img.width && mouseY<img.height){
      $("#name").text(playerName);
      $myname.css("visibility","visible");
  }

}

// listen for mousedown events
$("#canvas").mousedown(function(e){handleMouseDown(e);});

// listen for clicks on the OK button
// if clicked, save the player's name
// and hide the name-input
$("#submitName").click(function(){
    playerName=$("#name").val();
    $myname.css("visibility","hidden");
});

Answer 2

Check This link for more details.
Script in github
And JSFiddle

      <canvas id="canvas" width="350" height="50"></canvas>
<script>
    var input = new CanvasInput(
    {  
    canvas: document.getElementById('canvas'),  
    fontSize: 18,  
    fontFamily: 'Arial',  
    fontColor: '#212121',  
    fontWeight: 'bold',  
    width: 300,  
    padding: 8,  
    borderWidth: 1,  
    borderColor: '#000',  
    borderRadius: 3,  
    boxShadow: '1px 1px 0px #fff',  
    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',  
    placeHolder: 'Enter message here...'}

);
</script>